CSSの基本｜classとidの違いと使い分けを実務目線で解説

CSSで迷いやすいのが、.class と #id をどう使い分けるかです。結論から言うと、見た目をまとめて当てたいなら class、ページ内で1つだけの目印やJavaScriptの参照先にしたいなら id が基本です。

実務では、この使い分けが曖昧だと、あとからCSSが上書きしにくくなったり、HTMLの再利用性が落ちたりします。特に最初の学習段階で id を多用すると、後で保守がつらくなりがちです。

• class は複数の要素に使える
• class は1つの要素に複数指定できる
• id は同じHTML文書内で一意にする
• CSSだけで見ると id の方が強く当たりやすい
• 普段のスタイリングは class 中心の方が保守しやすい

ここがポイント: 日常的な装飾は class、ページ内リンクやフォーム部品の識別、JavaScriptで1点を確実に取る用途は id と考えると整理しやすくなります。

まず押さえたい違い

最初に、仕様上の違いを短く整理します。

classとは

class は、要素につける「グループ名」のようなものです。MDNでは、class は空白区切りのリストとして扱われます。つまり1つの要素に複数の class を付けられます。

<p class="notice">お知らせです</p>
<p class="notice important">重要なお知らせです</p>

.notice {
  color: #333;
}

.important {
  font-weight: bold;
}

この書き方なら、notice を共通ルール、important を追加ルールとして重ねられます。実務でよく使うのはこの形です。

idとは

id は、ページ内でその要素を一意に識別するための名前です。HTML仕様に沿ったMDNの説明でも、同じ文書内で重複しないことが前提です。

<h2 id="pricing">料金プラン</h2>

#pricing {
  margin-top: 48px;
}

id はCSSにも使えますが、それ以上に次の用途で重要です。

• ページ内リンクの移動先にする
• JavaScriptで特定要素を取得する
• フォーム部品と label を結びつける

classとidの違いを表で整理

長文で覚えるより、判断軸で見る方が実務では早いです。

項目	class	id
同じ名前を複数要素で使えるか	使える	使えない
1要素に複数指定できるか	できる	できない
主な用途	共通スタイル、再利用	一意な識別、リンク先、JS参照
CSSの特異性	低め	高め
保守性	高い	多用すると下がりやすい

書き方の基本

ここでは、最小構成で書き方を確認します。

classを使う例

<ul class="menu">
  <li class="menu-item">ホーム</li>
  <li class="menu-item">サービス</li>
  <li class="menu-item is-active">お問い合わせ</li>
</ul>

.menu-item {
  padding: 8px 12px;
  color: #444;
}

.is-active {
  color: #0057b8;
  font-weight: 700;
}

入力の考え方は「同じ見た目や状態を複数箇所で再利用する」です。

出力イメージは次の通りです。

• すべてのメニュー項目に共通の余白がつく
• 現在地だけ文字色と太さが変わる
• is-active は他の部品にも流用しやすい

idを使う例

<a href="#contact">お問い合わせへ</a>

<section id="contact">
  <h2>お問い合わせ</h2>
  <p>ご相談内容をお送りください。</p>
</section>

この例では、id="contact" がページ内リンクの移動先になります。これは class では置き換えにくい、id らしい用途です。

実務ではどう使い分けるべきか

現場では、CSSのためだけに id を使う場面は多くありません。スタイルの中心は class に寄せる方が、後から変更しやすいからです。

classを選ぶ場面

次のようなケースでは、まず class を選ぶのが自然です。

• ボタン、カード、見出し、バッジなどを複数箇所で使う
• 共通コンポーネントに同じ装飾を当てる
• 状態を表す is-active is-disabled のような名前を付ける
• 将来HTMLの構造が変わっても流用できる形にしたい

たとえば「新着バッジ」を10件の記事一覧に付けるなら、id ではなく class="badge badge-new" の方が明らかに扱いやすいです。

idを選ぶ場面

逆に、次の用途は id が向いています。

• ページ内リンクの移動先を作る
• label for="..." と入力欄を結びつける
• JavaScriptで特定の1要素を確実に取得したい
• アクセシビリティ属性の参照先に使う

例としてフォームでは、label と input の対応付けに id がよく使われます。

<label for="email">メールアドレス</label>
<input id="email" type="email" name="email">

この id は、見た目のためというより、部品同士を正しく結びつけるために必要です。

idをCSSで多用しない方がいい理由

初心者がつまずきやすいのはここです。id セレクタは class より特異性が高く、あとから上書きしにくくなります。MDNの特異性ガイドでも、セレクタの重みで適用ルールが決まることが説明されています。

たとえば次のCSSを見てください。

<p id="message" class="text-alert">エラーが発生しました</p>

#message {
  color: red;
}

.text-alert {
  color: blue;
}

この場合、同じ要素に対しては #message の方が強く、文字色は赤になります。class で上書きしたつもりでも反映されず、「CSSが効かない」と感じる原因になりやすい部分です。

ありがちな問題

• 1ページの中で id ベースの装飾が増えて整理しづらくなる
• コンポーネントを別ページに再利用すると id 重複の危険が出る
• 後から .button で全体調整したいのに、一部だけ #submit-button が勝ってしまう

そのため、見た目の調整は class、識別は id に分けると破綻しにくくなります。

NG例と改善例

実務でよくある失敗を、短い例で見ておきます。

NG例1: 見た目だけでidを振る

<div id="red-box">注意</div>

#red-box {
  background: red;
}

この名前だと、色を変えた瞬間に名前と実態がズレます。

改善例はこちらです。

<div class="alert-box">注意</div>

.alert-box {
  background: #d33;
}

alert-box なら、デザイン変更後も意味が残ります。

NG例2: 同じidを複数回使う

<li id="item">A</li>
<li id="item">B</li>
<li id="item">C</li>

これはHTMLとして不適切です。JavaScriptやページ内リンクでも不具合の原因になります。

改善例はこちらです。

<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>

繰り返す部品は class を使います。

命名のコツ

class と id は、名前の付け方でも差が出ます。

classの命名

class は再利用前提なので、役割がわかる名前が向いています。

• card
• button-primary
• form-error
• is-open

MDNでも、見た目そのものより意味や役割を表す名前が勧められています。red-text や big-font のような見た目直結の名前は、後でデザイン変更に弱くなります。

idの命名

id は1点ものなので、そのページ内で何を指すかが明確な名前にします。

• site-header
• contact
• search-form
• email

なお、id も class もCSSセレクタで使うなら、特殊文字や先頭数字など、エスケープが必要な名前は避けた方が無難です。

classとidを一緒に使う例

実務では、同じ要素に class と id を併用することもあります。

<section id="faq" class="content-section">
  <h2 class="section-title">よくある質問</h2>
</section>

この場合の役割分担は明快です。

• id="faq": ページ内リンクやJS参照用
• class="content-section": 共通レイアウト用
• class="section-title": 見出し装飾用

この分け方なら、リンク先としての識別と、デザインの再利用を両立できます。

代替手段と関連知識

class と id だけで無理に解決しなくてもよい場面もあります。

data属性を使う場面

JavaScriptの処理対象を区別したいだけなら、data-* 属性の方が意図がはっきりすることがあります。

<button class="button" data-action="delete">削除</button>

「見た目」は class、「処理の意味」は data-action と分けると、HTMLが読みやすくなります。

属性セレクタや構造セレクタ

CSSでは class や id 以外にも、属性セレクタや子孫セレクタがあります。ただし、初心者のうちはまず class と id の役割を整理する方が先です。土台が曖昧なまま複雑なセレクタを増やすと、保守が急に難しくなります。

迷ったときの判断基準

最後に、実務で使いやすい判断基準を短くまとめます。

• 複数の要素に使うなら class
• 1つの要素だけを識別するなら id
• デザインや状態管理は class
• ページ内リンク、フォーム連携、JSの一点取得は id
• CSSの保守性を優先するなら id セレクタの多用は避ける

最初は「id の方が強くて便利」と感じるかもしれません。ただ、実務では強すぎる指定が後の変更を難しくします。まずは class を基本にし、id は本当に一意な識別が必要な場面だけに絞る。このルールで書き始めると、HTMLもCSSもかなり崩れにくくなります。

参照リンク

• MDN: HTML class global attribute
• MDN: HTML id global attribute
• MDN: CSS selectors
• MDN: Specificity
• W3C: Selectors Level 4