classとidの使い分けは？

✅ 回答

迷ったらclass。これが基本ルールです。idを使う場面は限られています。

根本的な違い

	class	id
同じ名前を使える回数	何度でもOK	ページ内に1回だけ
1つの要素に複数つけられる？	OK（class="card large"）	1つだけ
CSSの優先度	低い（0,1,0）	高い（1,0,0）
主な用途	スタイル適用	ページ内リンク、JS取得

classを使う場面

<!-- class：同じスタイルを複数の要素に適用 -->
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>

<style>
  .card { border: 1px solid #ccc; padding: 1rem; }
</style>

同じ見た目のカードが3枚あるなら、3つとも class="card" をつけてCSSを共有します。

idを使う場面

<!-- id：ページ内に1つだけの要素を特定する -->
<header id="site-header">...</header>
<main id="main-content">...</main>

<!-- ページ内リンクで使う -->
<a href="#contact">お問い合わせへジャンプ</a>
<section id="contact">...</section>

<!-- JavaScriptで特定の要素を取得する -->
<script>
  const header = document.getElementById("site-header");
</script>

idの出番は主に2つ：ページ内リンクの飛び先とJavaScriptで1つの要素を取得するときです。

「idでスタイルを当てる」のがNGな理由

idセレクタ（#header）はCSSの優先度が非常に高いため、あとからスタイルを上書きしにくくなります。学園祭サイトを複数人で作っているとき、誰かが #header { color: red; } と書くと、他の人が .header { color: blue; } で上書きできません。classで統一しておけば、この問題は起きません。

情報Ⅰのテストでの出題パターン

「次のHTMLで、classとidの使い方が正しいものを選べ」という問題が出ます。ポイント：

• 同じidが2回出てきたら → NG（idはページ内で一意）
• CSSで #card を使って複数要素にスタイルを当てようとしている → NG
• class="btn primary" のようにスペース区切りで複数クラス → OK

実務での判断フロー

1. CSSでスタイルを当てたい → class
2. ページ内リンクの飛び先にしたい → id
3. JSで getElementById したい → id（ただし querySelector(".class") でも代用可）
4. それ以外 → class