【HTML Living Standard】id属性の使い方
id属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
idプロパティは、HTML要素に一意な識別子を保持するプロパティです。この識別子を通じて、ウェブページ内の特定の要素を正確に特定できます。HTML文書全体で、同じidの値を複数の要素に割り当てることはできません。これにより、各HTML要素が唯一無二の存在として扱われます。
このidプロパティは、主に以下の用途で活用されます。一つ目は、CSSを用いて特定の要素にスタイルを適用する際に使われます。スタイルシートでは#記号に続けてidの値を指定することで、そのidを持つ要素のみにスタイルを適用できます。二つ目は、JavaScriptから特定の要素を操作する場合です。document.getElementById()メソッドを使用することで、指定したidを持つ要素を効率的に取得し、その内容を動的に変更したり、ユーザー操作に応じた動きを設定したりできます。三つ目は、ページ内リンクのターゲットとして機能することです。<a>要素のhref属性に#とidの値を記述することで、クリック時に同じページ内の特定の場所へスムーズに移動させることができます。また、<label>要素のfor属性とidプロパティを組み合わせることで、フォームの入力要素とラベルを関連付け、アクセシビリティを高めることも可能です。
idプロパティは、ウェブページの構造化とインタラクティブな機能の実装において非常に重要な役割を果たします。適切に利用することで、ページのメンテナンス性、ユーザビリティ、そしてアクセシビリティが大幅に向上します。命名規則としては、英数字とハイフン、アンダースコアが推奨され、スペースは含めないのが一般的です。
構文(syntax)
1<div id="uniqueIdentifier"></div>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML id属性と命名規則の活用
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML id属性と命名規則のサンプル</title> 7 <style> 8 /* 9 * idセレクタ (#id名) を使用して、特定のHTML要素にスタイルを適用します。 10 * idはドキュメント内で一意であるため、この方法でピンポイントにスタイルを適用できます。 11 */ 12 #main-header { 13 color: navy; 14 background-color: #e0f2f7; 15 padding: 15px; 16 border-bottom: 2px solid #336699; 17 text-align: center; 18 } 19 20 #about-section { 21 margin: 20px; 22 padding: 20px; 23 border: 1px solid #ccc; 24 background-color: #f9f9f9; 25 border-radius: 5px; 26 } 27 28 #contact-info { 29 margin: 20px; 30 padding: 20px; 31 background-color: #f0fff4; 32 border: 1px solid #a8e6cf; 33 border-radius: 5px; 34 } 35 </style> 36</head> 37<body> 38 <!-- 39 HTMLのid属性に関する命名規則: 40 - ドキュメント内で一意である必要があります（同じid名を複数使用してはいけません）。 41 - 英数字 (a-z, A-Z, 0-9)、ハイフン (-) 、アンダースコア (_) が使用できます。 42 - 数字から始めることはできません（例: id="1header" は無効です）。 43 - 大文字と小文字は区別されますが、一般的には小文字とハイフンで区切る「kebab-case」（例: "main-header"）が推奨されます。 44 - 要素の内容や役割を具体的に表す、意味のある名前を付けましょう。 45 --> 46 47 <!-- ユニークなid "main-header" を持つヘッダー要素 --> 48 <h1 id="main-header">HTML id属性の基本と命名規則</h1> 49 50 <!-- ページ内リンク用のナビゲーション --> 51 <nav> 52 <ul> 53 <li><a href="#about-section">このセクションについて</a></li> 54 <li><a href="#contact-info">連絡先情報へ</a></li> 55 </ul> 56 </nav> 57 58 <!-- ユニークなid "about-section" を持つセクション要素 --> 59 <section id="about-section"> 60 <h2>このセクションについて</h2> 61 <p> 62 ここでは、HTMLの<code>id</code>属性の使い方と、 63 なぜ<code>id</code>がドキュメント内で一意である必要があるのかを説明します。 64 <code>id</code>は、CSSでの特定の要素のスタイリングや、 65 JavaScriptでの要素操作、そしてページ内リンク（アンカー）のターゲットとして活用されます。 66 </p> 67 <p> 68 適切な<code>id</code>の命名は、コードの可読性とメンテナンス性を向上させます。 69 </p> 70 </section> 71 72 <!-- ユニークなid "contact-info" を持つ別のセクション要素 --> 73 <section id="contact-info"> 74 <h2>連絡先情報</h2> 75 <p> 76 ご質問やご意見がございましたら、以下の情報までご連絡ください。 77 このセクションには、ページ内リンクで直接ジャンプできます。 78 </p> 79 <p>Email: example@example.com</p> 80 <p>電話: 000-1234-5678</p> 81 </section> 82 83</body> 84</html>
HTMLのid属性は、ウェブページ内の特定のHTML要素に一意な識別子（名前）を割り当てるためのグローバル属性です。これは、各要素を特定するための「名札」のようなものと考えると分かりやすいでしょう。id属性自体に引数や戻り値はありません。
この属性の最も重要な点は、一つのHTMLドキュメント内で同じid名を複数回使用してはならないという厳格なルールです。各idはドキュメント内で唯一無二である必要があります。
id属性は主に以下の目的で活用されます。
まず、CSSで特定の要素にピンポイントでスタイルを適用する際に使用します。サンプルコードでは#main-headerのように記述することで、そのidを持つ要素のみにデザインを適用しています。次に、JavaScriptで特定の要素を取得して動的に操作する際の識別子としても利用されます。また、<a>タグ（アンカータグ）と組み合わせることで、同じページ内の特定の場所へ直接移動する「ページ内リンク」のターゲットとしても機能します。
idの命名にはいくつかの規則があります。英数字（a-z, A-Z, 0-9）、ハイフン（-）、アンダースコア（_）が使用できますが、数字で始めることはできません。大文字と小文字は区別されますが、一般的には「kebab-case」（例: main-header）と呼ばれる、小文字とハイフンで区切る命名方法が推奨されます。コードの可読性を高めるためにも、要素の内容や役割が分かりやすい、具体的な名前を付けることが大切です。
この属性を適切に利用することで、ウェブページの構造化、スタイリング、インタラクティブな機能実装が効率的に行えます。
HTMLのid属性の最も重要な注意点は、HTMLドキュメント内で必ず一意である必要があることです。同じid名を複数使用すると、CSSやJavaScriptでの要素特定が正しく行われず、予期せぬ動作や不具合の原因となりますので、特に注意してください。命名規則としては、英数字、ハイフン（-）、アンダースコア（_）が利用できますが、数字から始めることはできません。また、大文字と小文字は区別されるため、一貫性を保つためにも小文字とハイフンを組み合わせる「ケバブケース」（例: main-header）での命名が一般的に推奨されます。idは、特定の要素にピンポイントでスタイルを適用したり、JavaScriptで操作したり、ページ内リンクのターゲットとして利用されるため、その要素の役割を明確に表す意味のある名前を付けましょう。これにより、コードの可読性とメンテナンス性が向上します。
HTMLのid属性で要素を識別・操作する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML id属性のサンプル</title> 7 <style> 8 /* 9 * id属性は、特定のHTML要素に一意の名前を付けるために使用されます。 10 * CSSでは「#」記号を使ってidセレクタを指定します。 11 * 各idはHTMLドキュメント内で必ず一意でなければなりません。 12 * 複数の要素に同じidを割り当てることはできません。 13 */ 14 #header { 15 background-color: #f0f0f0; 16 padding: 15px; 17 border-bottom: 1px solid #ccc; 18 text-align: center; 19 } 20 21 #mainContent { 22 padding: 20px; 23 margin: 0 10%; 24 background-color: #ffffff; 25 border: 1px solid #eee; 26 margin-top: 10px; 27 } 28 29 #firstParagraph { 30 color: #0056b3; 31 font-size: 1.1em; 32 margin-bottom: 10px; 33 } 34 35 #secondParagraph { 36 border-left: 3px solid #28a745; 37 padding-left: 10px; 38 margin-top: 15px; 39 } 40 41 #footer { 42 background-color: #333; 43 color: white; 44 padding: 10px; 45 text-align: center; 46 margin-top: 20px; 47 } 48 </style> 49</head> 50<body> 51 52 <!-- 各HTML要素には、それぞれ異なる一意なIDを設定します。 --> 53 <!-- 同じidを複数の要素に設定すると、動作が不安定になったり、JavaScriptやCSSが正しく機能しない原因となります。 --> 54 <header id="header"> 55 <h1>ようこそ！ id属性の例</h1> 56 </header> 57 58 <main id="mainContent"> 59 <h2>メインコンテンツセクション</h2> 60 <p id="firstParagraph"> 61 これは最初の段落です。この段落には「firstParagraph」というIDが設定されています。 62 CSSやJavaScriptからこのIDを使って、特定の要素にアクセスしたりスタイルを適用したりできます。 63 </p> 64 <p id="secondParagraph"> 65 これは二番目の段落です。この段落には「secondParagraph」というIDが設定されています。 66 HTMLドキュメント全体で、それぞれのIDは一度しか使用できません。 67 </p> 68 <section id="aboutSection"> 69 <h3>このセクションについて</h3> 70 <p>このセクションには「aboutSection」というIDが付与されています。</p> 71 </section> 72 </main> 73 74 <footer id="footer"> 75 <p>© 2023 id属性サンプル</p> 76 </footer> 77 78 <!-- 79 JavaScriptでIDを使用して要素にアクセスする例: 80 <script> 81 const headerElement = document.getElementById('header'); 82 if (headerElement) { 83 console.log('ヘッダー要素:', headerElement.tagName); 84 } 85 86 const firstParagraphElement = document.getElementById('firstParagraph'); 87 if (firstParagraphElement) { 88 firstParagraphElement.style.fontWeight = 'bold'; // JavaScriptで太字に設定 89 } 90 </script> 91 --> 92 93</body> 94</html>
HTMLのid属性は、Webページ内の個々のHTML要素に「一意な名前」を付けるためのグローバル属性です。この属性は、すべてのHTML要素に指定でき、その値はHTMLドキュメント内でただ一つである必要があります。つまり、同じid値を複数の要素に割り当てることはできません。もし複数の要素に同じidを設定してしまうと、CSSが意図通りに適用されなかったり、JavaScriptが特定の要素を正しく識別できなかったりする原因となり、Webページの動作が不安定になる可能性があります。
この属性は、関数のように引数を直接取るものではなく、要素を識別するための文字列を属性値として設定します。また、特定の処理結果を返す「戻り値」もありません。id属性の主な役割は、CSS（スタイルシート）で特定の要素にスタイルを適用する際の目印としたり、JavaScript（プログラミング言語）で特定の要素を取得して操作したりするための識別子として機能することです。サンプルコードでは、<header id="header">のように各要素に一意なidを設定し、CSSでは#header、JavaScriptではdocument.getElementById('header')といった形で、それぞれの要素を正確に特定して利用しています。これにより、Webページ上で特定の箇所だけを狙ってデザインしたり、動的な処理を加えたりすることが可能になります。
id属性は、HTMLドキュメント内で特定の要素を一意に識別するために使われます。この属性の値は、HTMLドキュメント全体で必ず一つの要素にのみ設定してください。複数の要素に同じidを割り当ててしまうと、Webブラウザの動作が不安定になったり、CSSでのスタイルの適用やJavaScriptによる要素の操作が正しく機能しない原因となります。例えば、JavaScriptのdocument.getElementById()では、同じidを持つ要素が複数あっても、常に最初に見つかった要素しか取得できません。複数の要素に共通のスタイルや挙動を適用したい場合は、id属性ではなくclass属性を使用するのが適切な方法です。id属性の一意性は、特定の箇所へのページ内リンクのターゲットとしても利用されるため、厳密に守る必要があります。