【初心者向け】classとidの違いをわかりやすく解説！使い分けとルール

2024年12月7日2026年6月25日

目次 [ close ]

はじめに

CSSで要素を指定するときに使う class と id。「どっちを使えばいいの？」「# と . の違いは？」と迷いますよね。この記事では、2つの違い・書き方・絶対に守るべきルールまで、コード付きで解説します！

<p class="highlight">スタイルあり</p>
<p>スタイルなし</p>
<p class="highlight">スタイルあり</p>

.highlight {
  background-color: yellow;
  color: red;
}

同じ class を付けた要素すべてに適用されます。

<p id="lead">この段落だけ特別なスタイル</p>

#lead {
  background-color: blue;
  color: white;
}

意外に思うかもしれませんが、装飾（CSS）の目印にはidをほとんど使わず、classで統一するのが実務では一般的です。理由は記事内でも触れた「詳細度」。idはCSSの優先度が高すぎて、後から上書きしようとすると効かず、!importantに頼りたくなる…という悪循環に陥りがちです。

私も駆け出しの頃にidで装飾して大変な目に遭い、それ以来「装飾はclass、idはCSS以外の用途」と切り分けるようになりました。

ページ内リンク：<a href="#contact"> でその場所へジャンプ
JavaScriptの目印：document.getElementById() で一発で取得
フォームのラベル紐付け：<label for="email"> と <input id="email"> をつなぐ（クリック範囲が広がりアクセシビリティ向上）

「装飾＝class／目印＝id」と覚えておくと、迷わなくなりますよ。