Webサイトを作るとき、HTMLで要素に名前をつけることがありますよね。「id」と「class」、どちらも要素に名前をつけるためのものですが、実はまったく違う役割を持っています。この二つの違いをしっかり理解することが、Web制作の第一歩であり、とても重要なんです。今回は、この「id と class の 違い」を分かりやすく解説していきます。
id と class の根本的な違い：ユニークさ vs 複数適用
まず、一番大きな違いは「ユニークさ」にあります。HTML文書全体で、idは「この要素だけに！」という、たった一つしかない名前につけることができます。例えるなら、あなたの「マイナンバー」のようなもの。世界に一つしかない、あなただけの番号ですよね。だから、idがついた要素は、文書の中に一つしか存在できません。
一方、classは「このグループの要素！」というように、複数の要素に同じ名前をつけることができます。まるで、学校の「クラス」や、趣味の「サークル」のようなもの。同じクラスやサークルには、たくさんの人が所属できますよね。classもそれと同じで、一つのclass名を、たくさんのHTML要素に適用できるんです。
この「idは一つだけ」「classは複数OK」というルールを覚えておくと、使い分けがぐっと楽になります。
- id: 文書内で一意（ユニーク）
- class: 複数適用可能
この「idは一つだけ」「classは複数OK」という原則を理解することが、id と class の 違いを把握する上で最も重要です。
id の使い方：特別な場所への目印
idは、その要素が文書の中で「ここだけ！」という特別な意味を持つ場合に使うと便利です。例えば、サイトのヘッダー部分、フッター部分、メインコンテンツエリアなど、ページの中で一番目立つ、あるいは重要な部分にidをつけることが多いです。CSSで特定の要素だけを大きくしたり、色を変えたりする際に、idを指定してピンポイントでスタイルを適用できます。
また、JavaScriptで特定の要素を操作したいときにもidはよく使われます。例えば、「このボタンをクリックしたら、この部分の表示を変えたい！」という場合、その「この部分」にidをつけておけば、JavaScriptで簡単に見つけ出して操作できるのです。
idを使った具体的な例を見てみましょう。
| HTMLコード | 説明 |
|---|---|
| <div id="main-content">...</div> | このdiv要素は、ページの中で「メインコンテンツ」という特別な場所であることを示します。 |
| <h1 id="page-title">...</h1> | このh1要素は、ページ全体の「タイトル」という特別な見出しであることを示します。 |
class の使い方：共通のスタイルを適用する
classは、同じような見た目や振る舞いをしたい要素に、まとめてスタイルを適用したいときに大活躍します。例えば、ボタンのデザインをいくつか作りたいとき、共通のスタイル（色、形、文字の大きさなど）はclassでまとめて定義しておき、個別のスタイルだけをidで指定するといった使い方ができます。
また、リストの項目や、カード形式のコンテンツなど、繰り返し現れる要素に同じデザインを適用したい場合にもclassは最適です。これにより、コードの重複を減らし、メンテナンスしやすいWebサイトを作ることができます。
classの便利な使い方をいくつかご紹介します。
- 汎用的なスタイル定義: 例えば、「button」というclass名で、ボタンの基本的なデザインを定義します。
- バリエーションの追加: 「button-primary」「button-secondary」のように、基本のclassに加えて、色や状態を変えるためのclassを追加します。
-
複数のclassの適用:
一つの要素に複数のclassを適用することも可能です。例えば、
<button class="button button-primary">のように使えます。
id と class の使い分け：いつ、どちらを選ぶべきか？
では、具体的にどのような場面でidとclassを使い分けるのでしょうか。これは、その要素が「全体で一つだけなのか、それとも複数あるのか」という視点で考えると分かりやすいです。
-
idが適している場合:
- ページ内の特定のセクション（ヘッダー、フッター、サイドバー、メインコンテンツなど）
- ページ内リンクの飛び先（アンカーリンク）
- JavaScriptで絶対に一つだけ操作したい要素
-
classが適している場合:
- 複数の要素に同じスタイルを適用したい場合（ボタン、カード、リストアイテムなど）
- 要素のグループ化や分類
- 再利用可能なデザインコンポーネント
原則として、特別な理由がない限りはclassを優先して使うのが良いとされています。 なぜなら、classの方が再利用性が高く、コードの管理がしやすいためです。idは、どうしても「この要素だけ！」という場合に限定して使うのが、より良いWeb制作の習慣と言えるでしょう。
JavaScript からのアクセス：id と class の挙動の違い
JavaScriptを使ってHTML要素を操作する際にも、idとclassではアクセス方法が異なります。idは「一つしかない」という特性を活かして、JavaScriptで簡単にその要素を取得できます。
一方、classは複数の要素に適用されている可能性があるため、JavaScriptで取得すると「要素のリスト（配列のようなもの）」として返ってきます。そのため、複数の要素の中から特定の要素を選んで操作したい場合は、リストのインデックス（番号）を指定したり、ループ処理を使ったりする必要があります。
JavaScriptでのアクセス方法の例を以下に示します。
-
idで要素を取得する場合:
document.getElementById('yourId'); -
classで要素を取得する場合:
document.getElementsByClassName('yourClass');（これは要素のリストを返します） -
より新しい方法（querySelector/querySelectorAll）:
CSSセレクタと同じように指定できるため、
document.querySelector('.yourClass');（最初に見つかった要素を返す）やdocument.querySelectorAll('.yourClass');（見つかった全ての要素のリストを返す）といった方法もよく使われます。
CSS からのアクセス：id と class の優先順位
CSSでスタイルを指定する際にも、idとclassには「優先順位」というものがあります。これは、もし同じ要素に対してidとclassの両方でスタイルが指定された場合に、どちらのスタイルが優先されるか、というルールです。
一般的に、CSSのスタイルには「重要度」のようなものがあり、idセレクタはclassセレクタよりも優先度が高いとされています。つまり、同じプロパティ（例えば色）をidとclassの両方で指定した場合、idで指定された色の方が優先されて適用されることが多いのです。
ただし、CSSには「
!important
」という、さらに強力な指定方法もあります。しかし、これは乱用するとコードが読みにくくなるため、特別な理由がない限りは避けるべきです。idとclassの優先順位を理解し、基本的にはclassでスタイルを定義し、idは特別な要素の装飾に使う、という使い分けがおすすめです。
まとめ：id と class の違いをマスターして、より良いWebサイトを！
これまで、idとclassの根本的な違い、それぞれの使い方、JavaScriptやCSSでの挙動の違いについて解説してきました。idは「唯一無二」、classは「複数適用可能」というのが一番のポイントです。この違いを理解し、適切に使い分けることで、より構造が分かりやすく、メンテナンスしやすい、そして表現力豊かなWebサイトを作ることができます。さあ、今日からidとclassをマスターして、あなたのWeb制作スキルをさらにレベルアップさせていきましょう！