From f1650fbb27022456d9fc3ff8cd4b5ec676ca3a2e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 12 Nov 2021 01:05:16 +0900 Subject: CSS Backgrounds and Borders 背景関係のプロパティの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/background-color/index.html | 154 --------------------------- files/ja/web/css/background-color/index.md | 154 +++++++++++++++++++++++++++ 2 files changed, 154 insertions(+), 154 deletions(-) delete mode 100644 files/ja/web/css/background-color/index.html create mode 100644 files/ja/web/css/background-color/index.md (limited to 'files/ja/web/css/background-color') diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html deleted file mode 100644 index 5126230136..0000000000 --- a/files/ja/web/css/background-color/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: background-color -slug: Web/CSS/background-color -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - グラフィック - - リファレンス - - レイアウト -translation_of: Web/CSS/background-color ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/background-color.html")}}
- - - -

構文

- -
/* キーワード値 */
-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> 値で指定します。

- -

値

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

形式文法

- -{{csssyntax}} - -

例

- -

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;
-}
-
- -

結果

- -

{{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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-color/index.md b/files/ja/web/css/background-color/index.md new file mode 100644 index 0000000000..5126230136 --- /dev/null +++ b/files/ja/web/css/background-color/index.md @@ -0,0 +1,154 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - グラフィック + - リファレンス + - レイアウト +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/background-color.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+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> 値で指定します。

+ +

値

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

形式文法

+ +{{csssyntax}} + +

例

+ +

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;
+}
+
+ +

結果

+ +

{{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")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf