トップページその他の事例集→色の付いた水平線を引く

6.2 色の付いた水平線を引く

サンプル表示
水平線(HRタグ)のCOLOR属性はインターネットエクスプローラは対応していますが、ネットスケープは対応していません。従ってどちらのブラウザでも同じように表示させるには画像を使うのが一般的ですが、ネットスケープもバージョン6.0以降はスタイルシートへの対応も進んできたので、ちょっと工夫すると色付きの水平線が引けます。

サンプルは上から夫々次のように記述しています。

<DIV STYLE="background:blue;font-size:2px"> </DIV>

<DIV STYLE="background:red;font-size:5px;width:50%"> </DIV>

<DIV STYLE="background:green;font-size:10px;margin-left:30px;margin-right:30px"> </DIV>

<DIV STYLE="border:1px solid blue;padding:2px"><DIV STYLE="background:red;font-size:3px"> </DIV></DIV>

ここで重要なのはDIVタグの開始と終了の中に記述した全角スペース(空白)です。これが無いと線は引けません。(backgroundが線の色で、font-sizeが線の高さです。)

ブラウザ対応表
ブラウザIENetscapeOpera
バージョン5.005.506.06.2.37.016.067.21
対応
(Operaは線が太くなります。)
トップページへ
背景に関する事例集
文字に関する事例集
画像に関する事例集
リンクに関する事例集
ページ制御に関する事例集
その他の事例集
6.1 時間でメッセージを変える
6.2 色の付いた水平線を引く