CSS区切り線<hr>を画像で表示する方法

2010年9月18日

ホームページの制作中、
区切り線(=水平線、横罫線)<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.6、7、8)だと
下記画像の下のように
画像に重なって初期設定の区切り線が表示されてしまいます。

ブラウザーの違いによる区切り線(=水平線、横罫線)<hr>の表示の違い


<hr class="definition" />と記述した場合でも、
様々なCSSハックやJavaScriptを使えば
意図した通りの表示を実現することは可能です。
ですが設定はかなり手間です。

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


ラベル:



▲このページの先頭へ