[CSS] 水平線<hr>のスタイルを変更する

By: koeri

2011.05.28

水平線を点線にしたり、独自の画像にしたりする方法です。
毎回ぐぐって調べていたので、メモしておくことにしました。

HTMLで <hr> と書くとでてくる線です。
普通に <hr> とだけ書くとブラウザデフォルトのスタイルで表示されますが、例えば以下のような点線にしたい場合、

点線の例

指定した箇所のみが反映されます。

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

WEBページ全体で反映されます。

hr{
	border:none;
	border-top:dashed 1px #CCC;
	height:1px;
	color:#FFFFFF;
	margin: 0 6 0 6;
}

上では、”dashed”というのが点線の意味になりますが
他に以下のものを指定することができます。

ただし、この方法だとブラウザによって表示に違いがでるそうです。
私の環境でもいくつかの線が同じに見えます。(^-^;
そこで画像を使うと更にその差異を少なくすることができます。

"background"のところで画像までのurlを指定してやります。

hr {
	border: none;
	height: 1px;
	background:url(img/hr_line.gif) 50% 0  no-repeat;
	color: #FFFFFF; /* サイト背景と同じ色を推奨 */
	margin: 0 6 0 6;
}

わざわざ"color"で色を設定しているのは、ブラウザによってはデフォルトの灰色が見えてしまうことがあるからです。

以下のサイトを参考にさせてもらいました。