SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【html】HR(水平線)の研究

以前は、区切り線も境界線(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
ie6で区切り線
IE7
ie7で区切り線
赤い線が見えるのは、heightを指定しないでデフォルトの状態に、colorに赤(#f00)を指定して試したときのもの。直すのが面倒なので説明のみ…
IE8
ie8で区切り線
Firefox
firefoxで区切り線
Opera
operaで区切り線
Chrome
chromeで区切り線

関連するメモ

コメント