background-color
Updated / Published
background-color
プロパティは要素に背景色を設定します。値にはRGB値やカラーネームなどで色を指定します。また、色の他にも背景色を透過させる "transparent
" のキーワードが指定でき、親要素に背景色が指定されている場合は、その背景色が透けて見えることになります。
背景色や背景画像などの背景が反映される領域を背景領域と呼び、ボーダー領域(内容領域+パディング+ボーダー)までが背景領域となります。ただし、ボーダー領域は背景の上から重ねて描かれるので背景が反映されるのはボーダーの色が透明や二重線、破線といった透ける場合に限られます。また例外もあり、ルート部の要素では(スクロール分も含めた)表示域全体が背景の描画対象となることと、border-collapse
プロパティによる表の表示モデルによっても分離ボーダーモデル(border-collapse : separate ;
)のセルの背景領域は通常どおりボーダー(枠線)の領域まで(内容領域+パディング+ボーダー)ですが、結合ボーダーモデル(border-collapse : collapse ;
)のセルの背景領域はパディング領域まで(内容領域+パディング)になります。
background-colorプロパティの実装状況
- IE
- ◯
- Firefox
- ◯
- Opera
- ◯
- Chrome
- ◯
- Safari
- ◯
- iOS
- ◯
- Android
- ◯
サンプル
.heading {
color : white ;
background-color : navy ;
border : 3px ridge silver;
text-align : center ;
}
背景色を指定した場合は、必ず color
プロパティで前景色(文字色)もあわせて指定するようにします。なぜなら、制作者スタイルシートで背景色を白色に指定していたとしても、もし、ユーザがユーザスタイルシートを利用している場合に、必ずしも前景色を黒色に設定しているとは限らないためです。また、背景色は文字色と似通った色を指定していると文字が読み難くなるため、背景色と文字色のコントラストはできるだけ高い組み合わせになるように明度や彩度を調節する等して見やすくなるように工夫しましょう。