【background-color】背景色を指定する

background-colorプロパティでは、要素の背景色を指定することができます。 設定した背景色は、パディングを含むボックスの内容領域、ボーダーの領域に適用されます。

※ボーダーの領域については、ボーダーを透明にした場合に背景色が表示されます。

またマージンの領域については、その部分はつねに透明となり、親要素のボックスの背景が透けて見える状態となります。

なお背景色を指定する場合は、ユーザーの環境によっては色の組み合わせ次第で文字が判別しづらくなることがあります。 これを避けるためには、背景色と同時に文字色(color)も指定するようにして下さい。

値については、RGB値もしくはカラーネーム(キーワード)で指定しますが、transparentを指定すると背景色は透明になります。 これはNetscape4.7以前には対応していないので注意して下さい。

書式

  • background-color : ……… 背景の色を指定

★:色、transparent、inherit

RGB値、キーワード(カラーネーム)で指定。指定できる色についてはカラーコード一覧を参照
transparent
背景を透明にする。結果として、親要素のボックスの背景が透けて見えるようになる。これが初期値

使用した時の例

.sample1 {
  color:#333;
  background-color:#DFF2FF;
}
<div class="sample1">背景色を青系の色に指定しています。テキストは黒系の色を指定してます。</div>

ブラウザ上の表示例

背景色を青系の色に指定しています。テキストは黒系の色を指定してます。

対応ブラウザなどのデータ

初期値 transparent 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報