Take off with CSS で紹介した CSS の記述と,いままでの HTML を対照させておこう。効果的な CSS を組む参考になるはずだ。
箇条書き <UL>,<OL> とその項目 <LI> の TYPE 属性は list-style-type 属性に変える。
<UL TYPE="...">
→<UL STYLE="list-style-type: ...;">
<OL TYPE="...">
→<OL STYLE="list-style-type: ...;">
<LI TYPE="...">
→<LI STYLE="list-style-type: ...;">
TYPE 属性は <UL> の場合と <OL> の場合で与えられる値が異なっていたが,CSS では両方に共通した値が与えられる。しかし,<UL> 向きのスタイルを <OL> に与えたりするのはあまり気持ちのよいものではない。
<OL TYPE="..."> 相当の list-style-type 属性のキーワードは 1:decimal,i:lower-roman,I:upper-roman,a:lower-alpha,A:upper-alpha のように対応している。
箇条書きをこじんまりとした体裁で表示させる COMPACT 属性は list-style-position 属性にキーワード inside を与えることに相当する。
<UL COMPACT>
→<UL STYLE="list-style-position: inside;">
<OL COMPACT>
→<OL STYLE="list-style-position: inside;">
この属性は <LI> にも指定できることに注意していただきたい。ただ,途中でスタイルを変えるのもおかしな話であるが。
CSS2 においては,<DL COMPACT> に相当する“コンパクトボックス”が導入される。
<IMG> の ALIGN 属性は画像と文字の流れの位置関係を指定したり,また,回り込み配置を指定したりする。
前者の場合は,vertical-align 属性で処理し,後者の場合は float 属性を使えばよい。
<IMG SRC="..." ALT="..." WIDTH="..". HEIGHT="..." ALIGN="...">
→<IMG SRC="..." ALT="..." WIDTH="..." HEIGHT="..." STYLE="vertical-align: ...;">
→<IMG SRC="..." ALT="..." WIDTH="..." HEIGHT="..." STYLE="float: ...;">
念のため言っておくと,ALIGN 属性に与えていたのが left,right ならば float 属性,それ以外は vertical-align 属性のお世話になる。
<IMG> のほかにも文字の流れとの位置関係を指定したり,回り込みを指定したりする要素があるが,これについても同様である。
また,回り込みの解除は <BR CLEAR="..."> と <BR> に対して指定するものであったが,CSS の clear 属性は回り込みを中止したい位置にある要素がスタイルを指定できるものであれば何でもよい。
<BR CLEAR="...">
→<ELEMENT STYLE="clear: ...;">
CLEAR 属性のキーワード all は,clear 属性では both であることに注意されたい。
ちなみに,vertical-align 属性に関連して,<SUP>,<SUB> は今までどおり,表組のセルの VALIGN 属性も今までどおり用いる。
区切り線 <HR> の WIDTH 属性は,CSS で指定する。
<HR WIDTH="...">
→<HR STYLE="width: ...;">
区切り線の幅は,マージンを用いても変えることができるだろう。
セルの高さを指定する HEIGHT 属性は CSS が担う。
<TD HEIGHT="...">
→<TD STYLE="height: ...;">
<TH HEIGHT="...">
→<TH STYLE="height: ...;">
セル幅は <TD>,<TH> でなく <COLGROUP>,<COL> で指定することになる。ここでは WIDTH 属性を用いる。スタイルシートでも構わないが,表組はその幅なども構造的意味を持つことがあり得るので CSS 未対応ブラウザではどうなるかというのを考えると微妙な点が残る。
セルの折り返し抑制 NOWRAP 属性は,white-space 属性 を使えばよい。
<TD NOWRAP>
→<TD STYLE="white-space: nowrap;">
<TH NOWRAP>
→<TH STYLE="white-space: nowrap;">
しかし,表では列ごとに同じタイプのデータが並ぶわけだから,たとえば同じ列の数値が小数点で誤って折り返されることを防ぎたいというのであれば,<COLGROUP>,<COL> に指定して列に対して一括して折り返しを抑制したほうがよいようである。