HTML id

HTML class HTML Iframe

HTML の id 属性は、HTML 要素に一意の ID を割り当てるために使用されます。

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

id 属性の使用

id 属性は、HTML 要素の一意の ID を指定します。 id 属性の値は、HTML ドキュメント内で一意である必要があります。

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

ID の構文は次のとおりです。ポンド記号 (#) の後に ID 名を続けます。 次に、中括弧 {} 内で CSS プロパティを定義します。

以下の例には、ID 名「myHeader」を指す <h1> 要素があります。 この <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">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

自分で試してみてください

ID とリンクによる HTML ブックマーク

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

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

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

リンクをクリックすると、ブックマークされた場所までページがスクロールします。

例

まず、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>

自分で試してみる

この章の概要

  • id 属性は、HTML 要素の一意の ID を指定するために使用されます。
  • id 属性値は HTML ドキュメント内で一意である必要があります
  • CSS と JavaScript は、id 属性を使用して要素を選択したり、特定の要素をスタイルしたりできます
  • id 属性値は大文字と小文字が区別されます
  • id 属性は、HTML ブックマークの作成にも使用できます
  • JavaScript は getElementById() メソッドを使用して、特定の ID を持つ要素にアクセスできます
HTML class HTML Iframe