CSSセレクタとクラス

このレッスンでは、CSSのクラスセレクタの使い方を学び、共通のデザインルールをまとめて管理できるようになることを目標にします。「CSS class セレクタ」「CSS クラス 使い方」で調べている方向けです。

class="名前"をつけたタグは、CSSで.名前 { }と書いて選べます。同じクラスを複数のタグに使い回せるので、「見出しはすべて紫色」「注意書きはすべて赤色」のように、共通のデザインルールをまとめて管理できるようになります。

サンプルコードでは、.highlightというクラスを定義し、<span>と<p>という異なる種類のタグの両方に同じクラスを適用しています。同じクラス名を使い回すだけで、複数の異なるタグに一貫したデザインを与えられる点を確認してみましょう。

初心者がよくつまずくのが、CSSでクラスを指定するときに先頭の.(ドット)を書き忘れることです。.highlightとhighlightでは全く違う意味になり、ドットがないとタグ名を指定していると解釈されてしまいます。クラスを使わずタグ名だけで指定すると、ページ内のすべての該当タグに同じスタイルが適用されてしまう点にも注意しましょう。

デザインしたい範囲を細かく分けたいときは、クラスで名前をつけて区別するのが実務でも定番のやり方です。大規模なサイトでは、命名ルールを統一したクラス設計がコードの保守性を大きく左右します。