classとidの違いと命名のコツ｜初心者向けにわかりやすく解説

HTMLとCSSを学び始めると必ず出てくる、class（クラス）と id（アイディー）。

どちらも「名前をつけるタグ属性」ですが、根本的な役割・使い方・優先順位が違います。

この記事では、class と id の違い、使い分けの基準、命名ルール（ネーミング規則） を、初心者向けにわかりやすく解説します。

---

class と id とは？

HTML要素に 名前（識別子）を付ける属性 のこと。

<div class="box"></div>
<div id="main-visual"></div>

• class：複数の要素に同じ名前を付けられる
• id：1ページに1つだけ使う固有名

---

class の特徴（複数OK・デザイン向け）

<div class="card item highlight">…</div>

• classは何個でも付けられる
• 同じclassを複数の要素に使える
• CSSのデザイン調整で最も使う

CSS例

.card {
  border: 1px solid #ddd;
}

→ class は デザイン目的で最も使用する属性 です。

---

id の特徴（1ページ1回・固有識別子）

<div id="header-logo">…</div>

• 1ページに 1回だけ
• 独立した固有の意味
• アンカーリンクに使われることが多い

アンカーリンク例

<a href="#access">アクセスへ移動</a>

<section id="access">…</section>

→ ページ内ジャンプとして便利。

---

class と id の違いまとめ

比較項目	class	id
使用回数	複数OK	1ページ1回のみ
目的	CSSデザイン／グループ化	固有の識別・アンカー
CSS優先度	中	高
HTMLの役割	汎用・複数適用	唯一の識別子
再利用	可能	不可（1回のみ）

---

どっちを使うべき？判断基準

基本：デザインには class を使う

→ ほぼすべて class でOK。

id を使う場面は？

• ページ内リンクの目的地
• JavaScriptで特定の要素を操作したい時
• ページ内で唯一の要素を指したい時
  （例：メインビジュアル、記事タイトル）

id をデザイン目的で多用しない

→ CSS優先度が高すぎて「上書き困難」になりがち。

---

CSSでの優先順位（specificity）

CSS優先順位（強い順）

1. id（#id-name）
2. class（.class-name）
3. タグ名（h2, p など）

id は強すぎるので CSSが複雑化しやすい

→ 大規模なサイトほど class を中心に使う理由。

---

命名のコツ（ネーミングルール）

短く、意味がわかる名前にする

良い例：

• main-visual
• header-nav
• profile-box
• btn-orange

悪い例：

• aaa
• div1
• box_new2

---

単語はハイフン区切りにする（推奨）

◎ good-example
× bad_example
× badExample

→ ハイフン（kebab-case）がHTML/CSSの標準

---

役割に合わせた命名をする

• 枠 → box, wrap, container
• ボタン → btn
• 記事関係 → post, article
• 見出し → heading

例）

<div class="cta-box">
  <h2 class="cta-heading">今すぐチェック</h2>
</div>

---

id は「固有名」「唯一名」にする

<div id="site-header">…</div>
<div id="footer-contact">…</div>

---

実践コード例

class でデザインを制御する例

<div class="card">
  <h3 class="card-title">商品名</h3>
  <p class="card-text">説明文が入ります。</p>
</div>

.card {
  border: 1px solid #ddd;
  padding: 16px;
}
.card-title {
  font-weight: bold;
}

---

id をページ内リンクに使う例

<nav>
  <a href="#faq">よくある質問</a>
</nav>

<section id="faq">
  <h2>よくある質問</h2>
  <p>回答が入ります。</p>
</section>

---

よくある間違い

id を大量に使ってしまう

→ CSS優先度が強すぎて管理しづらくなる。

class 名に日本語・記号を入れる

→ バグの原因に。

class 名が長すぎる

→ コードが読みづらい。

同じ id を2回使う

→ ルール違反（HTML検証ツールでエラー）。

---

まとめ

• class は複数の要素に使えて再利用性が高い
• id は1ページに1つだけの固有識別子
• デザイン関連は基本 class を使う
• id はアンカーリンクや特定要素の識別に使う
• 命名は「短く・意味のある名前」にするのが基本

初心者が最初に覚えるべき、非常に重要な基礎知識です。

---

著者からのひと言

class と id の違いを理解すると、HTMLとCSSの“つながり”が一気に見えてきます。
特に class の使い方と命名ルールを覚えておくと、コードがきれいにまとまり、修正もしやすくなります。今日からぜひ意識してみてください！

次回の記事は「videoタグで動画を埋め込む方法」です。