CSSだけで、hr(Horizontal Rule)タグのスタイルを指定するテスト。

「hr」は、Horizontal Rule(水平方向の罫線)の略語で、webページのレイアウトの主流がcssになる以前から使われてきたタグの一種ですが、あまり目立たない存在で、現在でもhtmlのタグに width="90%"とかsize="2"、color="green"などと直接記述する指定が多く見受けられます。もっと複雑な指定もできるはずですが、ブラウザによる解釈がまちまちだったため、敬遠されてきた経緯があります。最近になって、古いInternet Explorerを除いて、スタイルが定まってきたようなので、cssだけでどの程度指定できるか試してみました。
◆ htmlの"width" → cssでも"width"
◆ htmlの"size" → cssでは"height"。"padding"でも高さが出せます。
◆ htmlの"color" → cssでは"background-color"
◆ backgroundが使えるので、当然background-imageも使えます。[ hr04、 hr05、 hr06 ]
◆ 最近は、css3を使って、hrにグラデーション効果を取り入れる例もあるようですが、ブラウザごとの実装の違いを考えると難しいところです。代わりに画像で同様の効果を出してみました。[ hr07 ]
hr01

hr02

hr03

hr04

hr05

hr06

hr07

cssソース

			hr.hr01 {height: 1px; background: green; border: 0; }
hr.hr02 {height: 3px; background: red; border: 0; }
hr.hr03 {height: 1px; padding:3px 0; background: #aaa; border: 0; }
hr.hr04 {height: 13px; background-image: url(images/arrow.png);
     background-repeat: repeat-x; border: 0; }
hr.hr05 {height: 13px; background-image: url(images/arrow2.png);
     background-repeat: repeat-x; border: 0; }
hr.hr06 {height: 13px; background-image: url(images/arrow3.png);
     background-repeat: repeat-x; border: 0; }
hr.hr06 {height: 11px; background-image: url(images/arrow4.png);
     background-repeat: no-repeat; border: 0; }