goo blog サービス終了のお知らせ 

a l i t o

HTMLとかCSSとかMTタグなんかを勉強したりお絵かき載せたり。

水平線<hr>を点線にしたい

2006-01-11 17:34:34 | CSS
>>1pxで赤い点線、幅は500px


<<実例>>




<<ソース>>

<hr style="border:none;border-top:dashed 1px #ff0000;height:1px;color:#FFFFFF;width:500px;">


<<タグの再定義>>

このページ全部の水平線を赤点線にしたいゼという場合は
これをスタイルシートの中にぶちこみます。

hr{
border:none;
border-top:dashed 1px #FF0000;
height:1px;
color:#FFFFFF;
width:500px;
}


<<プチ解説>>

dashedが点線、1pxが幅、#FF0000が色の指定。

点線以外にsolidで直線、doubleで二重線などにできます。

もっと太い点線にしたい場合、ちょっと注意が必要です。
ブラウザによって表示が違うのです。IEなんかだと2px以上の太さになりません。
そこでheight(高さ)の設定です。
上下のborderの幅の合計以上の高さに設定すると回避できます。
ということで太さを変えたい場合はborder-topの中の1pxの部分と
heightの1px、両方いじってください。

最後、color:#FFFFFF;とかいてあります。
何?何が白なの?っつう感じですが、水平線本来の色です。
これを設定しないと変な灰色の線が現れます。
赤の点線は水平線と見せかけて水平線を囲っているborderです。
水平線自体を赤の点線にすることも可能ですが、
FIREFOXちゃんでは太さ1pxになってくれないのですorz


1 コメント

コメント日が  古い順  |   新しい順
とろろ (まり)
2006-04-08 04:20:54
芸能人のヒミツ教えちゃいます♪

返信する