background-color

CSSでは、背景色を変えることができます。

本ページでは、background-colorプロパティについて説明します。

background-colorプロパティとは

background-colorプロパティを使うと、背景色を変えることができます。

background-colorの定義は、以下のとおりです。

【background-colorの定義】
CSSで指定できる色
初期値 transparent
適用対象 すべての要素
継承 しない

初期値がtransparent(透明)のため、デフォルトでは親要素の背景が表示されます。

背景に画像が適用されていた場合は、画像が背景色より前面になります。このため、背景画像が要素全体に表示される場合は、背景色が隠れます。要素全体に表示されない場合は、残った部分に背景色が表示されます。

値の説明

背景色の指定方法は、「CSSでの色の指定方法」をご参照ください。

利用例

background-colorの利用例は、以下のとおりです。

【background-colorのbody要素への適用例】
body {
  background-color: #C0C0C0;
}

上記のようにbodyに適用すると、以下のようにページ全体で背景色がシルバー(#C0C0C0)になります。

背景色がシルバーのブラウザー画面

もう1つの例です。

【background-colorのクラスへの適用例】
.test {
  background-color: lightgray;
}

上記を、クラスtestで要素に適用すると、適用した要素の背景がライトグレーになります。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
background-color
【スマートフォン】
項目 Sa An Op Ch Fx Sm
background-color
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る