スタイルシート裏の裏


第4章 スタイルシートの注意点


4-4.リスト要素の不思議


手始めに文字色の定義

リストには、UL要素、OL要素、DL要素があり、それぞれのリスト表示方法として、LI要素(UL要素、OL要素)やDT、DD要素(DL要素)を使います。

さて、次のような定義をHTMLファイルに適用することを考えてみます。

ul,ol,dl { color : red  }
li,dt,dd { color : blue }
<ul>  <li>UL要素  <li>前にドットがつきます  </ul>

<ol>  <li>OL要素  <li>前に数字がつきます  </ol>

<dl>  <dt>DL要素の中のDT要素  <dd>同じくDD要素  </dl>

この内容を表にしてみました

要素IE4.0NN4.0
UL効果無し文字色の定義
OL効果無し文字色の定義
DL効果無し文字色の定義
LI文字色の定義ドット・数字の色を定義
DT文字色の定義効果無し
DD文字色の定義効果無し

実際の見栄えを、画像ファイルで表示して比較してみます。

list-image_ie list-image-nn

ボーダーを定義すると笑っちゃいます

いっその事、完全に笑えるよう、リスト関係の全ての要素にボーダーを定義してみます。

li,dt,dd { color : blue ; border:2px green  solid;}
ul,ol,dl { color : red  ; border:2px purple solid;}

どこが笑えるかは、次の画像を見てもらえれば分かると思います。

リストにボーダー(IE) リストにボーダー(NN)

ボーダーやパディングは全ての要素に適用できるはずなんですが、リスト要素に適用するのは現時点ではあきらめた方がよさそうです。なお、IE5でも、ボーダーのかかり方はほとんど変わりませんでした。(99.9.9.追記)


Indexに戻る ==== 前のページに戻る ==== 次のページへ