HTML
class・id の違い
初級読み方：クラス・アイディー のちがい｜英語：class vs id
classは複数の要素に同じ名前をつけられる。idは1ページに1つだけ。基本はclassを使う。
やさしい説明
classは同じスタイルを複数の要素に使い回せます。idは1ページに1つだけの要素を特定するために使います。
学校に例えると、classは「役職」（委員長、部長など複数人いる）、idは「出席番号」（1人だけを特定する）です。
CSSでスタイルを当てるときはclassを使うのが基本です。idはJavaScriptで特定の要素を操作するときや、ページ内リンクの目印に使います。
classとidの違いまとめ
| 項目 | class | id |
|---|---|---|
| 使用回数 | 何度でも使える | 1ページに1つだけ |
| CSSセレクタ | .card（ドット） | #header（シャープ） |
| 主な用途 | スタイル・レイアウト | JS操作・ページ内リンク |
| 複数指定 | 1要素に複数のクラスを付与可 | 1要素に1つのみ |
具体例・使い方
<!-- class: 複数の要素に同じスタイルを適用 -->
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
<!-- 1つの要素に複数のクラスを付与することもできる -->
<button class="btn btn-primary">送信</button>
<!-- id: 1ページに1つだけ -->
<header id="top">ヘッダー</header>
<a href="#top">ページの先頭に戻る</a>/* CSSでの書き方 */
.card { /* classはドット（.） */
border: 1px solid #ccc;
padding: 16px;
}
#top { /* idはシャープ（#） */
background: navy;
color: white;
}JavaScriptでの使い方の違い
// id: 1つの要素を取得
const header = document.getElementById("top");
// class: 複数の要素をまとめて取得
const cards = document.querySelectorAll(".card");
cards.forEach((card) => {
card.style.background = "lightblue";
});JavaScriptで要素を操作するとき、idなら getElementById、classなら querySelectorAll を使います。1つだけ操作したいときはid、複数まとめて操作したいときはclassが便利です。
いつ使う？
- class を使う場面 — CSSでデザインを当てる、同じスタイルを複数要素に適用、JSで複数要素をまとめて操作
- id を使う場面 — ページ内リンク（
href="#section1"）の目印、JSで特定の1要素を操作、フォームのlabelとinputを紐付ける
迷ったら class を選ぶのが正解です。idは「絶対に1ページ1つ」という確信があるときだけ使いましょう。
間違いやすいポイント
❌ 同じidを複数の要素に使う
idは1ページに1つだけという決まりです。重複するとJavaScriptが最初の要素しか取得できなくなるバグが発生します。
<!-- ❌ idは1ページに1つだけ！ -->
<div id="card">カード1</div>
<div id="card">カード2</div>
<!-- ✅ 複数に使うならclass -->
<div class="card">カード1</div>
<div class="card">カード2</div>❌ CSSセレクタを間違える
classは .名前（ドット）、idは #名前（シャープ）です。記号を間違えるとスタイルが当たりません。
よくある疑問
Q: idはいつ使う？
A: ページ内リンクのアンカーや、JavaScriptで特定の要素を取得するときに使います。
Q: 同じidを2つの要素につけたらどうなる？
A: HTMLとしては無効です。JavaScriptのgetElementByIdが正しく動かなくなる可能性があります。
関連用語
📖 関連レッスン
レッスンを見る →