background-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

background-color は CSS のプロパティで、要素の背景色を設定します。

試してみましょう

構文

css
/* キーワード値 */
background-color: red;
background-color: indigo;

/* 16 進の値 */
background-color: #bbff00; /* 完全不透過 */
background-color: #bf0; /* 完全不透過の短縮形 */
background-color: #11ffee00; /* 完全透過 */
background-color: #1fe0; /* 完全透過の短縮形 */
background-color: #11ffeeff; /* 完全不透過 */
background-color: #1fef; /* 完全不透過の短縮形 */

/* RGB 値 */
background-color: rgb(255 255 128); /* 不透過 */
background-color: rgba(117 190 218 / 50%); /* 50% 不透過 */

/* HSL 値 */
background-color: hsl(50 33% 25%); /* 不透過 */
background-color: hsl(50 33% 25% / 75%); /* 75% 不透過、すなわち 25% 透過 */

/* 特殊なキーワード値 */
background-color: currentcolor;
background-color: transparent;

/* グローバル値 */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: unset;

background-color プロパティは単一の <color> 値で指定します。

値

<color>

背景の単一色 (uniform color) を表します。指定されていれば background-image の背後に描画されますが、画像に透明な部分があれば色が見えます。

アクセシビリティの考慮

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

公式定義

初期値transparent
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
計算値色の計算値
アニメーションの種類色

形式文法

background-color = 
  <color>

例

HTML

html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>

CSS

css
.exampleone {
  background-color: transparent;
}

.exampletwo {
  background-color: rgb(153 102 153);
  color: rgb(255 255 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# background-color

ブラウザーの互換性

BCD tables only load in the browser

関連情報