HTML id グローバル属性

試してみましょう

<p>通常の、退屈な段落です。眠くならないように気をつけてください。</p>

<p id="exciting">このページの中で最も期待に満ちた段落です。他に類を見ない、唯一無二の存在です。</p>

#exciting {
  background: linear-gradient(to bottom, #ffe8d4, #f69d3c);
  border: 1px solid #696969;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 1px black;
}

#exciting::before {
  content: "ℹ️";
  margin-right: 5px;
}

構文

id の値にホワイトスペース文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる class 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。

技術的には、id 属性の値にはホワイトスペース文字を除いて、どんな文字でも入れることができます。ただし、Document.querySelector() のような API を使用して JavaScript から、あるいは CSS スタイルシート内で CSS セレクターとして使用する場合、 ID 属性値は CSS 識別子として有効でなければなりません。これは、 ID 属性値が有効な CSS 識別子でない場合 （例えば、 my?id や 1234）である場合、セレクターで使用する前に、 CSS.escape() メソッドまたは 手動 を使用してエスケープする必要があります。

このため、開発者は、エスケープを必要としない、CSS の識別子として有効な値を ID 属性に選べます。

また、すべての有効な ID 属性値が JavaScript 識別子として有効であるとは限りません。例えば、1234 は有効な属性値ですが、JavaScript 識別子としては有効ではありません。これは、この値が有効な変数名ではないことを意味します。したがって、window.1234 などのコードを使用して要素にアクセスすることはできません。ただし、window["1234"] を使用するとアクセスできます。

解説

ID 属性の目的は、リンク（フラグメント識別子を使用）、スクリプト、またはスタイル設定（CSS を使用）の際に、単一の要素を識別することです。

ID 属性を持つ要素には、window オブジェクトのグローバルプロパティとしてアクセスできます。この場合、プロパティ名は ID 値、プロパティ値は対応する要素になります。例えば、次のマークアップが指定された場合

<p id="preamble"></p>

次のコードを使用することで、JavaScript でこの段落要素にアクセスすることができます。

const content = window.preamble.textContent;

仕様書

ブラウザーの互換性

関連情報

• すべてのグローバル属性
• Element.id はこの属性を反映します
• Document.getElementById メソッド
• CSS の ID セレクター