クラスおよび ID スタイルを定義して適用する

複数のエレメントに対して同じスタイルを指定する 場合は、クラス を使用します。クラスを使用すれば、複数の異なるタグに同じクラスを関連付けることによって、同じスタイルにすることができます。

前提条件: スタイル・シートを作成する

同一タグの各オカレンスに複数のクラスを関連付けることによって、同一タグに別のスタイルを実現することができます。

クラス・スタイルの作成と適用は、次の手順で行います。

  1. 「プロジェクト・エクスプローラー」ビュー内で編集したいファイルをダブルクリックして、.CSS ファイルを開く。 スタイル・シートが編集域に開きます。
  2. クラス・スタイルの作成と適用は、次の手順で行います。
    1. スタイル・ルールの追加スタイル・ルールの追加アイコンのピクチャー アイコンをクリックする。 「新規スタイルのセレクター設定」ダイアログ・ボックスが開きます。
    1. クラス」ラジオ・ボタンを選択する。「クラス名 (Class name)」フィールドにクラスの名前を入力します。名前は、たとえば「.note」のようにピリオドで始まる必要があります。ID」オプションには、「クラス」 オプションとほぼ同じ効果があります。唯一の相違点は、ID をページ内の 1 箇所だけ (タグの 1 つの出現) に適用できることです。したがって、ID ではなく、クラスを使用することをお勧めします。 ID を使用する場合は、「ID 」ラジオ・ボタンを選択して「ID」フィールドに名前を入力します。名前は # で始まる必要があります。
    2. OK」をクリックする。
    3. 「スタイルの追加」ダイアログ・ボックスを使用して、特定のスタイル定義を追加する。
    4. OK」をクリックして、変更を保管する。指定したクラス名が、「スタイル」ビューに表示されます。
  3. クラスをエレメントに適用するには、以下を行います。
    1. Page Designer のデザイン・ページでエレメントを選択する。
    2. 「プロパティー」ビューで「クラス・フィールド」の横のブラウズ・アイコンをクリックする。 プロパティー・ビューのクラス・フィールドのピクチャー「クラスの選択」ダイアログ・ボックスが開く。
    3. スタイル・シートを展開して求めるクラスを選択する。

      「クラスの選択」ダイアログ・ボックス内の選択されたクラスのピクチャー

    1. OK」をクリックする。
  4. ID スタイルを適用するには、以下を行います。
    1. ID スタイルを適用するエレメントを選択する。
    2. 「プロパティー」ビューで「すべての属性すべての属性アイコンのピクチャー アイコンをクリックする。
    3. ID フィールド内に ID 名 (# はなし) を入力する。

      プロパティー・ビュー内の ID 属性のピクチャー

  5. 同様に、他のエレメントを選択して同じクラス・スタイルを適用できます。既に定義されているクラス・スタイルであれば、「スタイル」ツールバーから適用することもできます。 Page Designer から「ツールバー (Toolbar)」 > 「スタイル」を選択して、 「スタイル」ツールバーを表示します。ドロップダウン・リストからクラス名を選択することによって、フォーカスの当てられたエレメントにクラス・スタイルを適用できます。
  6. スタイル・シートで使用されているクラス定義を参照するには、「スタイル」ビュー内のスタイルをクリックする。 スタイルの定義は、「プロパティー」ビューで参照できます。
関連概念
Cascading Style Sheet (CSS) Designer
関連タスク
スタイルを定義する
事前定義された領域のスタイルを指定する。
指定したスタイルを除去する
エレメントのスタイルを定義する
疑似 HTML リンク・スタイルを定義する
ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.
(C) Copyright IBM Japan 2005.