Section 7 : ID と CLASS

 CSS では ID と CLASS はスタイル適用の絞り込みを行うものとして重要だった。ここでは HTML 文書においての ID,CLASS について述べることにする。

ID,CLASS 属性

 ID 属性および CLASS 属性は,いずれも HTML 文書中の要素を識別・区別するために用いるものである。

ID,CLASS 属性
属性 解説
ID ID その要素に与えられる一意な名前。
CLASS 文字列 その要素が属する分類の名前。複数与えてもよい。

 ID,CLASS 属性のいずれにも大文字・小文字の区別がある。ID ,CLASS 属性は <HTML><HEAD><META><SCRIPT><STYLE><TITLE><BASE> を除くすべての要素に指定できる。ただし,HTML 4.0 Transitional で用いる <BASEFONT> には CLASS 属性を指定できない。

 ID は一意ならば何でもよいかというと,そうではない。ID は,英字(A,B,C,...,Z,a,b,c,...,z)で始まり,全体は英字と数字(0,1,2,...,9),ハイフン「-」,アンダースコア「_」,コロン「:」,ピリオド「.」からなっていなくてはならない。とうぜん,すべて半角文字である。

 CLASS 属性は複数の値を与えてよい(同一の要素を複数の分類に属させることができる)ということであるが,それぞれ半角空白で区切られる。

<P CLASS="Japan sports">...</P>

上の場合,ひとつのパラグラフが“Japan”というクラスと“sports”というクラスに同時に属していることになる。

ID 属性の使い方

 ID 属性を指定して何になるのか。復習もかねてまとめてみよう。

■ スタイルシートの適用

 これは Take off with CSS の Section 5 で解説したように,ある特定の要素にスタイルを適用させるために用いる。CSS では,ID で絞り込むときはハッシュ記号を冠して,

#the_best { font-size: 110%; color: red; }

のような命令を記述しておく。この記述がなされた,あるいは取り込まれた HTML 文書で,

<P ID="the_best">......</P>

と書かれたパラグラフがあれば,CSS の宣言にしたがって文字の大きさが 110%,その色は赤になる。とうぜん,この“the_best”という ID の要素は文書中にただひとつである。

■ スクリプトでの要素識別

 スクリプトを用いて文書中の要素を参照したり,そのプロパティ(多くは属性からマップされる)を書き換えたりするのに,ID を用いて要素を指定することができる。

 たとえば JavaScript では文書中の要素は出現順に番号が割り当てられ,これで参照することもできるが,ID が指定されていればそれを用いることもできる。

<P><IMG ID="img-awht" SRC="f_awht.gif" ALT="Always with HTML" WIDTH="160" HEIGHT="120"></P>
<SCRIPT TYPE="text/javascript">
<!--
  if (document.images && document.images["img-awht"])
    document.write("<P>The SRC attribute of the image above is : " + document.images["img-awht"].src +"<\/P>")
// -->
</SCRIPT>

ちなみに,先頭の if 文はエラー回避のためである。この記法をサポートしていない JavaScript のインタプリタが実行してエラーを出さないようにしてある。

Always with HTML

■ リンク終端

 ID が指定された要素は,<A NAME="..."> で指定したものと同じようにリンクの終端にすることができる。<A HREF="..."> での参照はまったく同様に先頭に半角ハッシュ記号を伴う。

 ID 全般にいえることだが,ID 属性と NAME 属性は互いに独立ではない。したがって,たとえば,ID が“link-end1”である要素と,NAME 属性が“link-end1”であるアンカがあったとしよう。このときもし,<A HREF="#link-end1">...</A> と参照した場合,どちらにジャンプするのか? これでは,要素を区別することはできない。このように,ID 属性,NAME 属性と属性名は違っても,重複する名前付けをすることは許されない。

 NAME 属性と比較すると,ID のほうは汎用性があり,NAME は古い UA でも対応している。また,NAME 属性は ID における名前付けの制限がない(たとえば,数字から始まってもよい)という違いがある。

■ HTML からの要素の参照

 要素によっては,別の要素との関連づけが必要になるものがある。Soar through HTML の Section 1 で解説するフォーム要素の <LABEL> がその好例である。この <LABEL> はテキストボックスなどのラベルであるから,どの要素に対してのものかを言わなくてはならないときがある。このときに要素を参照するために ID を用いる。

 また,Yes, we love HTML の Section 13 で見たように,宣言だけされて実体化していないオブジェクトを参照するときにも ID を用いる。このとき,参照される側のオブジェクトは ID が指定されていなくてはならない。

■ その他の利用

 たとえば HTML をデータベースとして保持する UA があるとする。ストックされた HTML からある文書を検索したいときに,ID をキーとすることもできよう。このような処理のために ID を使うことも考えられる。

CLASS-属性の使い方

■ スタイルシートの適用

 おそらく CLASS の利用はこれが圧倒的に多いだろう。復習すると,CSS ではクラスは半角ピリオドを冠してセレクタ(の一部)とする。

.forest { color: green; }

この場合,CLASS 属性に“forest”を持っている要素は文字が緑色になる。もっとも,複数指定であとから上書きされたらそうならない可能性もある。

 CLASS は要素を分類するものだから,同じクラス名を複数の要素が持っていても構わない。実際,要素を HTML の構造の範囲でいくつかに分類し,それぞれに対して別々のスタイルを適用するということが CSS のクラスによる識別の利点ではなかろうか。

■ その他の利用

 ID のときの例に同じく,HTML をデータベースとして保持する UA で,記事ごとに CLASS 属性を使って分類しておけば,それをキーとして関連する文書を次々にさがすことができるだろう。