第5章 IE5.5とNetscape6のCSS

5-4.リスト（UL,OL,DL要素など）

文字色

リストには、UL要素、OL要素、DL要素があり、それぞれの項目に、LI要素（UL要素、OL要素）やDT、DD要素（DL要素）を使います。

さて、次のような定義を適用する場合について調べてみました。背景色についても評価を付け加えました（2000.4.14）。

ul,ol,dl { color : red  ; background : yellow }
li,dt,dd { color : blue ; background : pink   }

<ul>  <li>UL要素  <li>前にドットがつきます  </ul>

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

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

実際の見栄えを、画像ファイルで表示して比較してみます。チェックページ

この結果を表にしてみました

Netscape 6の見栄えはIEとほぼ同じですが、背景色への適用に若干違いがありました。

ボーダー

リスト関係の全ての要素にボーダーを定義してみます。

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

NN4.0〜NC4.7では困りますが、IE5.01とNetscape6のどちらが正しい適用なのかは判断に困りますね。チェックページ

やはり、NC4.7が廃れるまでには時間がかかるでしょうから、リスト関連の要素にはボーダーを定義しないほうがよさそうです。

パディング

特に適用したいとは思っていませんが、Netscape６では下手に適用すると「・」や「数字」が消えてしまうことが発生しました。PR1のバグだと思いますが、参考に掲載しておきます。

li,dt,dd { color : blue ; border:2px green  solid; background : yellow;  padding : 0.5em ;}
ul,ol,dl { color : red  ; border:2px purple solid; background : pink  ;  padding : 0.5em ;}

パディングは、IE5.01ではUL、OL、DLには適用されませんでしたが、IE5.5及びNetscape6では適用するようです。ただ、Netscape6でパディングを1em以下にすると・や数字がウインドーの外側に出て行ってしまうので注意が必要です。（最初は、まったく表示しないものだと勘違いしてましたが、ただ単に見えなかっただけのようです。）

チェックページ

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