IDセレクタは「ページの中で“この1つだけ”を指さすための名前」
IDセレクタは、 「このページの中で、たった1つの特別な要素にスタイルを当てるための“固有の名前”」を扱う仕組みです。
CSS側では # から始まり、
#mainTitle {
font-size: 40px;
color: #333;
}
HTML側では id="..." で指定します。
<h1 id="mainTitle">サイトのメインタイトル</h1>
<h1>別のタイトル</h1>
このとき、 #mainTitle セレクタは「id が mainTitle の要素」をただ1つ選び、 その要素だけを特別な見た目にします。
ポイントは、
「クラスは“グループ”」 「IDは“この1点”」
という違いです。
IDの大原則：「同じIDはページ内に1つだけ」
なぜ“1つだけ”が重要なのか
IDは本来、
- ページの中で一意（ユニーク）
- 「この要素を特定するための固有の名前」
として設計されています。
例えば、 ページのメインコンテンツをこう書いたとします。
<div id="main">...</div>
この id="main" は、 「このページの“メインコンテンツ”はここですよ」という印です。
もし、同じページの中に
<div id="main">...</div>
<div id="main">...</div>
と2つあったら、
- CSSは「どっちの main にスタイルを当てるの？」
- JavaScriptは「どっちの main を操作するの？」
と混乱します。
だから、
「IDは1ページに1つだけ」 「同じIDを複数の要素に付けない」
というルールがとても重要です。
IDセレクタの基本構造と「クラスとの違い」
CSS側：IDセレクタの書き方
#mainTitle {
font-size: 40px;
color: #333;
}
ここでの #mainTitle がIDセレクタです。 # が「これはIDですよ」という印。
HTML側：id属性で「固有の名前」を付ける
<h1 id="mainTitle">サイトのメインタイトル</h1>
<h1>別のタイトル</h1>
この場合、
id="mainTitle"の<h1>→ 特別なスタイルが当たる- もう一つの
<h1>→ 当たらない
という挙動になります。
クラスとの違いを整理すると、
- クラス → 同じクラス名を複数の要素に付けてOK（グループ）
- ID → 同じIDは1ページに1つだけ（固有の名前）
という関係です。
「この1つだけ特別扱いしたい」場面でのIDセレクタ
メインタイトルだけ特別に大きくしたい
HTML：
<h1 id="mainTitle">MONOの学習ノート</h1>
<h1>別ページのタイトル</h1>
CSS：
#mainTitle {
font-size: 40px;
color: #007bff;
}
ここでは、
- ページの“顔”になるタイトルに
id="mainTitle"を付ける - そのIDに対して特別なスタイルを当てる
という使い方をしています。
他の <h1> は、 サイト全体のルール（例：h1 { font-size: 32px; }）に従うだけです。
IDセレクタは「このページの中で、ここだけは特別な見た目にしたい」というときのピンポイント指定に向いています。
JavaScriptとIDセレクタ：要素を“1発で”取るための名前になる
document.querySelector と getElementById
JavaScriptで要素を操作するとき、 IDはよく使われます。
<h1 id="mainTitle">MONOの学習ノート</h1>
<button id="changeTitle">タイトルを変える</button>
JavaScript：
const title = document.querySelector("#mainTitle");
// または
const title2 = document.getElementById("mainTitle");
const button = document.querySelector("#changeTitle");
button.addEventListener("click", () => {
title.textContent = "タイトルが変更されました";
});
ここでの流れは、
#mainTitleというIDセレクタで、タイトル要素を1つだけ取得する- ボタンがクリックされたら、そのタイトルのテキストを書き換える
というものです。
CSSとJavaScriptの両方で、
- CSS →
#mainTitle { ... } - JS →
document.querySelector("#mainTitle")
と同じIDセレクタを使っているのが分かると思います。
IDは「CSSとJavaScriptが共有する“この要素を指すための名前”」になっている。 だからこそ、1ページに1つだけというルールが重要になる。
IDセレクタの“強さ”と「乱用しない方がいい理由」
セレクタの優先度の中で、IDはかなり強い
CSSには「どのルールが勝つか」を決める“優先度（specificity）”があります。
ざっくりいうと、
- 要素セレクタ（
p）より - クラスセレクタ（
.highlight）が強くて - IDセレクタ（
#mainTitle）はさらに強い
という順番です。
例えば、
h1 {
color: black;
}
.title {
color: green;
}
#mainTitle {
color: red;
}
HTML：
<h1 id="mainTitle" class="title">タイトル</h1>
この場合、
h1→ 黒.title→ 緑#mainTitle→ 赤
という3つの候補がありますが、 最終的には 赤 になります。
理由は、 IDセレクタが一番強いからです。
なぜ「IDを乱用しない方がいい」のか
IDが強いということは、
- 一度IDでスタイルを当てると、他のルールで上書きしにくくなる
- あちこちにIDセレクタを書きまくると、スタイルの管理が複雑になる
ということでもあります。
例えば、 「とりあえず全部IDでスタイルを当てる」みたいな書き方をすると、
- 後からデザインを変えたいときに、どこが効いているのか分からない
- クラスで調整しようとしても、IDが勝ってしまう
という“CSSが言うことを聞いてくれない状態”になりがちです。
IDセレクタは「ここだけ特別」という場面に絞って使う。 基本のスタイルはクラスで作る。 このバランス感覚が、CSS設計ではとても大事です。
IDセレクタを使う場面の“おすすめパターン”
ページ内リンク（アンカー）と組み合わせる
HTML：
<h2 id="section1">セクション1</h2>
<p>セクション1の内容...</p>
<h2 id="section2">セクション2</h2>
<p>セクション2の内容...</p>
<a href="#section2">セクション2へジャンプ</a>
CSS：
#section2 {
color: #007bff;
}
ここでは、
id="section2"→ ページ内リンクのジャンプ先#section2→ その見た目を少し変える
という使い方をしています。
IDは、
- ページ内リンクのターゲット
- CSSでのピンポイントスタイル
- JavaScriptでのピンポイント操作
の3つを同時に担えるので、 「セクションの見出し」などに付けるのは自然なパターンです。
初心者として「IDセレクタ」で絶対に掴んでほしいこと
IDセレクタは、 「ページの中でたった1つの要素に対して、“この名前のものだけ”というピンポイント指定でスタイルや操作を当てるための仕組み」です。
- CSSでは
#id名 { ... }と書く - HTMLでは
id="id名"を付ける - 同じIDは1ページに1つだけが原則
- クラスよりも強いので、乱用するとスタイル管理が難しくなる
- 「ここだけ特別扱いしたい」「この要素をJSで直接触りたい」という場面に絞って使う
あなたがIDを書くときに、
「このIDは“このページの中で、この1つだけを指すための名前”で、 CSSとJavaScriptがその名前を共有して、この要素を特別扱いするんだよな」
とイメージできていたら、 もうIDセレクタを“ただの記号”ではなく、 「ページの中の特別な要素を指し示すための、強くて慎重に使うべきラベル」として扱えている状態です。