HTML id 属性

Volardev 編集部 April 12, 2026

HTMLの id 属性は、HTML要素に対して一意（ユニーク）な識別子を指定するために使用されます。1つのドキュメント内で、同じ id を持つ要素が複数存在してはいけません。

1. id 属性の使用方法

id 属性は、特定のスタイル宣言を指し示すためにCSSで使用されたり、特定の要素にアクセスして操作するためにJavaScriptで使用されたりします。

id の構文は、CSSではハッシュ（#）記号の後に id 名を記述するIDセレクタを使用します。

1.1 スタイリングの実装例

以下の例では、myHeader という id を持つ <h1> 要素に対して、独自のスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
/* 「myHeader」という id を持つ要素をスタイリング */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">マイ・ヘッダー</h1>

</body>
</html>

[!NOTE]
id 名は大文字と小文字を区別（Case-sensitive）します。また、id 名には少なくとも1つの文字を含める必要があり、数字から始めてはいけません。また、スペースを含めることもできません。

2. class と id の決定的な違い

同じ class 名は複数のHTML要素に使用できますが、同じ id 名は1つのHTMLページ内で1つの要素にしか使用できません。

<h1 id="myHeader">マイ・シティ</h1>

<h2 class="city">ロンドン</h2>
<h2 class="city">パリ</h2>
<h2 class="city">東京</h2>

プロの開発現場では、共通のスタイルを適用する場合には class を使い、特定の要素をピンポイントで制御（JavaScriptでの操作やページ内リンクなど）する場合に id を使うのが鉄則です。

3. HTML ブックマーク（ページ内リンク）

HTMLブックマークは、ウェブページの特定のセクションへユーザーをジャンプさせるために使用されます。非常に長いページにおいて、特定の場所へ即座に移動させる「アンカー（Anchor）」としての役割を果たします。

3.1 ブックマークの作成手順

まず、ジャンプ先となる要素に id を付与します。

<h2 id="C4">第4章</h2>

次に、同じページ内からその id へ移動するためのリンクを追加します。href 属性の中にハッシュ（#）を付けて id 名を記述します。

<a href="#C4">第4章へジャンプ</a>

また、別のページからその特定のセクションへ直接リンクすることも可能です。

<a href="html_tips.html#C4">第4章へ移動</a>

4. JavaScript での id 属性の使用

JavaScriptを使用して特定の要素を操作する際、id 属性は最も頻繁に利用されます。

JavaScriptでは、document.getElementById() メソッドを使用して、特定の id を持つ要素を取得できます。

<!DOCTYPE html>
<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">テキストを変更</button>

<script>
function displayResult() {
  // id が「myHeader」の要素を取得し、その内容を書き換える
  document.getElementById("myHeader").innerHTML = "こんにちは、世界！";
}
</script>

</body>
</html>

このように、DOM操作において特定の要素を一意に特定できる id は、動的なWebアプリケーションを構築する上で欠かせないツールです。

5. まとめ

HTMLの id 属性に関する重要なポイントを整理しましょう。

項目	詳細
一意性	1つのページ内で1回しか使用できない。
CSS セレクタ	`#`（ハッシュ）記号を使用して定義する。
JavaScript	`getElementById()` メソッドで要素を特定する。
アンカー	ページ内の特定の位置へのリンク（ブックマーク）として機能する。

id は非常に強力な識別子ですが、乱用するとCSSの優先順位（詳細度）が複雑になりすぎてしまうことがあります。スタイリングには class を、特定の機能やアンカーには id を、という使い分けを意識することで、よりクリーンなコードを書けるようになりますよ。