HTML id 属性

定義と使用方法

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

id 属性は最もよく、スタイルシート内のスタイルや、JavaScript（HTML DOMを通じて）を使用して特定のidを持つ要素を操作するために使用されます。

id 属性はリンクアンカー（link anchor）としても使用できます。

参照してください：

HTML タイプ：HTML id

HTML タイプ：HTML 属性

CSS タイプ：CSS 文法

CSS リファレンスマニュアル：CSS #id セレクタ

HTML DOM リファレンスマニュアル：HTML DOM getElementById()メソッド

HTML DOM リファレンスマニュアル：HTML DOM id属性

HTML DOM リファレンスマニュアル：HTML DOM Style オブジェクト

例

例1

id属性を使用して、JavaScriptでテキストを変更します：

<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">テキストを変更する</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>

実際に試してみる

ページの下部にさらに多くの例があります。

文法

<element id="id">

属性値

値 説明
id

要素にユニークなidを指定します。命名規則：

  • 少なくとも1文字を含むこと
  • スペース文字を含まないこと

さらに多くの例

例2

id属性を使用して、指定されたidを持つページ内の要素にリンクします：

<html>
<body>
<h2><a id="top">特定のタイトル</a></h2>
<p>多くのテキスト...</p>
<p>多くのテキスト...</p>
<p>多くのテキスト...</p>
<a href="#top">顶部に戻る</a>
</body>
</html>

実際に試してみる

例 3

CSS スタイルでテキストを id 属性を使用してスタイル化する例：

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CodeW3C.com は最高です！</h1>
</body>
</html>

実際に試してみる

ブラウザサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート