HONEY CANDY



Tips:hr要素をCSSで装飾する

HTMLではhr要素にsize,width,align,color属性を指定して装飾できますが、この4つの属性は非推奨属性ですので代わりにCSSを使います。

sizeとcolorの代替CSSは、heightとborder(とbackground-color)です。
たとえば1pxの線を引きたい場合、
hr {
    height:1px;
    border-width:1px 0 0 0;
    border-style:solid;
    border-color:#000000;
    color:#000000; /* au用? */
}

こんなカンジ。適用するとこんな風になります。
border-widthプロパティでトップだけ1pxにしていますが、border-topやborder-bottomでは何故かうまくいきません。
太くしたい場合はborder-widthの数値を大きくします。
border-styleを変えると水平線のスタイルも変わります。

border-style:dotted

border-style:dashed

background-colorはhrの地の色を指定します。(という言い方は厳密には正しくないのですが…)

border-color:#000000 background-color:#aaaaaa


widthとalignの代替CSSは、marginプロパティが一番簡単かと思います。
widthを80%でセンタリングしたい場合、IE6まで考えるとこうなります。
hr {
    margin-left:10%;
    margin-right:10%;
}

普通の水平線

margin-left:10% margin-right:10%
左右にそれぞれ10%の余白をとることで、hrの長さを80%にしています。

margin-rightのみを指定すれば左寄せ、margin-leftのみを指定すれば右寄せになります。


[2012/3/6 追記]
auではhr要素をborderで装飾することができないので、size属性とcolorプロパティを代わりに使うようです。
ドコモのXHTMLは、hr要素の全ての属性に対応していないので、こちらは装飾にCSSが必要。だそうです。

[2013/3/29 追記]
hr要素のことで検索していらして下さる方が多いようなので…
ドコモ、au、ソフトバンク全部に対応できる水平線のタグはたぶんこんなカンジになります。

↑高さ3px、色#ee8888、XHTMLの場合

size属性はソフトバンクは無視します。
インラインCSSなのはドコモ1.0がこれじゃないと反映してくれないから。
HTMLは最後のスラッシュとその前の半角スペースは不要です。
border-styleを変えても、auでは反映されないと思われます。

それから、hr要素にcolor属性を指定した場合、Operaではbackground-colorがcolor属性で指定した色になる…ような気がします。color属性は指定しない、もしくは指定した場合はbackground-color:transparentを追加で指定すれば、Operaでも他ブラウザと同じように表示されるはずです。

人気急上昇中のBL小説
BL小説 BLove
- ナノ -