Go to information

id属性

  1. id属性
  2. 指定可能要素
  3. サンプル

id属性

id属性(identifier)は要素を識別するために固有の ID名(識別子)をつけます。ひとつの文書内で同一の ID名を複数つけること(重複)ができません(つまり、一意でなければならない)。id属性を指定する主な目的はスタイルシート(CSS)のセレクタ(スタイルを適用する対象の目印のこと)やスクリプト(JavaScript)で特定要素を参照するための手段として使われます。また、a要素の name属性と同じようにページ内の指定箇所を参照できる終点(id="ID名")にも使われ、始点には "<a href="#ID名">" の形式で ID名にハッシュ(#)を前置します。なお、このときのハッシュ(#)以下の ID名の部分をフラグメント識別子と呼び、値がハッシュ(#)に続くフラグメント識別子のみで構成されている場合、当該文書を対象としたリンク設定となります。

HTML4.01, XHTML1.1 には id属性を指定できない要素型(base, head, html, meta, script, style, title)がいくつかありますが、XHTML1.0 では全ての要素型に id属性を指定することができます。

バージョン
必須
XHTML の map要素 では必須
非推奨
-
属性値
ID名

ID名に使用可能な文字種は半角アルファベット(a-z|A-Z)、半角数字(0-9)、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(.)のみに制限されています。class属性には指定できた日本語の平仮名やカタカナ、様々な記号などは使えません。さらに ID名の書き出しは、半角アルファベットから始めなければならず、XML の仕様において "xml"(xMl, XML, Xml のように大文字・小文字で書くこともできない) からはじまる値は許されません。

なお、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(.)が使用できるといっても、ユーザーの閲覧環境(UA)によってはそれらの文字種が使われているとスタイル情報などを正しく認識・参照できない弊害が出てくることがあります。たとえば、CSS1 の仕様に中途半端な対応しかできていない Internet Explorer 4 と Macintosh版Netscape Navigator 4.x 系列では ID名にアンダーバー(_)があるとスタイルの適用が無効になります。しかし、今となっては、そんな古い UA を使用しているユーザーはおそらく皆無なので、ID名にハイフン(-)やアンダーバー(_)あたりを使うだけなら全く問題はないでしょう。

以上のことを踏まえると、ID名の構成は半角アルファベットから書き出して、半角英数字とハイフン(-)とアンダーバー(_)のみの記号の組み合わせにしましょう。現状ではコロン(:)、ピリオド(.)は使わないほうが無難です。また、ID名は半角アルファベットの大文字・小文字を区別する(case-sensitive)ので厳密な指定が必要です。

a要素の name属性によるウェブページ内の特定箇所をリンク先として参照できるようになる目的地(終点)アンカーの代替として、id属性の後方互換を心配される制作者の方が多くいますが、 Internet Explorer 4(1997年リリース), Netscape 6(2000年リリース)のバージョンより対応しているので、これも今となってはほとんど問題ありません。id属性による目的地アンカーについての詳細は、アンカーの最適化を参照してください。

似た役割をする id属性と class属性ですが、両属性は明確に使い分ける必要があります。class属性は同じ要素でも class属性を付けることで分類・区別する場合に用いるのに対して、id属性は文書内で一意の識別子を与え、その要素を唯一無二のフィールド(部分)とするために用います。たとえば、ウェブログでは id属性が、その日、その日の日付を与える(id="date-200x-xx-xx")のに用いられており、この場合はひとつの文書内に複数の記事があっても、それらひとつひとつの記事を唯一無二の記事とする役割をしています。これは id属性にしかできない役割です。

id属性を指定できる要素型

* が付いているのは XHTML1.0 のみ指定可能。

id属性のサンプル

id属性を使った IDセレクタ子孫セレクタを併用して要素型名でのスタイルの適用をサイト内の項目ごとに使い分けるような場合にも有用です。

記述例
/* 共通するスタイルは通常セレクタで定義 */
h1              {
font-weight : bold ; font-size : 180% ; margin : .8em 0 ;
}
/* 子孫セレクタでスタイルの適用を使い分ける */
body#TopPage h1 {
color : darkred ; border : thick groove #c00 ;
padding : 0 .4em 0 0 ; text-align : right ;
}
body#Weblog  h1 {
color : navy ; border : solid navy ;
border-width : 1px 4em 0 4em ; text-align : center ;
}
......
<body id="TopPage">
<h1>ウェブサイト</h1>
......
<body id="Weblog">
<h1>ウェブログ</h1>
......

ここでは共通の CSSファイルに同じ h1要素に対して、スタイルを定義する場合でも、body要素に id属性を付与して、ID名別の body要素を親要素とした子孫セレクタを利用することで、まったく違ったスタイルを適用することができます。同様の手順で各要素を親要素の ID名別に使い分けていくことで、サイト内で扱う大きな項目ごとにデザインを変えたりすることができます。そして、どの項目においてもスタイルが共通する部分については、通常の基本セレクタでスタイルを記述するようにすれば全く無駄がありません。このように id属性は CSS をより機能的に使えるようにするのにも有用です。

現在位置
  1. W3G
  2. XHTML
  3. HTML辞典
  4. id属性
ナビゲーション
ステータス情報
作者
上田 遼
公開
2005-10-02T03:14:26+09:00
更新
2008-12-29T04:27:11+09:00
URI
http://w3g.jp/xhtml/dic/id
検索

実績:大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー