このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2015年7月.
background-color はCSS のプロパティで、要素の背景色を設定します。
試してみましょう
background-color: brown;background-color: #74992e;background-color: rgb(255 255 128);background-color: rgb(255 255 128 / 0.5);background-color: hsl(50 33% 25%);background-color: hsl(50 33% 25% / 0.75);<section> <div></div></section>#example-element { min-width: 100%; min-height: 100%; padding: 10%;}構文
/* キーワード値 */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: revert-layer;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>
例
ボックスへの色付け
この例では、さまざまな CSS の<color> 値を使用して、 HTML の<div> 要素にbackground-color を適用する方法を示しています。
HTML
<div>Lorem ipsum dolor sit amet, consectetuer</div><div>Lorem ipsum dolor sit amet, consectetuer</div><div>Lorem ipsum dolor sit amet, consectetuer</div>CSS
.example-one { background-color: transparent;}.example-two { background-color: rgb(153 102 153); color: rgb(255 255 204);}.example-three { background-color: #777799; color: white;}結果
表への色付け
この例では、background-color を HTML の<table> 要素（<tr> の行や<td> のセルを含む）に使用する方法を示しています。
HTML
<table> <tbody> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </tbody></table>CSS
table { border-collapse: collapse; border: solid black 1px; width: 250px; height: 150px;}td { border: solid 1px black;}#r1 { background-color: lightblue;}#c12 { background-color: cyan;}#r2 { background-color: grey;}#r3 { background-color: olive;}結果
仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-color |