From dc36f70aa600797fd07c7324f39fdde1a5ae71d9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Nov 2021 10:11:43 +0900 Subject: CSS Backgrounds に関するプロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/12 時点の英語版に同期 --- files/ja/web/css/background-color/index.md | 170 +++++++++++++---------------- 1 file changed, 76 insertions(+), 94 deletions(-) (limited to 'files/ja/web/css/background-color') diff --git a/files/ja/web/css/background-color/index.md b/files/ja/web/css/background-color/index.md index 5126230136..b615cbf293 100644 --- a/files/ja/web/css/background-color/index.md +++ b/files/ja/web/css/background-color/index.md @@ -3,31 +3,40 @@ title: background-color slug: Web/CSS/background-color tags: - CSS + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - グラフィック - - リファレンス + - HTML 色 + - HTML スタイル - レイアウト + - リファレンス + - スタイル + - Styling HTML + - background-color + - recipe:css-property +browser-compat: css.properties.background-color translation_of: Web/CSS/background-color --- -
{{CSSRef}}
- -

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

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/background-color.html")}}
+[CSS](/ja/docs/Web/CSS) の **`background-color`** プロパティは、要素の背景色を設定します。 - +{{EmbedInteractiveExample("pages/css/background-color.html")}} -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 background-color: red;
 background-color: indigo;
 
-/* Hexadecimal value */
-background-color: #bbff00;    /* 不透過 */
+/* 16 進の値 */
+background-color: #bbff00;    /* 完全不透過 */
+background-color: #bf0;       /* 完全不透過の短縮形 */
 background-color: #11ffee00;  /* 完全透過 */
-background-color: #11ffeeff;  /* 不透過 */
+background-color: #1fe0;      /* 完全透過の短縮形  */
+background-color: #11ffeeff;  /* 完全不透過 */
+background-color: #1fef;      /* 完全不透過の短縮形  */
 
 /* RGB 値 */
 background-color: rgb(255, 255, 128);        /* 不透過 */
@@ -44,43 +53,57 @@ background-color: transparent;
 /* グローバル値 */
 background-color: inherit;
 background-color: initial;
-background-color: unset;
+background-color: revert; +background-color: unset; +``` + +`background-color` プロパティは単一の `` 値で指定します。 + +### 値 + +- {{cssxref("<color>")}} + - : 背景の単一色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。 + +## アクセシビリティの考慮事項 + +背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。 + +色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、[太字](/ja/docs/Web/CSS/font-weight)ならば 18.66px 以上、または 24px 以上と定義されています。 -

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

+- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) -

値

+## 公式定義 -
-
{{cssxref("<color>")}}
-
背景の均等色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。
-
+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+

例

-

HTML

+### HTML -
<div class="exampleone">
+```html
+

   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: teal;
-  color: white;
-}
+```css
+.exampleone { background-color: transparent; }
 
 .exampletwo {
   background-color: rgb(153,102,153);
@@ -91,64 +114,23 @@ background-color: unset;
background-color: #777799; color: #FFFFFF; } - - -

結果

- -

{{EmbedLiveSample("Examples", 200, 150)}}

- -

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

- -

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

- -

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

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}形式上は transparent キーワードが削除されたが、 {{cssxref("<color>")}} の正規の値として組み入れられたため、変更なし。
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.background-color")}}

- -

関連情報

- - +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [複数の背景](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) +- {{cssxref("<color>")}} データ型 +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- [CSS を使用した HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) -- cgit v1.2.3-54-g00ecf