id属性 - 要素の識別子

■ 概要

項　　目説　　明
記述形式 id = "名前"   
値 の形式 "識別子"　
（使用可能文字: 半角英数，"-"，"_"，":"，"."，先頭文字は半角英文字）   
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa?+   
適用可能な要素
（種　　類）		 すべての要素 　
（グローバル属性）   
継　　承 しない

■ 解説

id属性 は，

当該要素で，
要素に識別子を指定 します。

name 属性 による 要素の名前（フォーム，フレーム，コントロール，オブジェクトなど）とは用途・機能が異なります。　この 識別子の用途 として，

  1. JavaScript から要素にアクセスする際， この id 属性 の値を用いて，対象要素を特定することができます。
  2. a 要素 によるハイパーリンクで， ページ内のリンク先を href 属性 で指定するときには， HTML文書のファイル名 に続いて，# とリンク先要素の id 属性 の値 を並べて記述します。
  3. CSS の IDセレクタ (ID selectors) によるスタイル指定を行うときには， スタイルの適用先要素の id属性 の値 を記述します。

などがあります。

なお，同じHTMLファイル内での "識別子" の重複 については，次の注意が必要です。

  1. 同じ種類，別の種類を問わず，別の要素（タグ）に同一の重複する "識別子" の使用はできません。
  2. すでに name 属性 として使われている名前は，id 属性 の "識別子" として重複して使用できません。

■ 使用例１（ id属性の<a> によるリンクでの利用）

HTMLソース
HTML
<body> ～ </body>		 
<div id="id1">ここが先頭！</div>
 <br><br><br>
 <a href="#id1">先頭に移動</a>

ブラウザー 表示例
ここが先頭！



先頭に移動

■ 使用例２（ id属性のスタイルシートでの利用）

HTMLソース
<style type="text/css">
   <!-- 
      #id2 { color:red } 
   -->
</style>
HTML
<body> ～ </body>		 
<div id="id2">ここは赤色！</div>

ブラウザー 表示例
ここは赤色！

■ 備考

この部分は，上の例を実行するために用意した空白のスペースです。





























【参考ページ】