HTMLID属性
HTMLid属性は、HTML要素の一意のIDを指定するために使用されます。
HTMLドキュメントに同じIDを持つ複数の要素を含めることはできません。
id属性の使用
このid属性は、HTML要素の一意のIDを指定します。属性の値はid
、HTMLドキュメント内で一意である必要があります。
このid属性は、スタイルシート内の特定のスタイル宣言を指すために使用されます。また、JavaScriptは、特定のIDを持つ要素にアクセスして操作するためにも使用されます。
idの構文は次のとおりです。ハッシュ文字（＃）の後にid名を記述します。次に、中括弧{}内でCSSプロパティを定義します。
次の例では<h1>、ID名「myHeader」を指す要素があります。この要素は
、headセクションのスタイル定義<h1>
に従ってスタイル設定されます。#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>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<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>
ヒント： CSSについて詳しくは、 CSSチュートリアルをご覧ください。
IDとリンクを含むHTMLブックマーク
HTMLブックマークは、読者がWebページの特定の部分にジャンプできるようにするために使用されます。
ページが非常に長い場合、ブックマークが役立ちます。
ブックマークを使用するには、最初にブックマークを作成してから、リンクを追加する必要があります。
次に、リンクをクリックすると、ページがブックマークのある場所にスクロールします。
例
idまず、次の属性でブックマークを作成します。
<h2 id="C4">Chapter 4</h2>
次に、同じページ内からブックマークへのリンクを追加します（「第4章にジャンプ」）。
例
<a href="#C4">Jump to Chapter 4</a>
または、別のページからブックマークへのリンクを追加します（「第4章にジャンプ」）。
<a href="html_demo.html#C4">Jump to Chapter 4</a>
JavaScriptでのid属性の使用
このid属性は、JavaScriptで使用して、その特定の要素に対していくつかのタスクを実行することもできます。
getElementById()JavaScriptは、次のメソッドを使用して特定のIDを持つ要素にアクセスできます。
例
この属性を使用してid、JavaScriptでテキストを操作します。
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
ヒント：HTML JavaScriptの章、または JavaScriptチュートリアルでJavaScriptを学習してください。
章のまとめ
- この
id属性は、HTML要素の一意のIDを指定するために使用されます - 属性の値は
id、HTMLドキュメント内で一意である必要があります - この
id属性は、CSSおよびJavaScriptが特定の要素のスタイルを設定/選択するために使用されます - 属性の値で
idは大文字と小文字が区別されます - この
id属性は、HTMLブックマークの作成にも使用されます getElementById()JavaScriptは、メソッドを使用して特定のIDを持つ要素にアクセスできます