Section 5 : ID による絞り込み

 要素の入れ子の状況によって,または,HTML の CLASS 属性によって,スタイルを適用する要素を絞り込むことができた。ここでは HTML の ID 属性を導入し,それによって絞り込みを行う方法を紹介する。

ID 属性

 First Step CSS の Section 11 で導入した CLASS 属性は,HTML 要素を分類するものであった。これと似たものに ID 属性がある。この属性はほとんどすべての要素に対して指定できる。

 ID 属性の値は,大文字と小文字の区別があり,その名のとおり,文書中で一意を保証されなければならない。CLASS 属性は分類されたいわば“グループ”の名前であるから,そのグループに属すのであればいくつの要素にでも同一の値を指定してかまわない。この点が ID 属性と CLASS 属性の大きな違いである。

 要するに,ひとつの文書中に同じ ID を持つものは複数存在してはならない。グループ(CLASS)に属す人は何人いてもよいが,個人(ID)は一人に特定されなくてはならない。

 したがって,ID 属性は文書中にひとつしかあり得ないもの,たとえば,手紙文では差出人や宛名に指定されることになろうものである。

<H2 ID="subject">秋の大運動会のお知らせ</H2>

上記は,“subject”という ID を持った要素 <H2> の例である。

 この ID は HTML 4.0 で初めて導入され,文書の構造を記述する上でひじょうに重要な役割を演じる。

 ここではまず,とくにスタイル適用の絞り込みに関する役割だけを説明しよう。

ID による絞り込み

 実際に ID によってスタイルを変える場合は,<STYLE> または CSS ファイル中の記述は次のようになる。

(要素)#(ID) { ... }
#(ID) { ... }

 セレクタの指定において,クラスの場合半角ピリオドで区切っていたものが半角ハッシュ記号(シャープ)になっただけである。

 このとき,ひとつの ID に対してひとつの指定しかできないかというと,そうではない。現実に,

H1#subject { color: green; }
H2#subject { color: navy; }

とすれば,“subject”の ID を持つ要素が <H1> だったら緑色,<H2> だったら藍色のスタイルが適用されるのである。念のために言っておくと,ID が“subject”である <H1><H2> はひとつの文書中に同時には存在し得ない。

 次に示す例は,ID によってスタイルの適用を絞り込むものである。

#item01 { color: navy; }
#item01desc { color: #666699; }
#item02 { color: maroon; }
#item02desc { color: #996666; }
#item03 { color: green; }
#item03desc { color: #669966; }

<H2>JPEG 画像圧縮</H2>
<P> JPEG 画像圧縮は,大まかに次のような手順で行う。</P>
<DL>
  <DT ID="item01">離散コサイン変換(DCT)
  <DD ID="item01desc">画像を 8&times;8 のブロックに分け,それぞれ 2 次元離散コサイン変換を施す。これによって,画像(の,たとえば輝度)は周波数領域に写像される。
  <DT ID="item02">量子化
  <DD ID="item02desc">それぞれの周波数成分を,成分ごとに決められた間隔で量子化していく(この時点で,細部が失われる)。
  <DT ID="item03">符号化
  <DD ID="item03desc">量子化された DCT 係数は,ハフマン符号化などを用いて符号化される。
</DL>
<P>この JPEG 画像圧縮の最大のポイントは,“<EM>自然画は一般に高周波成分を含まないので,この部分を‘ごまかせ’ば効率よく圧縮できる</EM>”という点である。</P>

JPEG 画像圧縮

 JPEG 画像圧縮は,大まかに次のような手順で行う。

離散コサイン変換(DCT)
画像を 8×8 のブロックに分け,それぞれ 2 次元離散コサイン変換を施す。これによって,画像(の,たとえば輝度)は周波数領域に写像される。
量子化
それぞれの周波数成分を,成分ごとに決められた間隔で量子化していく(この時点で,細部が失われる)。
符号化
量子化された DCT 係数は,ハフマン符号化などを用いて符号化される。

この JPEG 画像圧縮の最大のポイントは,“自然画は一般に高周波成分を含まないので,この部分を‘ごまかせ’ば効率よく圧縮できる”という点である。

 この例は,ID 属性の値によって,いわばスタイルの“狙い打ち”ができていることを示すだけではあるが,たとえばスクリプトなどと組み合わせてスタイルを変更することによって,ダイナミックな効果を出すことも可能ではある。

 また,ID によって絞り込まれた要素について,入れ子で絞り込んでももよい。

#opinion { color: maroon; }
#opinion EM { color: red; }

 これは,すぐおわかりいただけると思うが,ID が“opinion”である要素は栗色になり,その中でとくに強調するフレーズは赤になる。