HTML
class・id の違い
初級読み方：クラス・アイディー のちがい｜英語：class vs id
classは複数の要素に同じ名前をつけられる。idは1ページに1つだけ。基本はclassを使う。
やさしい説明
classは同じスタイルを複数の要素に使い回せます。idは1ページに1つだけの要素を特定するために使います。
学校に例えると、classは「役職」（委員長、部長など複数人いる）、idは「出席番号」（1人だけを特定する）です。
CSSでスタイルを当てるときはclassを使うのが基本です。idはJavaScriptで特定の要素を操作するときや、ページ内リンクの目印に使います。
具体例・使い方
<!-- class: 複数の要素に同じスタイルを適用 -->
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
<!-- id: 1ページに1つだけ -->
<header id="top">ヘッダー</header>
<a href="#top">ページの先頭に戻る</a>いつ使う？
CSSでデザインを当てるときはclass。ページ内リンクの目印やJavaScriptで1つの要素を操作するときはid。迷ったらclassを使いましょう。
間違いやすいポイント
❌ 同じidを複数の要素に使う
<!-- ❌ idは1ページに1つだけ！ -->
<div id="card">カード1</div>
<div id="card">カード2</div>
<!-- ✅ 複数に使うならclass -->
<div class="card">カード1</div>
<div class="card">カード2</div>よくある疑問
Q: idはいつ使う？
A: ページ内リンクのアンカーや、JavaScriptで特定の要素を取得するときに使います。
Q: 同じidを2つの要素につけたらどうなる？
A: HTMLとしては無効です。JavaScriptのgetElementByIdが正しく動かなくなる可能性があります。
関連用語
📖 関連レッスン
レッスンを見る →