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

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

- 同様に、他のエレメントを選択して同じクラス・スタイルを適用できます。既に定義されているクラス・スタイルであれば、「スタイル」ツールバーから適用することもできます。
Page Designer からを選択して、
「スタイル」ツールバーを表示します。ドロップダウン・リストからクラス名を選択することによって、フォーカスの当てられたエレメントにクラス・スタイルを適用できます。
- スタイル・シートで使用されているクラス定義を参照するには、「スタイル」ビュー内のスタイルをクリックする。
スタイルの定義は、「プロパティー」ビューで参照できます。