CSSデザインノートでタグ「hr」が付けられているもの

hrタグは、デフォルトで使用するとデザイン的に味気ないですよね。画像を使用するのが一番見栄えのよいものになりますが、少しだけスタイリッシュにしたい場合などCSSを使用すると便利です。ここでは、1pxの線を引く方法を紹介します。

単純に、borderを使って、上線だけ1pxの線を表示すればよいのですが、IE6ではうまくいかないので、「height:1px」と「clear:both」を追加します。

CSSコード

hr {
   border:solid #000;
   border-width:1px 0 0 0;
   height:1px;/* for IE6 */
   clear:both;/* for IE6 */
} 

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で指定します。

参考サイト

最近のブログ記事