【html】HR（水平線）の研究

Tweet

Category css 2010/03/08

以前は、区切り線も境界線（border）で描けばよいではないかと思って、hr要素の使用に抵抗があった。

今はなかなかいいやつかもしれないと思っている。

「区切り線」というのは、文書の要素として、「あり」だと思う。ここで話が変わりますよという意味がある。ただの境界線なら、borderで描いて欲しいが、そこに区切りという意味があるならhrを使っていい。

前置きが長くなったけど、

HR要素=区切り線を使いこなしたいので、各ブラウザで同じように見えるスタイルシートを探してみた

やりたいこと

• 境界線と同じように、色、太さ、スタイルを指定したい。
• 上下に適切に余白が取れるようにしたい。

余白に関しては、必要なら、回り込み（float）の解除にも使いたいので、margin-topは避けたい。

やってみてわかったこと

IEではcolorが影響するらしい。color:#f00;とすると罫線が赤くなる。backgroundじゃないのか！とびっくり。

Firefoxでは、hr要素に高さがないらしい。Firebugで確認すると0px。それならばということでheight:0pxを試すと、各ブラウザ問題なく表示できた。height:0pxでよいなら、背景色も文字色も気にしなくてよい。

これでどうでしょう

スタイルシートはこう。

	hr {
		height:0px;
		margin:0 0 10px 0;
		border-color:#cccccc;
		border-style:solid;
		border-width:0 0 1px 0;
		padding:0 0 10px 0;
	}

上方向にはマージン、パディング、ボーダーすべてなし。下方向のマージン、パディング、ボーダーで調整。下のボーダーで線を引く。線の上の余白は下のパディングで。線の下の余白は下のマージンで。本体のボックスの高さは0pxに。

表示確認

ブラウザのデフォルトのスタイルを除去する目的で、* {margin:0;padding:0;} を指定しています。

IE6

IE7

赤い線が見えるのは、heightを指定しないでデフォルトの状態に、colorに赤（#f00）を指定して試したときのもの。直すのが面倒なので説明のみ…

IE8

Firefox

Opera

Chrome