XHTML/CSS・トップ | CSSプロパティ・目次

●水平線

【CSS】↓

hr {
 background-color: #ff0000;
 height: 4px;
 width: 80%;
}

 水平線(区切り線)の色が#ff0000(赤)で、高さが 4px、幅が画面の80%で表示させています。

注意する点

 background-color プロパティと同時に height プロパティを指定してください。指定しないと背景色は反映されません。


■参考

【サンプル】↓


【CSS】↓

hr {
 background-color: #ff0000;
 color: #ff0000;
 border-width: 0;
 height: 4px;
 width: 80%;
}

【↑解説↓】

 border-width はボーダーの(上下左右枠線の)太さをまとめて指定するプロパティです。"border-width: 0" の指定を追加すると、よりきれいに反映されます。また、color は本来、要素のフォント色を指定するプロパティです。IE用に使えますが、background-colorプロパティが使えますのでこちらは使わなくても良いでしょう。 background-colorプロパティと colorプロパティに同じ色を使用するとエラーではありませんが、文法的に警告(赤信号)となります。

 hr要素は空要素のせいか、ほかの要素と違った振る舞いをすることがあります。hr要素に対して、align、size、width、noshade属性はXHTML1.0 Strict DTD、XHTML1.1 DTDで使えません。スタイルを適用するときはCSSのほうで指定してください。また、XHTML Basic 1.0 DTDでは hr要素を使うことができません。ボーダー(border)プロパティを使うことにより水平線として表示させる方法もあります。(関連ページご参照)


■以下に hr(水平線)と background-color(背景色)、color(前景色)の関係を表にまとめてあります。

hr要素 と background-color、colorプロパティ の関係
プロパティ IE(Ver.6.0) Netscape(Ver.7.1)
background-color ×
background-color+height指定
background-color+border-width: 0 指定 ×
color ×
color+height指定 ×
background-colorとcolorを同時指定
background-color+border-width: 0 +color

■関連ページ

XHTML/CSS・目次 | そのほかのプロパティ・目次

Copyright (C) 2004-2007 http://www.xml.vc/