id属性｜(X)HTML辞典

id属性

Updated 2013.10.04 / Published 2005.10.02

id属性（identifier）は要素を識別するために固有の ID名（識別子）をつけます。ひとつの文書内で同一の ID名を複数つけること（重複）はできません（つまり、一意でなければならない）。id属性を指定する主な目的はスタイルシート（CSS）のセレクタ（スタイルを適用する対象の目印のこと）にしてスタイリングや、スクリプト（JavaScript）で特定要素を参照してスクリプティングを行うための手段として使われます。

また、a要素の name属性と同じようにページ内の指定箇所を参照できる終点（id="ID名"）にも使われ、始点には "<a href="#ID名">" の形式で ID名にハッシュ（#）を前置します。なお、このときのハッシュ（#）以下の ID名の部分をフラグメント識別子と呼び、値がハッシュ（#）に続くフラグメント識別子のみで構成されている場合、当該文書を対象としたリンク設定となります。この目的地（終点）アンカーにおけるid属性の後方互換を未だに心配される制作者の方が多くいますが、 Internet Explorer 4（1997年リリース）, Netscape 6（2000年リリース）のバージョンより対応しており、このような古いUAを使用しているユーザはほぼ皆無であるため、問題ありません。id属性による目的地アンカーについての詳細は、アンカーの最適化を参照してください。

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

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

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

必須

XHTML の map要素では必須

非推奨

属性値

ID名

ID名に使える文字種について

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

まず、CSS1 の仕様に中途半端な対応しかできていない Internet Explorer 4 と Macintosh版Netscape Navigator 4.x 系列ではID名にアンダーバー（_）があるとスタイルの適用が無効になりますが、今となっては、このような古いUAを使用しているユーザはほぼ皆無であるため、ID名にアンダーバー（_）を使うことは問題ではありません。しかしながら、やはり問題となるのはコロン（:）、ピリオド（.）を含めた場合です。CSS2.1の規則では、半角アルファベット（a-z|A-Z）、半角数字（0-9）、ハイフン（-）、アンダースコア（_）以外の文字種はすべてU+00A0以上のUnicodeエスケープされた文字に変換する必要があるため、コロン（:）、ピリオド（.）を含めることはまったく実用的ではありません。もちろん古いUAにおいては、たとえUnicodeエスケープしたとしてもパースできず、エラーが出て、スタイル情報を正しく認識・参照できない弊害を出す恐れもあります。

以上のことを踏まえると、ID名の構成は半角アルファベットから書き出して、半角英数字とハイフン（-）とアンダーバー（_）のみの記号の組み合わせに留めましょう。また、ID名は半角アルファベットの大文字・小文字を区別する（case-sensitive）ので厳密な指定が必要です。

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

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

A

B

C

D

E

em
embed

F

H

I

K

L

M

N

O

P

Q

R

S

T

U

V

W

id属性のサンプル

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

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

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