HTMLのID属性とクラス属性の違いとCSSセレクターの使い方

CSSでWebページをスタイリングする際、「ページ内の特定の部分だけ」を狙って装飾したい場面がよくあります。そんなときに活躍するのが、要素に付与するID属性とクラス（class）属性です。この2つを使いこなせば、1つまたは複数の要素を思いどおりに選択できるようになります。

本記事では、実際のコード例を見ながら進めていきます。ぜひCodePenなどの環境で手を動かしながら読んでみてください。

ID属性とCSSセレクター

まずは<p>タグを使って、シンプルな段落を作成しましょう。

<p> この段落に色をつけてください！ </p>

IDとは、単一の要素に固有の識別子を与えるための属性です。書き方はid="名前"という形式になります。

段落に色をつけたいので、他と重複しない一意の名前を付けておきましょう。

<p id="paragraph-colored"> この段落に色をつけてください！ </p>

IDを付けたら、同じIDを別の要素に再利用しないことが大切です。ブラウザはエラーを表示しないため気づきにくいのですが、IDが重複するとID本来の目的が失われ、CSSも意図したとおりに動作しなくなります。

IDが準備できたら、CSS側ではハッシュ記号「#」を使ってその要素を選択します。段落を紫色にしてみましょう。

#paragraph-colored {
  color: purple;
}

たったこれだけで完了です。とても簡単ですね！

クラス属性とCSSセレクター

段落のテキストを紫色にできました。次に、このpタグの下にアボカドの画像がたくさん並んでいる状況を想像してみてください。

<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">

これらの画像をまとめて選択するにはどうすればよいでしょうか。IDは1つの要素だけを識別するためのものなので使えません。ここで登場するのがクラス属性です。

クラス属性はclass="クラス名"という形式で記述します。1つのクラスには複数の要素が所属できるため、アボカド画像すべてに同じクラスを割り当てることができます。

<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">

これでアボカド画像に「avocado-devs」というクラスが付きました。CSSのクラスセレクターは、ドット記号「.」で表します。ここでは、夜遅くまで作業しているという設定にして、色を100%反転させるfilterプロパティを追加してみましょう。

.avocado-devs {
  filter: invert(100);
}

クラスを使うことで要素のグループを作り、CSSのクラスセレクターでそのグループ全体に一括してスタイルを適用できる、というわけです。

要素型セレクターとクラスセレクターの組み合わせ

CSSでクラスを指定するときは、ドットセレクターに要素型セレクター（タグ名）を組み合わせるのがおすすめです。理由はシンプルで、セレクターが具体的であるほど、CSSがより正確に適用されるからです。

CSSでは、要素型セレクターはタグ名をそのまま書くだけで使えます。たとえば次はすべて有効なセレクターです。

/* 見出し */
h1 {}
/* 段落 */
p {}

そこで、imgタグを組み合わせて、画像のセレクターをリファクタリングしてみましょう。

img.avocado-devs {
  filter: invert(100);
}

見た目上の動作は変わりませんが、コードが成長していくにつれて、この詳細度（specificity）は重要になってきます。同時に、コードの可読性も高まります。他の開発者は「avocado-devsクラスは画像に使われている」とひと目で理解できるでしょう。

もうひとつ重要なのは、この書き方だと特定のクラス名を持つ画像にだけフィルターが適用されるという点です。仮にクラスを持たない新しい画像を追加しても、スタイルは適用されません。Web開発において、こうした条件付きの挙動こそが望ましいケースは多いのです。

まとめ

• ID属性：ページ内で一意の要素に付ける識別子。CSSでは「#名前」で指定する。
• class属性：複数の要素に共通して付けられるラベル。CSSでは「.名前」で指定する。
• クラスセレクターはタグ名と組み合わせると詳細度が上がり、可読性も向上する。