ID
初級読み方：アイディー｜英語：Id
ページ内で1つだけの名前をつける属性で、CSSでは #id名 で指定するよ。いつ使う？ ページ内リンクのアンカー（#sectionに飛ぶ）や、JavaScriptで特定の要素を取得するときに使うよ。CSSのスタイリングにはクラスを使う方がおすすめ。間違いやすいポイント: 同じIDを複数の要素に使うのはNG（HTMLの仕様違反）。また、IDはクラスより詳細度が高いので、後からスタイルを上書きしにくくなるよ。
やさしい説明
ID（アイディー）とは、HTML要素に固有の名前をつける属性です。1ページに同じIDは1つだけしか使えません。
学校の「出席番号」に例えるとわかりやすいです。出席番号は1人に1つだけ。クラスが「グループ名」なら、IDは「個人名」です。
CSSでは #ID名 で指定します。JavaScriptの getElementById でも使います。ページ内リンク（#section1 へジャンプ）の目印にもなります。
具体例・使い方
<!-- HTML -->
<header id="top">ヘッダー</header>
<a href="#top">ページの先頭に戻る</a>
/* CSS */
#top { background: #333; color: white; }
// JavaScript
document.getElementById("top")いつ使う？
ページ内リンクの目印、JavaScriptで特定の要素を操作するとき、1ページに1つしかない要素（ヘッダー等）を指定するときに使います。
間違いやすいポイント
❌ 同じIDを複数の要素に使う
IDは1ページに1つだけのルールです。複数に使いたい場合はclassを使いましょう。同じIDが複数あるとJavaScriptが正しく動きません。
❌ スタイル指定にIDを多用する
IDセレクタは詳細度（優先度）が高すぎて、後から上書きしにくくなります。スタイルにはclassを使うのが基本です。
よくある疑問
Q: IDとクラスはどちらを使うべき？
A: 基本的にはクラスを使いましょう。IDはJavaScriptで要素を取得するときや、ページ内リンクのアンカーに使います。
Q: IDを2つの要素に使うとどうなる？
A: HTMLの仕様違反です。JavaScriptのgetElementByIdが最初の1つしか取得できず、バグの原因になります。
Q: IDの命名ルールは？
A: 半角英数字とハイフン(-)を使います。数字で始めるのはNG。スペースは使えません。例: id="main-content"
関連用語
📖 関連レッスン
レッスンを見る →