hrタグで1pxの線を引く方法

|

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 */
} 

最近のブログ記事