横罫線hrに画像を使用してブラウザの差異を無くす

|

hrタグは横罫線を引くものですが、ブラウザによって見た目が異なりますし、デザイン的にもあまりよくありません。

そこで、画像を使うことにより見た目も美しく、ブラウザの差異も無くしてしまいましょう。

しかし、問題があってhrタグの横罫線は普通borderで指定されているのですが、IE6だけ違うんです。なので、IE6だけハックを使って別指定をします。

上記の理由から本当はhrタグをdivタグで囲んでしまったりしたほうがいろいろと便利なのですが、余計なタグを入れるのはソースコードが煩雑になるし、手間もかかりますよね。なので、今回はhrタグのみでやってみます。

また、画像を繰り返して使うのではなくひとつの画像を使います。

サンプル画像
横罫線の画像

(X)HTMLコード

<hr />

hr要素のデザインを個別に指定する場合はclassなどで指定してください。

CSSコード

/* IE6用 */
*html hr {
   display :list-item;
   width:0;
   margin-left:-10px;
   list-style :url(hr_line.gif) inside;
}

hr {
   border:0;
   height: 3px;
   background:url(hr_line.gif) 50% 0  no-repeat;
}

画像がセンタリングされるように指定してあります。

「*html」を先頭に記述することによりIE6にしか有効になりません。IE6ではどうやってもデフォルトの罫線が消えないので、トリッキーなやり方ですが、displayをリスト形式(list-item)にすることで罫線を消します。そして、画像をリストのマークとして表示します。

リストの位置(list-position)をinsideにして、左マージン(margin-left)を-10pxにすることで、画像をセンタリングすることができます。これはデフォルトでリストマークの横幅が10pxのためだと思います。

IE6以外では、hrの罫線はborderを0にすることで消せるので、画像を背景として表示します。注意点は、内容物が0なので、画像分の高さをheightで指定します。

参考サイト

このページに関連する記事

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事