background-color: ***;
- ブラウザ
- 特性
- background-color
background-color は、背景色を指定するプロパティです。
このプロパティをhr要素に対して設定すると、水平線に色を付けることができます。
hr {
height: 3px;
background-color: #ff0000;
border: none;
color: #ff0000;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| background-color | 色 | 水平線の色を指定 |
色の指定については、CSSの色指定をご覧ください。
■水平線の境界線について
background-color プロパティの指定では、水平線の内側の色（背景色）を指定することになります。そのため、水平線の境界線はデフォルトの色で表示されてしまいます。
↓境界線が表示された例■境界線を消したい場合
水平線の境界線を消したい場合は、border: none を指定しておきます。
※しかし、IE 7以下ではこの指定が無視されてしまうようです。IEでも境界線を表示させないようにするには、背景色と同じ色をcolorプロパティで指定しておきます。
↓border: none を指定した例 （IE 7以下では無視される）↓color プロパティを同時に指定した例
■heightの指定
色の指定を反映させるには、heightプロパティで水平線の高さを指定しておく必要があります。（背景が表示されるスペースを確保するため）
↓height プロパティを指定しなかった例↓height プロパティで3pxの高さを指定した例
※境界線の有無や color プロパティの有無などにより、各ブラウザでの表示のされ方は異なってきます。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
hr {
margin-bottom: 15px;
}
hr.example1 {
height: 10px;
background-color: #ff0000;
}
hr.example2 {
height: 1px;
background-color: #0000ff;
border: none;
color: #0000ff;
}
</style>
</head>
<body>
<hr class="example1">
<hr class="example2">
</body>
</html>
表示例
- サイト内検索
