HTML要素のid属性

id属性は、HTML要素に一意の識別子を付けるために使用されます。この属性を使用することで、CSSやJavaScriptで特定の要素を正確に操作できます。本章では、HTMLの要素における id属性の使用法を詳しく解説します。

概要

id属性は、HTML文書内で一意である必要があります。同じ文書内で重複する id属性の値を持つ要素が存在すると、予期しない動作を引き起こす可能性があります。HTMLの要素に id属性を追加することで、以下の目的で使用されます。

CSSで特定のスタイルを適用する。
JavaScriptでHTML文書全体を対象とした操作を行う。
アンカーリンクとして使用する。

属性の構文

id属性の値には、一意の識別子を指定します。

例:

<html id="main-document">

基本的なセレクタ

CSSやJavaScriptで id属性を使用する際には、次のようなセレクタを用います。

CSSでの使用例

id属性の値に基づいてスタイルを適用する場合、CSSではシャープ記号（#）を使用します。

<html id="main-document">
  <head>
    <style>
      #main-document {
        background-color: #f0f0f0;
        color: #333;
      }
    </style>
  </head>
  <body>
    <h1>メイン文書</h1>
  </body>
</html>

この例では、id="main-document" を持つ HTMLの要素に対して背景色と文字色が適用されています。

JavaScriptでの使用例

JavaScriptでは、document.querySelector メソッドを使用して特定の要素を取得します。

<html id="main-document">
  <head>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const htmlElement = document.querySelector('#main-document');
        htmlElement.style.backgroundColor = '#e0e0e0';
      });
    </script>
  </head>
  <body>
    <h1>メイン文書</h1>
  </body>
</html>

この例では、id="main-document" を持つ HTMLの要素の背景色がJavaScriptによって変更されています。

かつては、DOM要素を取得する際にdocument.getElementByIdがよく使われていましたが、現在ではCSSセレクタを用いてより柔軟に要素を取得できるdocument.querySelectorとdocument.querySelectorAllが主流となっています。

document.getElementByIdは、指定したIDを持つ要素を取得します。一方、document.querySelectorはCSSセレクタで指定した最初の要素を、document.querySelectorAllはすべてのマッチする要素をNodeリストとして返します。

子孫セレクタとの組み合わせ

id属性と子孫セレクタを組み合わせることで、特定の要素にスタイルを適用できます。

<html id="main-document">
  <head>
    <style>
      #main-document body {
        font-family: Arial, sans-serif;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>メイン文書の内容</h1>
    <p>この文書は、特定のidを持つHTML要素にスタイルを適用しています。</p>
  </body>
</html>

この例では、id="main-document" を持つ HTMLの要素内の $1 要素に対してスタイルが適用されています。

使用例

以下に、HTMLの要素に id属性を追加して使用する具体例を示します。

アンカーリンクとしての使用例

id属性を使用して特定の要素にリンクを設定することができます。

<html id="top">
  <head>
    <style>
      #top {
        padding: 20px;
        background-color: #f9f9f9;
      }
    </style>
  </head>
  <body>
    <a href="#top">ページの先頭に戻る</a>
    <h1>アンカーリンクの例</h1>
    <p>スクロールしても、このリンクをクリックするとページの先頭に戻ります。</p>
  </body>
</html>

この例では、id="top" を持つ HTMLの要素をアンカーとして使用しています。

注意事項

id属性は文書内で一意である必要があります。同じ id を複数の要素に使用すると、CSSやJavaScriptでの操作が意図した通りに動作しない可能性があります。
id属性の値は英数字、ハイフン（-）、アンダースコア（_）などを使用できます。ただし、先頭に数字を付けることは避けてください（例: id="1main" は無効です）。
id属性はクラスよりも特異性が高い（CSSにおける優先順位が高い）ため、スタイルの競合に注意が必要です。

まとめ

HTMLの要素に id属性を設定することで、文書全体を特定の操作やスタイルの対象とすることが可能です。id属性を活用することで、より正確な制御が可能になりますが、文書内で一意であることを常に確認してください。

HTML Living Standard/id属性