Skip to content

15. id（唯一性とページ内リンク）

idはページ内で原則ユニーク。#でのジャンプやlabelとinputの紐付けなど、1点ものに効く属性。

•beginnerhtmlidanchorfragmentformaccessibility
目次
まず結論
最小の書き方（コピペで動く最小コード）
重要ポイント（ここで迷いがち）
例で理解（よく使うパターン 4つ）
1) ページ内リンク（目次 → 見出しへ）2) 「トップへ戻る」リンク3) フォームでlabelとinputを紐付け（超重要）4) JSで狙い撃ち（“1個だけ”を確実に）
使い分け（classとの違い：迷ったらこれ）
実務のコツ（SEO/安全/アクセシビリティ）
NG・禁止例（事故る書き方）
NG1）同じidを複数回使う（最悪）NG2）href="faq" なのに id="faq" が存在しないNG3）空白や日本語をidに混ぜる（避ける）NG4）CSSでidセレクタを多用して上書き地獄
見た目を整える（HTML+CSSセット：4例）
例1）目次（ページ内リンク）を“カード風”に例2）固定ヘッダーがあるときの“隠れ防止”例3）「トップへ戻る」を右下に固定（idで飛ぶ）例4）label連携の入力欄を“フォームっぽく”
理解チェック（3問・答え付き）
ミニ演習（すぐ試せる小課題 2つ）

15. id（唯一性とページ内リンク）

まず結論

idを使うと「ページ内リンク（#）で目的地に飛ぶ」や「labelとinputを確実に紐付ける」ができるようになります。

最小の書き方（コピペで動く最小コード）

HTMLCode
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>id Minimum</title>
</head>
<body>
  <nav aria-label="ページ内メニュー">
    <ul>
      <li><a href="#sec-faq">FAQへ</a></li>
    </ul>
  </nav>

  <main>
    <h1>ページタイトル</h1>

    <section id="sec-faq">
      <h2>FAQ</h2>
      <p>よくある質問をここに書きます。</p>
    </section>
  </main>
</body>
</html>
Preview を表示

重要ポイント（ここで迷いがち）

  • idは原則「そのページ内で唯一」
    • 同じidを2回使うと、リンク・JS・CSSが“どれに当たるか不安定”になって事故る。
  • href="#xxx" は id="xxx" を探して飛ぶ
    • つまり # の行き先は idが必要。
  • id名のルール（安全な最小セット）
    • 英数字とハイフンを中心に（例：sec-faq）
    • 空白はNG
    • 同じidを重複させない
  • CSS/JSでも指定できるが、乱用しない
    • #header { ... } は強すぎて上書きしづらいことがある。見た目はclassが無難。

例で理解（よく使うパターン 4つ）

1) ページ内リンク（目次 → 見出しへ）

HTMLCode
<nav aria-label="目次">
  <ul>
    <li><a href="#intro">概要</a></li>
    <li><a href="#steps">手順</a></li>
    <li><a href="#faq">FAQ</a></li>
  </ul>
</nav>

<section id="intro"><h2>概要</h2></section>
<section id="steps"><h2>手順</h2></section>
<section id="faq"><h2>FAQ</h2></section>
Preview を表示

2) 「トップへ戻る」リンク

HTMLCode
<h1 id="top">記事タイトル</h1>

<p><a href="#top">トップへ戻る</a></p>
Preview を表示

3) フォームでlabelとinputを紐付け（超重要）

HTMLCode
<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" autocomplete="email">
Preview を表示

for="email" が id="email" を指す

  • ラベルをクリックすると入力欄にフォーカスできて便利＆アクセシブル

4) JSで狙い撃ち（“1個だけ”を確実に）

HTMLCode
<p>残り<span id="count">3</span>席</p>
Preview を表示

ただし複数ある可能性があるなら、classやdata-*の方が安全（#14/#27）。

使い分け（classとの違い：迷ったらこれ）

  • id：唯一 / ページ内リンク / label連携 / 1点ものに向く
  • class：複数OK / デザイン・部品化 / 一括適用に向く

目安

  • 「同じものが複数出る」→ class
  • 「この1箇所にだけ必要」→ id（ただし乱用しない）

実務のコツ（SEO/安全/アクセシビリティ）

  • 見出しにidを付けると共有しやすい
    • #faq みたいにURLで直接その場所を指せる（ドキュメントで便利）。
  • ページ内リンクは“飛び先の見出し”に付けると分かりやすい
    • <section id="faq"><h2>FAQ</h2> ... など、意味のまとまりと一致させる。
  • 固定ヘッダーがあると飛び先が隠れることがある
    • CSSで scroll-margin-top を付けると事故りにくい（下のCSS例でやる）。

NG・禁止例（事故る書き方）

NG1）同じidを複数回使う（最悪）

HTMLCode
<h2 id="faq">FAQ</h2>
<p id="faq">質問一覧</p>
Preview を表示

✅ 正：idは必ずユニークに

HTMLCode
<h2 id="faq">FAQ</h2>
<p id="faq-list">質問一覧</p>
Preview を表示

NG2）href="#faq" なのに id="faq" が存在しない

HTMLCode
<a href="#faq">FAQへ</a>
<!-- idがない -->
Preview を表示

✅ 正：飛び先を用意する

HTMLCode
<section id="faq">...</section>
Preview を表示

NG3）空白や日本語をidに混ぜる（避ける）

HTMLCode
<section id="よくある 質問">...</section>
Preview を表示

✅ 正：英数字+ハイフンにする

HTMLCode
<section id="faq">...</section>
Preview を表示

NG4）CSSでidセレクタを多用して上書き地獄

CSSCode
#btn{ /* 強すぎて再利用しづらい */ }

✅ 正：見た目はclass中心に

CSSCode
.btn{ ... }

見た目を整える（HTML+CSSセット：4例）

色は使わず、余白・線・影・スクロールの快適さで整えます。

例1）目次（ページ内リンク）を“カード風”に

例1）目次（ページ内リンク）を“カード風”に

HTMLCode
<nav class="toc" aria-label="目次">
<ul class="toc__list">
  <li><a class="toc__link" href="#intro">概要</a></li>
  <li><a class="toc__link" href="#steps">手順</a></li>
  <li><a class="toc__link" href="#faq">FAQ</a></li>
</ul>
</nav>

<section id="intro"><h2>概要</h2></section>
<section id="steps"><h2>手順</h2></section>
<section id="faq"><h2>FAQ</h2></section>
CSSCode
.toc__list{
list-style: none;
padding: 0;
margin: 0 0 1.2rem;
display: grid;
gap: .6rem;
}
.toc__link{
display: block;
padding: .8rem 1rem;
border: 1px solid rgba(0,0,0,.18);
border-radius: 16px;
text-decoration: none;
box-shadow: 0 10px 22px rgba(0,0,0,.08);
transition: transform .15s ease;
}
.toc__link:hover{ transform: translateY(-1px); }
Preview を表示

例2）固定ヘッダーがあるときの“隠れ防止”

例2）固定ヘッダーがあるときの“隠れ防止”

HTMLCode
<header class="site-header" id="top">
<h1>ページタイトル</h1>
</header>

<nav aria-label="目次">
<a href="#faq">FAQへ</a>
</nav>

<section id="faq">
<h2>FAQ</h2>
<p>ここが飛び先。</p>
</section>
CSSCode
.site-header{
position: sticky;
top: 0;
border-bottom: 1px solid rgba(0,0,0,.18);
background: rgba(255,255,255,.9);
backdrop-filter: blur(6px);
}
#faq{ scroll-margin-top: 84px; } /* ヘッダー分だけ余白 */
Preview を表示

例3）「トップへ戻る」を右下に固定（idで飛ぶ）

例3）「トップへ戻る」を右下に固定（idで飛ぶ）

HTMLCode
<h1 id="top">記事タイトル</h1>

<p>長い本文がある想定です。</p>
<p>下の↑を押すとトップへ戻ります。</p>

<a class="backtop" href="#top">↑</a>
CSSCode
.backtop{
position: fixed;
right: 16px;
bottom: 16px;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid currentColor;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 10px 22px rgba(0,0,0,.12);
opacity: .9;
}
.backtop:hover{ transform: translateY(-1px); }
Preview を表示

例4）label連携の入力欄を“フォームっぽく”

例4）label連携の入力欄を“フォームっぽく”

HTMLCode
<div class="field">
<label class="field__label" for="email">メールアドレス</label>
<input class="field__input" id="email" name="email" type="email" autocomplete="email">
</div>
CSSCode
.field{ display: grid; gap: .4rem; max-width: 420px; }
.field__label{ font-size: .95rem; }
.field__input{
padding: .75rem .9rem;
border: 1px solid rgba(0,0,0,.25);
border-radius: 14px;
box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.field__input:focus{
outline: 2px solid currentColor;
outline-offset: 2px;
}
Preview を表示

理解チェック（3問・答え付き）

Q. idは同じページで複数回使っていい？

A. ダメ（基本は唯一）。

Q. href="#faq" は何を探して飛ぶ？

A. id="faq" を持つ要素。

Q. フォームでラベルをクリックして入力欄にフォーカスさせるには？

A. label for="x" と input id="x" を一致させる。

ミニ演習（すぐ試せる小課題 2つ）

  1. 目次を作って「概要 / 手順 / FAQ」へ飛べるようにしてください。
    href="#intro" → <section id="intro"> のように3つ作る。
  2. メールアドレス入力欄を作り、labelの for と inputの id を一致させて、
    ラベルをクリックするとカーソルが入るのを確認してください。