サイト名称変更のお知らせ

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

最終更新日

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

目次

  1. 1. idとclassの違い
  2. 2. idとclassの使い分け
    1. ・idを使用する場合
    2. ・idを使用するとメリットがある場合
  3. 3. まとめ

1. idとclassの違い

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

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

2. idとclassの使い分け

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

idを使用する場合

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

  1. ①:内部リンクの遷移先として指定する場合
  2. ②:JavaScriptなどの処理で要素を特定する必要がある場合

①:内部リンクの遷移先として指定する場合

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

②:JavaScriptなどの処理で要素を特定する必要がある場合

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

idを使用するとメリットがある場合

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

  1. ①:コード内で明示的に一度しか使用していないことを示したい場合
  2. ②:他のCSSからの干渉を防ぎたい場合
  3. ③:CSSを整理したい場合

①:コード内で明示的に一度しか使用していないことを示したい場合

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

②:他のCSSへの干渉を防ぎたい場合

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

③:CSSを整理したい場合

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

3. まとめ

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

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

  • 内部リンクの遷移先として指定する場合
  • JavaScriptなどの処理で要素を特定する必要がある場合

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

関連記事