タイトル: IDセレクタ
SEOタイトル: CSS ID セレクタ（#id）の使い方と Specificity・class との使い分け
| この記事の要点 |
ID セレクタの基本
CSS で要素を選択する 3 大セレクタ（要素・class・ID）のうち、ID セレクタは #（シャープ）から始まります:
ようこそ
本文...
/* CSS */
#page-title {
color: #333;
font-size: 2em;
}
#main-content {
max-width: 800px;
margin: 0 auto;
}
#submit-btn {
background: #1a73e8;
color: white;
padding: 10px 20px;
}class セレクタとの違い
| 項目 | ID セレクタ #id | class セレクタ .class |
|---|---|---|
| 同 1 ページに何個 | 1 つだけ | 何個でも |
| 1 要素に何個付くか | 1 つだけ | 複数可（class="a b c"） |
| Specificity（詳細度） | 100 | 10 |
| 主な用途 | JS フック / アンカー / label for | 見た目スタイル / 再利用 |
| JS API | getElementById() 高速 | getElementsByClassName() / querySelectorAll('.x') |
Specificity（詳細度）と優先順位
CSS は同じ要素に複数のルールが当たるとき、Specificity が高い方が勝つ仕様です。ID セレクタは class より 10 倍強い扱いです:
/* Specificity 計算式: (a, b, c, d)
* a = インラインスタイル (style="...")
* b = ID セレクタの数
* c = class / 属性 / 擬似クラスの数
* d = 要素 / 擬似要素の数
*/
* { } /* 0,0,0,0 */
p { } /* 0,0,0,1 */
p.warning { } /* 0,0,1,1 */
#page-title { } /* 0,1,0,0 */
#page-title.large { } /* 0,1,1,0 */
style="color: red" /* 1,0,0,0 */
!important /* 全てを上書き */
Hello
JavaScript からのアクセス
ID は高速・確実に DOM を取得できる:
// 最も高速・直接的
const title = document.getElementById('page-title');
// querySelector で # 記法
const title2 = document.querySelector('#page-title');
// HTML5 以降: window. でグローバル参照可（非推奨）
console.log(window.pageTitle); //
// id にハイフンが入っていても OK（変数名と違ってよい）
const el = document.getElementById('my-section');
注意: HTML5 では id は 任意の文字列でよく、CSS で使うときだけハイフン名がエスケープが要る場合があります。
ID 命名のルール
| ルール | HTML5 | HTML4 / XHTML |
|---|---|---|
| 空文字 NG | ○ 不可 | ○ 不可 |
| 数字始まり | OK | NG（英字必須） |
| 日本語 | OK（実用は微妙） | NG |
| ハイフン・アンダースコア | OK | OK |
| スペース | NG（区切り文字扱い） | NG |
| 大文字小文字 | 区別される | 区別される |
命名は kebab-case（main-content）または camelCase（mainContent）が一般的。チーム内で統一しましょう。
アンカーリンク（ページ内ジャンプ）
はじめに
...
インストール
...
使い方
...
トップへ戻る/* 固定ヘッダがある場合、id へ飛んだ位置が隠れないように */
html {
scroll-behavior: smooth;
}
h2 {
scroll-margin-top: 80px; /* 固定ヘッダの高さ分 */
}label の for 属性
フォームの label と input を紐付けるのにも ID を使います:
ARIA との関係
WAI-ARIA 属性は ID を参照することが多い:
8 文字以上、英数字混在
確認
...
同 1 ページに同じ id を複数置くと
- HTML 仕様違反（バリデータでエラー）
getElementById()は最初の 1 つしか返さない- アンカー
#idも最初の 1 つにスクロール - CSS は全部に当たる（動くが規約違反）
- スクリーンリーダーが混乱する
id と class、どちらを使うべきか
| 用途 | 推奨 |
|---|---|
| 見た目スタイル（再利用したい） | class |
| ボタンの色を統一 | class |
| ページ内ジャンプ先 | id |
| label と input の紐付け | id |
| JavaScript で特定の 1 要素を操作 | id or data-* 属性 |
| 同じスタイルを複数要素に | class |
| ARIA で参照したい | id 必須 |
近年の SPA / コンポーネント設計では、見た目は class、JS フックは data-testid や data-action、a タグや ARIA 用に id、と役割分離する設計が一般的です。
CSS Modules / styled-components 時代の ID
React / Vue で CSS Modules や styled-components を使うと、class 名が自動ハッシュ化されます。ID はハッシュ化されないので、ページ内アンカーや label/for で活用できます:
// CSS Modules
import styles from './Form.module.css';
function Form() {
return (
<>
);
}
// →
// id は素のまま、class はハッシュ化FAQ
Q: ID セレクタは使わない方がいい？
A: 「見た目用途で使わない」のが現代のベストプラクティス。Specificity が高すぎて上書きが大変です。JS フック / アンカー / label 専用と割り切ると綺麗になります。
Q: id を数字始まりにできる？
A: HTML5 では可能。ただし CSS で #1title と書くとエラーになるので、#\31 title とエスケープが要ります。実用上は英字始まりが無難。
Q: CSS で div#title と書く意味は？
A: id は元々一意なので #title だけで十分。要素名を付けると Specificity が 0,1,0,1 に上がり、後の上書きが余計困難になります。