background-color

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

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

/* Hexadecimal value */
background-color: #bbff00;    /* 不透過 */
background-color: #11ffee00;  /* 完全透過 */
background-color: #11ffeeff;  /* 不透過 */

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

/* HSL 値 */
background-color: hsl(50, 33%, 25%);         /* 不透過 */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% 不透過 */

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

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

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

値

<color>

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

形式文法

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

例

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

.exampleone {
  background-color: teal;
  color: white;
}

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

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

結果

アクセシビリティの考慮事項

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

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

• WebAIM: Color Contrast Checker
• MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
• Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• 複数の背景
• <color> データ型
• その他の色に関するプロパティ: color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, column-rule-color
• CSS を使用した HTML の要素への色の適用