From c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 22:08:32 +0900 Subject: CSS 画像の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/16 時点の英語版に同期 --- files/ja/web/css/cross-fade()/br.png | Bin 0 -> 394 bytes files/ja/web/css/cross-fade()/index.md | 199 ++++++++++++++++----------------- files/ja/web/css/cross-fade()/tr.png | Bin 0 -> 395 bytes 3 files changed, 97 insertions(+), 102 deletions(-) create mode 100644 files/ja/web/css/cross-fade()/br.png create mode 100644 files/ja/web/css/cross-fade()/tr.png (limited to 'files/ja/web/css/cross-fade()') diff --git a/files/ja/web/css/cross-fade()/br.png b/files/ja/web/css/cross-fade()/br.png new file mode 100644 index 0000000000..99477b2318 Binary files /dev/null and b/files/ja/web/css/cross-fade()/br.png differ diff --git a/files/ja/web/css/cross-fade()/index.md b/files/ja/web/css/cross-fade()/index.md index 5cf8359073..86e21e9c97 100644 --- a/files/ja/web/css/cross-fade()/index.md +++ b/files/ja/web/css/cross-fade()/index.md @@ -3,149 +3,144 @@ title: cross-fade() slug: Web/CSS/cross-fade() tags: - CSS - - CSS Function - - CSS-4 Images - - Experimental - - Function + - CSS 関数 + - CSS-4 画像 + - 実験的 + - 関数 - Reference - - Web + - ウェブ +browser-compat: css.types.image.cross-fade translation_of: Web/CSS/cross-fade() --- -

{{CSSRef}}

+{{CSSRef}} -

CSS の cross-fade() 関数は、2枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。

+**`cross-fade()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、2 枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。 -

構文

+## 構文 -

重要: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。

+**重要**: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。 -

仕様書上の構文

+## 仕様書上の構文 -

cross-fade() 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、 “%” 記号を含め、 0% から 100% までの間である必要があります。

+`cross-fade()` 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、`'%'` 記号を含め、 0% から 100% までの間である必要があります。 -

この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。

+この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。 -

cross-fade のパーセント値

+#### cross-fade のパーセント値 -

Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.

+子のパーセント値は、それぞれの画像の混合率の値と考えてください。つまり、0% の値は画像が完全に透明であり、100% の値は完全に不透明になります。 -
cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */
-cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
-cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
-cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
-cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */
-cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */
+```css +cross-fade( url(white.png) 0%, url(black.png) 100%); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png) 75%); /* 黒 25%、白 75% */ +cross-fade( url(white.png) 50%, url(black.png) 50%); /* 黒 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png) 25%); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png) 0%); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ +``` -

If any percentages are omitted, all the specified percentages are summed together and subtracted from 100%. If the result is greater than 0%, the result is then divided equally between all images with omitted percentages.

+パーセント値が省略された場合は、指定されたすべてのパーセント値が合計され、`100%` から減算されます。その結果が `0%` より大きい場合は、パーセント値が省略されているすべての画像で均等に分割されます。 -

In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly. For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first. A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%.

+最も単純なケースは、2 つの画像を互いにフェードアウトさせる場合です。そのためには、パーセント値を設定する必要があるのは片方の画像だけで、もう片方の画像はそれに応じてフェードされます。例えば、1 枚目の画像に 0% の値を設定すると 2 枚目の画像のみが表示され、100% の値を設定すると 1 枚目の画像のみが表示されます。25% の値を設定すると、1 枚目の画像は 25%、2 枚目の画像は 75% で表示されます。75% の場合はその逆で、1 枚目が 75%、2 枚目が 25% になります。 -

The above could also have been written as:

+以下のように書くこともできます。 -
cross-fade( url(white.png) 0%,   url(black.png)); /* fully black */
-cross-fade( url(white.png) 25%,  url(black.png)); /* 25% white, 75% black */
-cross-fade( url(white.png),      url(black.png)); /* 50% white, 50% black */
-cross-fade( url(white.png) 75%,  url(black.png)); /* 75% white, 25% black */
-cross-fade( url(white.png) 100%, url(black.png)); /* fully white */
-cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */
+```css +cross-fade( url(white.png) 0%, url(black.png)); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png)); /* 黒 25%、白 75% */ +cross-fade( url(white.png), url(black.png)); /* 白 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png)); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png)); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ +``` -

If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images. The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%. The result, if greater than 0, is then divided equally between all images with omitted percentages.

+パーセント値が宣言されていない場合は、両方の画像が 50% の混合率となり、cross-fade では両方の画像が均等に合成されたように描画されます。上述の 50%/50% の例では、パーセント値を記載する必要はありませんでした。パーセント値が省略された場合、含まれるパーセント値が合計され、100% から差し引かれます。その結果、0 より大きい場合は、パーセント値が省略されたすべての画像で均等に分割されます。 -

In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.

+最後の例では、両方のパーセント値の合計が 100% ではないため、両方の画像にそれぞれの混合率が含まれています。 -

If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:

+パーセント値が宣言されておらず、3 つの画像が含まれている場合、それぞれの画像は 33.33% の混合率になります。以下の 2 つは (ほぼ) 同じ線です。 -
cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
-cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);
+```css +cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* 3 つとも 33.3333% の混合率となる */ +cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); +``` -

Older, implemented syntax

+### 古い、実装されている構文 -
cross-fade( <image, <image>, <percentage> )
+```css +cross-fade( , , ) +``` -

The specification for the cross-fade() function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The original syntax, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the -webkit- prefix in Chrome, Opera, and other blink-based browsers.

+`cross-fade()` 関数の仕様では、複数の画像を指定し、それぞれの画像に他の値とは独立した透明度の値を持たせることができます。これは必ずしもそうではありませんでした。一部のブラウザーで実装されている元の構文では、2 つの画像しか使用できず、その 2 つの画像の透明度の合計がちょうど 100% になります。オリジナルの構文は Safari が対応しており、`-webkit-` の接頭辞付きのものは Chrome、Opera、その他の blink ベースのブラウザーで対応しています。 -
cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
-cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
-cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
-cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
-cross-fade(url(white.png), url(black.png), 100%); /* fully white */
-
+```css +cross-fade(url(white.png), url(black.png), 0%); /* 完全に黒 */ +cross-fade(url(white.png), url(black.png), 25%); /* 黒 25%、白 75% */ +cross-fade(url(white.png), url(black.png), 50%); /* 白 50%、白 50% */ +cross-fade(url(white.png), url(black.png), 75%); /* 白 75%、黒 25% */ +cross-fade(url(white.png), url(black.png), 100%); /* 完全に白 */ +``` -

In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from 100%, with the difference being the opacity of the second image.

+実装されている構文では、カンマで区切られた 2 つの画像を最初に宣言し、その後にカンマと必要なパーセント値を宣言します。カンマやパーセント値を省略すると、その値は無効になります。パーセント値は、最初に宣言された画像の混合率です。含まれるパーセントは 100% から差し引かれ、その差が 2 番目の画像の混合率になります。 -

The green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.

+仕様書の構文の項にある緑/赤の例 (パーセント値の合計が 150%) と黄/赤/青の例 (3 つの画像を使用) は、この実装では不可能です。 -

アクセシビリティの考慮

+## アクセシビリティの考慮 -

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。

+ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。 - +- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) -

形式文法

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

例

+## 例 -

cross-fade の古い構文

+

cross-fade の古い構文

-

HTML

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

CSS

+#### CSS -
.crossfade {
+```css
+.crossfade {
     width: 300px;
     height: 300px;
     background-image: -webkit-cross-fade(
-        url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        url('br.png'),
+        url('tr.png'),
         75%);
     background-image: cross-fade(
-        url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        url('br.png'),
+        url('tr.png'),
         75%);
-}
- -

結果

- -

{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}{{Spec2('CSS4 Images')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.types.image.cross-fade")}}

- -

関連情報

- - +} +``` + +#### Result + +{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("image")}} +- {{cssxref("url()")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("element()")}} +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} diff --git a/files/ja/web/css/cross-fade()/tr.png b/files/ja/web/css/cross-fade()/tr.png new file mode 100644 index 0000000000..a6e0f81eaf Binary files /dev/null and b/files/ja/web/css/cross-fade()/tr.png differ -- cgit v1.2.3-54-g00ecf