ID
初級読み方：アイディー｜英語：Id
ページ内で1つだけの名前をつける属性で、CSSでは #id名 で指定するよ。
やさしい説明
ID（アイディー）とは、HTML要素に固有の名前をつける属性です。1ページに同じIDは1つだけしか使えません。
学校の「出席番号」に例えるとわかりやすいです。出席番号は1人に1つだけ。classが「グループ名（役職）」なら、idは「個人番号」です。
CSSでは #ID名 で指定します。JavaScriptの getElementById でも使います。ページ内リンク（#section1 へジャンプ）の目印にもなります。
具体例・使い方
<!-- HTML: id属性を付ける -->
<header id="top">ヘッダー</header>
<main id="main-content">メインコンテンツ</main>
<footer id="footer">フッター</footer>
<!-- ページ内リンク: #id名でジャンプ -->
<a href="#top">ページの先頭に戻る</a>
<a href="#main-content">本文に移動</a>/* CSS: #でidを指定 */
#top {
background: #333;
color: white;
padding: 16px;
}// JavaScript: idで要素を取得
const header = document.getElementById("top");
header.style.background = "navy";idの主な使いどころ
- ページ内リンク —
<a href="#section2">でページ内の特定箇所にジャンプ。目次リンクによく使われる - JavaScriptでの要素取得 —
document.getElementById("id名")で確実に1つの要素を取得できる - フォームのlabelとinputの紐付け —
<label for="email">と<input id="email">を対応させる - アクセシビリティ — スクリーンリーダーが要素を識別するために使う
フォームでのid活用例
<!-- labelのfor属性とinputのidを一致させる -->
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username" />
<!-- labelをクリックするとinputにフォーカスが移る -->
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" />label と input を紐付けると、ラベルをクリックしたときに入力欄にフォーカスが移ります。スマホでの操作性とアクセシビリティが向上します。
いつ使う？
ページ内リンクの目印、JavaScriptで特定の要素を1つ操作するとき、フォームのlabel-input紐付けに使います。CSSスタイルの適用には原則classを使い、idは「1ページに確実に1つだけ」の要素に絞るのがベストプラクティスです。
間違いやすいポイント
❌ 同じIDを複数の要素に使う
IDは1ページに1つだけのルールです。複数に使いたい場合はclassを使いましょう。同じIDが複数あるとJavaScriptが最初の要素しか取得できなくなります。
❌ スタイル指定にIDを多用する
IDセレクタ（#名前）は詳細度（優先度）が高すぎて、後からclassで上書きしにくくなります。スタイルにはclassを使うのが基本です。
よくある疑問
Q: IDとクラスはどちらを使うべき？
A: 基本的にはクラスを使いましょう。IDはJavaScriptで要素を取得するときや、ページ内リンクのアンカーに使います。
Q: IDを2つの要素に使うとどうなる？
A: HTMLの仕様違反です。JavaScriptのgetElementByIdが最初の1つしか取得できず、バグの原因になります。
Q: IDの命名ルールは？
A: 半角英数字とハイフン(-)を使います。数字で始めるのはNG。スペースは使えません。例: id="main-content"
関連用語
📖 関連レッスン
レッスンを見る →