モダンCSSにおけるidセレクタの役割：いつ使うべきか具体例で解説

2026年5月5日2026年5月9日

基礎知識

CSSの学習を始めたばかりの方から、長年フロントエンド開発に携わっているエンジニアまで、idセレクタの使用可否や適切な使いどころについて一度は悩んだことがあるのではないでしょうか。

かつてCSS設計のベストプラクティスでは「idセレクタは詳細度が高すぎるため避けるべき」とされてきました。

しかし、CSS Cascade Layers（カスケードレイヤー）やCSS Scopeといったモダンな機能が普及した現在のWeb標準において、idセレクタの役割は単なる「スタイルの適用」を超えて再定義されています。

本記事では、2026年現在のモダンブラウザ環境におけるidセレクタの正しい知識と、具体的な活用シーンについて深く掘り下げていきます。

目次 [ close ]

idセレクタの基礎知識と詳細度の仕組み

CSSにおけるidセレクタは、HTML要素の id 属性を指定してスタイルを適用するための仕組みです。

記述の際は、ハッシュ記号 # を接頭辞として使用します。

idセレクタの記述方法

基本的な記述は以下の通りです。

HTML側で一意の識別子を付与し、CSS側でその識別子をターゲットにします。

HTML

<!-- HTML -->
<header id="main-header">
  <h1>サイトタイトル</h1>
</header>

CSS

/* CSS */
#main-header {
  background-color: #f0f0f0;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

このコードを実行すると、id="main-header" を持つ要素に対して指定した背景色やパディングが適用されます。

圧倒的な詳細度の高さ

idセレクタの最大の特徴であり、同時に注意点でもあるのが 詳細度の高さ です。

CSSの詳細度は「どのルールを優先して適用するか」を決定する数値ですが、idセレクタはクラスセレクタと比較して非常に強力です。

セレクタの種類	詳細度の計算例	スコアの重み
インラインスタイル	`style="..."`	1,0,0,0
idセレクタ	`#example`	0,1,0,0
クラス、属性、疑似クラス	`.example`	0,0,1,0
要素、疑似要素	`div`	0,0,0,1

上記の表からもわかる通り、idセレクタはクラスセレクタが100個並んでも打ち勝てないほどの優先順位を持っています。

この特性が、過去に「idセレクタは極力使うな」と言われてきた主な理由です。

一度idでスタイルを固定してしまうと、後からクラスで上書きすることが困難になり、メンテナンス性が著しく低下するためです。

なぜモダンCSSでもidセレクタが必要なのか

「スタイルを当てるだけならクラスセレクタで十分」という意見は今も根強くあります。

しかし、Webアクセシビリティ（A11y）やJavaScriptとの連携、ページ内ナビゲーションといった側面において、idセレクタは代替不可能な役割を担っています。

アクセシビリティの向上とWAI-ARIA

現代のWeb制作において、アクセシビリティへの配慮は欠かせません。

スクリーンリーダーなどの支援技術に対して、要素間の関係性を明示するためにidは必須です。

例えば、フォームの入力項目と説明文を紐づける aria-describedby や、モーダルウィンドウの見出しを指定する aria-labelledby などは、参照先として必ずidを必要とします。

HTML

<!-- アクセシビリティに配慮したフォーム例 -->
<label for="password-field">パスワード</label>
<input type="password" id="password-field" aria-describedby="password-hint">
<p id="password-hint">パスワードは8文字以上の英数字で入力してください。</p>

このように、CSSのためだけではなく、文書構造を正しく伝えるための識別子として、idはWeb標準の根幹を支えています。

ページ内フラグメント識別子

特定のセクションへスクロールさせる「アンカーリンク」の実装にもidは欠かせません。

URLの末尾に #section-name を付けることで、ブラウザはそのidを持つ要素を自動的に表示位置まで移動させます。

近年では、CSSの scroll-margin-top プロパティと組み合わせることで、固定ヘッダーに隠れることなくスムーズなスクロール体験を提供することが一般的になっています。

CSS

/* スクロール位置の微調整 */
section[id] {
  scroll-margin-top: 80px; /* ヘッダーの高さ分だけ余裕を持たせる */
}

2026年流：CSSレイヤーによる詳細度の制御

かつてidセレクタが嫌われた「詳細度が高すぎる問題」は、現代のCSSでは Cascade Layers（@layer）によってスマートに解決されています。

@layer を用いた詳細度の無効化

カスケードレイヤーを使用すると、セレクタ自体の詳細度に関わらず、レイヤーの定義順によって優先順位を制御できます。

これにより、たとえidセレクタであっても、より後方で定義されたレイヤー内のクラスセレクタによって上書きすることが可能になりました。

CSS

/* レイヤーの順序を定義：base よりも components が優先される */
@layer base, components;

@layer base {
  /* idセレクタだが、baseレイヤーに属する */
  #main-content {
    background-color: white;
    color: black;
  }
}

@layer components {
  /* クラスセレクタだが、より優先度の高いレイヤーに属するため、上記を上書きできる */
  .dark-mode-section {
    background-color: #333;
    color: white;
  }
}

この機能の普及により、「idを使いたいが詳細度が上がりすぎて後が怖い」という懸念は過去のものとなりました。

設計者が意図的にレイヤーを分けることで、idの持つ一意性とクラスの持つ柔軟性を共存させることができるようになっています。

idセレクタを使用すべき具体的なケース

では、具体的にどのような場面でidセレクタを選択すべきなのでしょうか。

推奨されるユースケースを整理します。

1. ページ内に一つしか存在しない大枠のレイアウト

サイト全体のヘッダー（#main-header）、フッター（#main-footer）、メインコンテンツエリア（#main-content）などは、idセレクタの典型的な活用先です。

これらはページ内に複数存在することが構造上ありえないため、idで指定することで「このスタイルは唯一無二の場所のためのものである」という意図をコード上で明確に示せます。

2. JavaScriptからの高速なDOMアクセス

DOM操作を頻繁に行うWebアプリケーションにおいて、document.getElementById() は非常に高速で信頼性の高いメソッドです。

特定の状態を持つ特定の要素を操作する場合、クラス名（getElementsByClassName）よりもidで直接指定する方が、コードの可読性とパフォーマンスの両面で有利になることがあります。

3. 特定の要素に対する一回限りの微調整（Overriding）

基本的にはコンポーネント指向（クラスベース）でスタイリングを行い、どうしても特定の1箇所だけ、他の同じコンポーネントとは異なる装飾を施したい場合に、限定的にidを使用することがあります。

これは、その修正が「再利用されることを意図していない」ことを後任のエンジニアに伝える合図にもなります。

idセレクタ使用時のアンチパターンと回避策

一方で、避けるべき使い方も依然として存在します。

以下のようなケースでは、idではなくクラスを使用することを検討してください。

コンポーネントのスタイリング

ボタンやカード形式のレイアウトなど、複数の場所で使い回すことが想定される要素にidを使ってはいけません。

idはHTMLドキュメント内で重複して使用することが禁止されている（バリデーションエラーの原因となる）ため、再利用性が完全に失われます。

HTML

<!-- NGな例：同じIDが複数回登場している -->
<div id="card">カード1</div>
<div id="card">カード2</div>

詳細度を上げるためだけの使用

特定のクラスのスタイルが上書きできないからといって、その要素にidを付与して無理やり優先順位を上げる行為は「詳細度競争」を招きます。

これを繰り返すと、さらに強いセレクタが必要になり、最終的には !important の多用といったコードの崩壊につながります。

解決策：

カスケードレイヤー（@layer）で見直しを行う。
セレクタの組み合わせ（親子関係）で詳細度を微調整する。
CSS変数を活用して、外側から値を注入できるように設計する。

まとめ

2026年現在のフロントエンド開発において、idセレクタは決して「禁止されている古い手法」ではありません。

むしろ、アクセシビリティの確保や一意の構造明示において不可欠な道具として再評価されています。

モダンな開発においては、以下のポイントを意識してidセレクタと向き合いましょう。

詳細度の管理は @layer に任せる： idセレクタの強すぎる優先度は、カスケードレイヤーで制御可能です。
セマンティクスを重視する： アンカーリンクや支援技術（ARIA）との連携が必要な箇所には積極的にidを使用します。
再利用性はクラスに任せる： コンポーネント単位の装飾には、引き続きクラスセレクタを主軸に据えるのがベストプラクティスです。

idセレクタとクラスセレクタ、それぞれの特性を正しく理解し、適切に使い分けることで、堅牢でメンテナンス性の高いCSS設計を実現していきましょう。