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 以上と定義されています。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Backgrounds and Borders Module Level 3 background-color の定義 |
勧告候補 | 形式上は transparent キーワードが削除されたが、 <color> の正規の値として組み入れられたため、変更なし。 |
CSS Level 2 (Revision 1) background-color の定義 |
勧告 | 変更なし |
CSS Level 1 background-color の定義 |
勧告 | 初回定義 |
初期値 | transparent |
---|---|
適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
継承 | なし |
計算値 | 色の計算値 |
アニメーションの種類 | 色 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 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 の要素への色の適用