ホームページの制作中、

区切り線（＝水平線、横罫線）＜hr＞に画像を使いたいことがあります。

（なお、カギ括弧<>とコロン:は、全角＜＞：にしています）

そんな時は、

HTMLファイル側で、

以下のように＜hr＞に対して直にクラス指定するのではなく、

　　＜hr class="definition" /＞

＜hr＞を＜div＞タグではさんで、

以下のように＜div＞に対するクラス指定で制御するよにします。

　　＜div class="definition"＞＜hr /＞＜/div＞

後は、CSSファイル側で、＜hr＞を非表示にし、

＜div＞のクラス指定で、背景に区切り線の画像を指定すればOKです。

（この方法だと、画像だけでなくボーダーも自由に設定可能です。）

　　hr {

　　　display：none;

　　}

　　.definition {

　　　height： 10px;　← 画像の高さ

　　　background： #FFF url(../image/hr-img.gif)　 ← 背景に画像

　　}

本来であれば、

区切り線（＝水平線、横罫線）＜hr＞を全称セレクタ（ * ）で

リセットしておけば、

前者の＜hr class="definition" /＞でも問題なく

背景画像を表示できるはずですが、

MS Internet Explorer （ver.６、７、８）だと

下記画像の下のように

画像に重なって初期設定の区切り線が表示されてしまいます。

＜hr class="definition" /＞と記述した場合でも、

様々なCSSハックやJavaScriptを使えば

意図した通りの表示を実現することは可能です。

ですが設定はかなり手間です。

それと比べ、今回のやり方のほうがはるかに簡単です。

Tweet