【HTML】ID属性の使い方やその注意点｜実例付きで丁寧に解説

（最終更新日：2023年6月）

✔次のような疑問を持つ方々へ向けた記事です

「HTMLのid属性は何に使うものなのだろうか？」
「HTMLのid属性の適切な使い方を学びたい」
「id属性を使用したHTMLの具体的な例を見てみたい」

✔当記事で提供する内容

HTMLのid属性の基本的な理解
id属性の適切な使い方とその応用
id属性を用いたHTMLの実例

この記事では、HTMLのid属性の基本的な使用方法から、さまざまなオプションを活用した応用例まで、具体例付きで丁寧に解説します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

HTMLの基本概念

こちらでは、HTMLの基本概念について詳しく解説します。

HTMLを理解することは、ウェブページを作成するうえで必要不可欠なスキルです。

HTML全体の概要
HTMLの主要な要素

HTML全体の概要

HTML（HyperText Markup Language）は、ウェブページを作成するためのマークアップ言語です。

すべてのウェブページはHTMLで記述され、ブラウザによって解釈されて表示されます。

HTML文書は一連の要素またはタグで構成され、これらの要素によってテキストの構造と内容が決定されます。

<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは、世界！</h1>
  <p>これはHTMLのサンプルページです。</p>
  <ul>
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
  </ul>
</body>
</html>

HTMLの主要な要素

HTMLには多数の要素が存在します。

こちらがHTMLの主要な要素の一覧表です。

要素名	説明	例
`<html>`	HTMLドキュメントのルート要素	`<html></html>`
`<head>`	ページのメタデータやタイトルを含むヘッダー要素	`<head></head>`
`<title>`	ページのタイトルを指定する要素	`<title>サンプルページ</title>`
`<body>`	ページのコンテンツを含むボディ要素	`<body></body>`
`<h1> - <h6>`	見出しを表現する要素	`<h1>見出し</h1>`
`<p>`	段落を表現する要素	`<p>これは段落です。</p>`
`<a>`	ハイパーリンクを作成する要素	`<a href="https://example.com">リンク</a>`
`<img>`	画像を表示する要素	`<img src="image.jpg" alt="画像">`
`<ul> - <li>`	箇条書きリストを作成する要素	`<ul><li>項目1</li><li>項目2</li></ul>`
`<ol> - <li>`	番号付きリストを作成する要素	`<ol><li>項目1</li><li>項目2</li></ol>`
`<table> - <td>`	表を作成する要素	`<table><tr><td>セル</td></tr></table>`
`<form> - <input>`	フォームを作成する要素	`<form><input type="text"></form>`
`<div>`	コンテンツをグループ化するための汎用的な要素	`<div>コンテンツ</div>`
`<span>`	インライン要素をグループ化するための汎用的な要素	`<span>テキスト</span>`

これらの要素を組み合わせて、ウェブページの構造とコンテンツを表現するのです。

HTMLのid属性とその特性

次に、HTMLのid属性とその特性について詳しく見ていきましょう。

id属性は、特定のHTML要素を一意に識別するためのものです。

id属性の定義と機能
id属性の特性：一意性と優先度
idとclassの違いとは

id属性の定義と機能

id属性は、HTML要素に一意の識別子を割り当てるためのものです。

特徴をまとめると以下のとおり。

特徴	説明
ページ内で一意	同じIDを持つ要素は、ページ内でひとつしか存在できません。
要素の参照	ID属性を使用することで、CSSやJavaScriptから特定の要素を参照できる。
ページ内リンク	ID属性を使用することで、ページ内の特定の位置へのリンクが作成可能。
命名規則	ID属性の値は一意である必要がありますが、具体的な命名規則はありません。一意性を保つためのルールを自分で設ける必要があります。

ID属性の値を適切に設定することが重要であり、一意性を保つために適切な命名規則を適用する必要があります。

id属性の特性：一意性と優先度

id属性の一意性は、同一ページ内で同じid値を持つ要素が二つ以上存在してはならない、ことを意味します。

IDによる参照の際、値が2つ以上あると正常に動作しないので気をつけましょう。

またCSSにおけるidセレクタは、タグセレクタやクラスセレクタよりも優先度が高いという特性も持っています。

idが特定の要素だけを一意に識別するために使われるのに対し、クラスは一つ以上の要素に適用されるためです。

つまりCSSルールが競合した場合、idセレクタによるスタイルが他のセレクタに優先されることを意味します。

idとclassの違いとは

idとclassは、両方ともHTML要素を識別するために使用されますが、いくつか重要な違いがあります。

最も重要な違いは、idがページ内で一意であるのに対し、classはページ内の複数の要素に適用できるということです。

また、idは強力な特異性を持つため、スタイル競合時に他のセレクタより優先されます。

classはより広範なスタイル適用に適しています。

id属性の適切な利用方法

id属性の適切な使い方を理解することは、ウェブ開発において重要です。

活用することで、効率的で保守しやすいコードを書けるからです。

id属性を使ったHTML要素の特定
id属性の適切な使用シーン
CSSやJavaScriptとid属性の連携

id属性を使ったHTML要素の特定

id属性は、特定のHTML要素を直接指定する最も直接的な方法です。

例えばJavaScriptでは、document.getElementById(‘myId’)のようにして、特定のidを持つ要素を取得できます。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
    <script>
        function handleClick() {
            // IDが'myButton'の要素を取得
            var button = document.getElementById('myButton');
            
            // ボタンのテキストを変更
            button.innerHTML = 'クリックされました！';
            
            // ボタンの背景色を変更
            button.style.backgroundColor = 'red';
        }
    </script>
</head>
<body>
    <button id="myButton" onclick="handleClick()">クリックしてみて！</button>
</body>
</html>

もしくはHTML内で、<a href="#myId">とすることで、リンクをクリックした時にそのidの位置までページがスクロールできるという機能もあります。

<!DOCTYPE html>
<html>
<head>
    <title>Scroll to ID Example</title>
</head>
<body>
    <h1>スクロールの例</h1>
    <p><a href="#myId">ここをクリックしてスクロール</a></p>
    <div id="myId">
        <h2>スクロール先の要素</h2>
        <p>この要素までスクロールします。</p>
    </div>
</body>
</html>

id属性の適切な使用シーン

id属性は以下のような場面で使えます。

特定の要素に対してユニークなスタイルを適用する
JavaScriptで特定の要素を操作する必要がある

しかしスタイルを複数の要素に適用する場合には、idよりもclassの使用が推奨されます。

なぜならidが一意でなくてはならないため、再利用に適さないからです。

CSSやJavaScriptとid属性の連携

id属性は、CSSやJavaScriptで特定の要素を直接操作するために使用されます。

CSSでは、#myIdのように記述することでidを指定できます。

JavaScriptでは、document.getElementById('myId')を使用して要素にアクセスします。

これにより、特定のHTML要素の見た目や挙動を制御できます。

<!DOCTYPE html>
<html>
<body>
    <p id="myId">このテキストはクリックすると変化します。</p>
    <script>
        var element = document.getElementById('myId');
        element.addEventListener('click', function() {
            element.style.color = 'blue';
            element.style.fontWeight = 'normal';
        });
    </script>
</body>
</html>

id属性のベストプラクティスと使用制限

id属性のベストプラクティスをご紹介します。

きちんと理解することで、より効果的でエラーを防ぐコーディングが可能になるでしょう。

ユニークなidの命名規則
id属性の使用制限とその理由
セマンティックHTMLとid属性の関係

ユニークなidの命名規則

id属性の値は、ページ全体で一意である必要があります。

なぜならブラウザが、idに基づいて特定の要素を特定するためです。

したがって、idは他のどの要素とも区別できるような命名が必要です。

命名には、より具体的でわかりやすいものを付けるのが良いとされています。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

id属性の使用制限とその理由

id属性の使用には、いくつかの制限があります。

ユニーク性: 同じHTML文書内では、id属性の値は一意でならない
命名規則: id属性の値は、文字、数字、ハイフン、アンダースコアのみを使用できる
予約語の回避: id属性の値にはHTMLの予約語を避ける必要がある
スコープ: id属性は、ページ全体での一意性が必要

予約語には以下のような単語が含まれます。

class
id
for
if
else
function
return
switch
while
typeof

セマンティックHTMLとid属性の関係

id属性は、せまんてっぃHTMLにおいて重要な役割を果たします。

なぜならセマンティックHTMLは、文書の構造を明確にし、コンテンツの意味を強調するためのプラクティスだからです。

idは特定のセクションや要素を一意に識別するために使用され、それによって要素の目的や役割が明確になります。

これにより、ウェブページはよりアクセシブルになり、SEOの観点からも有利となります。

実際のid属性の使用例とケーススタディ

ここでは、実際のウェブページでのid属性の使い方を具体的な例とともに見ていきましょう。

これらの例は、id属性の使用のベストプラクティスを理解する上で役立ちます。

ナビゲーションメニューの作成におけるidの利用
フォームフィールドのラベリングとid
JavaScriptを用いた特定の要素の操作

ナビゲーションメニューの作成におけるidの利用

ナビゲーションメニューにidを使用すると、ユーザーの利便性が高まります。

これがなぜ重要かと言うと、ユーザーはナビゲーションメニューを使ってサイト内を移動することが多いからです。

例えばメニュー内の特定のリンクがクリックされたとき、ページの特定のセクションにスクロールするように設定が可能。

これは、リンクのhref属性に"#id"形式でidを指定することで実現できます。

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<section id="home">
  <h1>Welcome to Our Website</h1>
  <!-- ホームのコンテンツ -->
</section>

<section id="about">
  <h2>About Us</h2>
  <!-- Aboutのコンテンツ -->
</section>

<section id="services">
  <h2>Our Services</h2>
  <!-- サービスのコンテンツ -->
</section>

<section id="contact">
  <h2>Contact Us</h2>
  <!-- お問い合わせのコンテンツ -->
</section>

フォームフィールドのラベリングとid

フォームフィールドをラベル付けする際にも、id属性は非常に有用です。

<label>タグのfor属性にidを指定することで、ラベルと関連する入力フィールドを明確に関連付けられます。

<label for="name">Name:</label>
<input type="text" id="name">

<label for="email">Email:</label>
<input type="email" id="email">

<label for="message">Message:</label>
<textarea id="message"></textarea>

<button type="submit">Submit</button>

これにより、ユーザビリティが向上し、スクリーンリーダーなどのアクセシビリティツールが適切にフィールドを識別できます。

JavaScriptを用いた特定の要素の操作

JavaScriptを使用したウェブページの操作するには、id属性が非常に重要です。

idを活用してさまざまなことが実現できます。

<p id="message">Hello, World!</p>

<button onclick="changeMessage()">Change Message</button>

<script>
  function changeMessage() {
    var messageElement = document.getElementById('message');
    messageElement.textContent = 'New Message';
    messageElement.style.color = 'red';
  }
</script>

ユーザーのインタラクションに応じて、ページを動的に更新しています。