HTML id 属性

HTML id 属性はHTML要素にユニークなidを指定するために使用されます。

HTMLドキュメント内で同じidを持つ複数の要素が存在することはできません。

id属性の使用

id 属性はHTML要素のユニークなIDを指定します。 id 属性の値はHTMLドキュメント内でユニークでなければなりません。

id 属性は、スタイルシート内の特定のスタイル宣言を指すために使用されます。JavaScriptもそれを使って特定のIDを持つ要素にアクセスおよび操作できます。

idの文法は、井号(#)を書き、それにID名を続ける。その後、大括号{}の中でCSS属性を定義します。

以下の例では、 <h1> 要素に基づいて、id名が"myHeader"を指す。この <h1> 要素はhead部分の #myHeader スタイル定義を使用してスタイルを設定します：

例

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

実際に試してみてください

注釈：id名は大文字小文字を区別します！

注釈：idは少なくとも1文字を含み、空白文字（スペース、タブなど）を含まない必要があります。

クラスとIDの違い

同じクラス名は複数のHTML要素で使用できますが、id名はページの1つのHTML要素で使用されます：

例

<style>
/* idが"myHeader"を持つ要素のスタイルを設定 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* クラス名が"city"を持つすべての要素のスタイルを設定 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- 唯一のidを持つ要素 -->
<h1 id="myHeader">My Cities</h1>
<!-- 同じクラス名を持つ複数の要素 -->
<h2 class="city">ロンドン</h2>
<p>ロンドンはイングランドの首都です。</p>
<h2 class="city">パリ</h2>
<p>パリはフランスの首都です。</p>
<h2 class="city">東京</h2>
<p>東京は日本の首都です。</p>

実際に試してみてください

ヒント：私たちの CSS チュートリアル より多くのCSS知識を学ぶために、

HTMLブックマークはIDとリンクを通じて実現されます。

HTMLブックマークは、読者がウェブページの特定の部分にジャンプするために使用されます。

ページが長い場合、ブックマークは非常に便利です。

ブックマークを使用するには、まずそれを作成し、リンクを追加する必要があります。

リンクをクリックすると、ページがバックグラウンドに設定された位置にスクロールします。

例

まず、 id 属性を作成する方法：

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

その後、同じページにリンクを追加します（「第4章にジャンプ」）：

例

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

実際に試してみてください

または、別のページに、このブックマークへのリンクを追加します（「第4章にジャンプ」）：

<a href="html_demo.html#C4">第4章にジャンプ</a>

JavaScript で id 属性を使用する方法

JavaScript は id 属性を使用して特定のエレメントに対して特定のタスクを実行することもできます。

JavaScript はこれを使用できます getElementById() 特定の id を持つ要素へのアクセス方法：

例

id 属性を使用してテキストを JavaScript で処理します：

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

実際に試してみてください

ヒント：以下のリンク先で HTML JavaScript この章で、または私たちの JavaScript チュートリアル JavaScript を学ぶために

本章のまとめ

  • id 属性は HTML エレメントにユニークな id を指定するために使用されます
  • id 属性の値は HTML ドキュメント内で一意でなければなりません
  • CSS と JavaScript はこれを使用できます id 属性を使用して要素を選択したり、特定の要素のスタイルを設定します
  • id 属性の値は大文字と小文字を区別します
  • id 属性は HTML ブックマークの作成にも使用できます
  • JavaScript はこれを使用できます getElementById() 特定の id を持つ要素へのアクセス方法