クラスとIDで指定する

・.クラス名 { プロパティ:値; }
・#ID名 { プロパティ:値; }

今までのページで紹介した方法でセレクタを指定すると、指定したタグすべてにスタイルが適用されます。

ですが、特定の段落だけとか、特定の見出しだけスタイルを変えたいという場合があると思います。

そんなときに登場するのが、クラスとIDです。

まずクラスですが、セレクタを指定するときに.(ドット)クラス名とします。クラス名は分かりやすい名前にしましょう。

例えば文字を赤色にするクラスなら.redのように効果が一目でわかるような名前をつけましょう。

そしてスタイルを適用したい場所に<h1 class="クラス名">のように使います。

例えば上の場合なら<h1 class="red">のように使います。

次にIDは、セレクタを指定するときに#ID名とします。IDも分かりやすい名前にしましょう。

後はクラスと同じで、使いたいところで<h1 id="ID名">のようにしてIDを指定して使います。

ただしIDには文章中で一回しか使われない一意性というものが必要です。

別の箇所で同じIDを使わないように注意しましょう。


また特定のタグの特定のクラスだけを指定することもできます。

h1のredクラスだけ赤色にしたいときは

セレクタを h1.red とします。こうすると<h1 class="red">としたときだけスタイルが適用されます。

＜＜　「セレクタの指定の仕方」へ　　　　　「複数のページにスタイルを適用する」へ　＞＞



ホームページ作成とHTML＞＞スタイルシートの書き方講座＞＞クラスとIDで指定する