HTML

この記事では、HTML要素をページ内で一意に識別し、CSS・JavaScript・リンクから指定するためのid属性を説明します。

The id attribute in HTML is used to uniquely identify elements and is used in CSS and JavaScript to manipulate specific elements and apply styles.

id 属性

　id属性は、HTML要素に一意の識別子を付けるために使用します。id属性を使うことで、CSSや JavaScriptなどのプログラミング言語で特定の要素を操作したり、スタイルを適用したりすることができます。

　id属性の値は、文書内で一意でなければなりません。つまり、同じ id属性値をページ内で複数の要素に指定することはできません。また、値には最低でも１文字が必要で、空白文字を含むことはできません。

　付与した id属性値は、セレクタとして使用できるほか、リンクのフラグメント識別子としても利用できます。

　id属性値に使用できる文字列は、英数字とアンダースコア(_)、ハイフン(-)の組み合わせで指定します。ただし、数字で始めることはできません。空白を含んではいけない以外に特に制約はありませんが、XMLとして扱ったり、セレクタとして使用する場合に問題が起こる可能性がありますので、半角英数字による指定、さらに英字（先頭が xml を除く）からはじまる値を選択するのが無難です。

　id属性はグローバル属性に分類され、ほとんどの HTML要素において使用することができます。例えば、div要素や p要素、img要素など、ほとんどの要素に id属性を追加することができます。以下に、id属性の使い方とコードの例を示します。

<div id="container">
	<h1 id="title">Hello, World!</h1>
	<p id="description">This is a sample paragraph.</p>
	<img id="image" src="example.jpg" alt="Example Image">
</div>

　上記の例では、div要素に id属性として "container" を指定しています。同様に、h1要素には "title"、p要素には "description"、img要素には "image" を指定しています。

　id属性を使用すると、CSSや JavaScriptなどで特定の要素を操作することができます。例えば、CSSで特定の id属性を持つ要素にスタイルを適用する場合は、CSSのセレクタとして idセレクタを使用します。以下に、CSSで id属性を利用する例を示します。

#title {
	color: blue;
	font-size: 24px;
}

#image {
	width: 300px;
	height: 200px;
}

　上記の CSSコードでは、idセレクタを使って id属性に対してスタイルを指定しています。"#title" は id属性が "title" である要素を選択し、colorプロパティと font-sizeプロパティを指定しています。同様に、"#image" は id属性が "image" である要素を選択し、widthプロパティと heightプロパティを指定しています。

　JavaScriptでも、id属性を使用して要素を操作することができます。以下に、JavaScriptで id属性を利用する例を示します。

// id属性を使って要素を取得する例
var titleElement = document.getElementById("title");
var imageElement = document.getElementById("image");

// id属性を使って要素の内容や属性を変更する例
titleElement.innerHTML = "New Title";
imageElement.src = "new-image.jpg";

　上記の JavaScriptコードでは、document.getElementById()メソッドを使用して、id属性を持つ要素を取得しています。例えば、getElementById("title")は、id属性が "title" である要素を取得し、getElementById("image")は、id属性が "image" である要素を取得します。

　取得した要素を変数に代入した後は、その要素に対してさまざまな操作を行うことができます。例えば、innerHTMLプロパティを使って要素の内容を変更したり、srcプロパティを使って画像のパスを変更したりすることができます。