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

複数の要素に対して同じスタイルを指定する 場合は、クラス を使用します。クラスを使用すれば、複数の異なるタグに同じクラスを関連付けることによって、同じスタイルにすることができます。
前提条件: スタイル・シートを作成する

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

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

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

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

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

フィードバック