idとclassの使い分けについて

最終更新日 2024.07.18

idとclassの使い分けについて解説していきます。

1. idとclassの違い

CSSを記述するためにHTMLタグに名前をつける方法として、「id」と「class」2種類の指定方法があります。

両者の違いは、idが同じページ内で1度しか使用できないのに対し、classは何度でも使用することができます。

一般的にはclassを使用することが多いですが、idを使用する場合と、使用しなくても良いが使用するとメリットがある場合の2つについて説明していきます。

下記の場合は、idの使用を推奨します。

例えば、グローバルナビゲーションからページ内のコンテンツに遷移する場合など、遷移先を一意に特定しなければならない場合は遷移先の要素にidを指定します。

特定の要素をクリックした場合に何か処理を行いたい場合など、JavaScript側で要素を特定したい場合は、対象の要素にidを指定します。

下記の場合は必ずしもidを使用する必要はないですが、使用することで得られるメリットもありますので、好みに合わせて使用してみてください。

idで指定されているとその要素の中のクラスがページ内の他の箇所では使用されていないことが一目でわかるため、第3者がCSSを修正する際などに修正がしやすいというメリットがあります。（全てclassで記述されている場合、ページ内の他のclassに影響が出ないか確認が必要。）

ブロックやセクション毎にidで囲んでおくことで、中のCSSがページ内の他のブロックに干渉するのを防ぐことができます。

ブロックやセクション毎にidで囲んでおくことで、CSSを整理して見やすくまとめることができます。（これは好みです。）

idとclassの使い分けについて解説してきました。

一般的にはCSSは「class」を使用して記述しますが、要素を一意に特定したい下記のような場合には「id」を使用します。

その他については、idとclassの特性をよく理解した上で、ご自身のコーディングスタイルに合わせて使い分けましょう！