From 67272846a6378027439138a7e6e3b06598a1edd2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 14 Dec 2024 16:27:50 +0900 Subject: [PATCH] =?UTF-8?q?2024/10/22=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/background-attachment/index.md | 18 ++-- files/ja/web/css/background-color/index.md | 88 ++++++++++++++++--- 2 files changed, 83 insertions(+), 23 deletions(-) diff --git a/files/ja/web/css/background-attachment/index.md b/files/ja/web/css/background-attachment/index.md index 14ab6c7611dfa8..b5a634cbd11e03 100644 --- a/files/ja/web/css/background-attachment/index.md +++ b/files/ja/web/css/background-attachment/index.md @@ -2,7 +2,7 @@ title: background-attachment slug: Web/CSS/background-attachment l10n: - sourceCommit: 2adfb8760ac42c80966080e2e84211b14e43b589 + sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb --- {{CSSRef}} @@ -52,7 +52,7 @@ background-attachment: unset; #### HTML -```html +```html live-sample___simple_example

There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she @@ -62,16 +62,16 @@ background-attachment: unset; #### CSS -```css +```css live-sample___simple_example p { - background-image: url("starsolid.gif"); + background-image: url("star-solid.gif"); background-attachment: fixed; } ``` #### 結果 -{{EmbedLiveSample("単純な例")}} +{{EmbedLiveSample("Simple_example")}} ### 複数の背景画像 @@ -79,7 +79,7 @@ p { #### HTML -```html +```html live-sample___multiple_background_images

There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she @@ -97,9 +97,9 @@ p { #### CSS -```css +```css live-sample___multiple_background_images p { - background-image: url("starsolid.gif"), url("startransparent.gif"); + background-image: url("star-solid.gif"), url("star-transparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } @@ -107,7 +107,7 @@ p { #### 結果 -{{EmbedLiveSample("複数の背景画像")}} +{{EmbedLiveSample("Multiple_background_images")}} ## 仕様書 diff --git a/files/ja/web/css/background-color/index.md b/files/ja/web/css/background-color/index.md index 8aeafc7849737b..d0670ecdd3f45f 100644 --- a/files/ja/web/css/background-color/index.md +++ b/files/ja/web/css/background-color/index.md @@ -2,7 +2,7 @@ title: background-color slug: Web/CSS/background-color l10n: - sourceCommit: 1c4eb0bfb5f72a26fcc21a83fac91aa3e66c2fb8 + sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb --- {{CSSRef}} @@ -42,6 +42,7 @@ background-color: transparent; background-color: inherit; background-color: initial; background-color: revert; +background-color: revert-layer; background-color: unset; ``` @@ -52,7 +53,7 @@ background-color: unset; - {{cssxref("<color>")}} - : 背景の単一色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。 -## アクセシビリティの考慮 +## アクセシビリティ 背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。 @@ -72,37 +73,97 @@ background-color: unset; ## 例 -### HTML +### ボックスへの色付け -```html -

Lorem ipsum dolor sit amet, consectetuer
+この例では、さまざまな CSS の {{cssxref("color_value", "<color>")}} 値を使用して、 HTML の {{HTMLelement("div")}} 要素に `background-color` を適用する方法を示しています。 -
Lorem ipsum dolor sit amet, consectetuer
+#### HTML -
Lorem ipsum dolor sit amet, consectetuer
+```html live-sample___colorize_boxes +
Lorem ipsum dolor sit amet, consectetuer
+ +
Lorem ipsum dolor sit amet, consectetuer
+ +
Lorem ipsum dolor sit amet, consectetuer
``` ### CSS -```css -.exampleone { +```css live-sample___colorize_boxes +.example-one { background-color: transparent; } -.exampletwo { +.example-two { background-color: rgb(153 102 153); color: rgb(255 255 204); } -.examplethree { +.example-three { background-color: #777799; color: #ffffff; } ``` -### 結果 +#### 結果 + +{{EmbedLiveSample("Colorize boxes", 200, 150)}} + +### 表への色付け + +この例では、 `background-color` を HTML の {{HTMLelement("table")}} 要素（{{HTMLelement("tr")}} の行や {{HTMLelement("td")}} のセルを含む）に使用する方法を示しています。 + +#### HTML + +```html live-sample___colorize_tables + + + + + + + + + + + + + + + + +
111213
212223
313233
+``` + +#### CSS + +```css live-sample___colorize_tables +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; +} +``` + +#### 結果 -{{EmbedLiveSample("Examples", 200, 150)}} +{{EmbedLiveSample('Colorize tables', "100%", "100%")}} ## 仕様書 @@ -117,4 +178,3 @@ background-color: unset; - [複数の背景](/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/CSS/CSS_colors/Applying_color)