合成と混合の各文書を更新

- 2021/11/05 時点の英語版に同期

7 files changed, 987 insertions, 1021 deletions

diff --git a/files/ja/web/css/background-blend-mode/index.md b/files/ja/web/css/background-blend-mode/index.md
index 671ade8f21..4b1535d001 100644
--- a/files/ja/web/css/background-blend-mode/index.md
+++ b/files/ja/web/css/background-blend-mode/index.md
@@ -4,23 +4,23 @@ slug: Web/CSS/background-blend-mode
 tags:
   - CSS
   - CSS プロパティ
-  - Reference
   - 合成と混合
+  - recipe:css-property
+browser-compat: css.properties.background-blend-mode
 translation_of: Web/CSS/background-blend-mode
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-blend-mode</code></strong> プロパティは、要素の背景画像を互いに、または要素の背景色と、どのように混合するかを設定します。</p>
+**`background-blend-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背景画像が相互にどのように混合されるか、また要素の背景色とどのように混合されるかを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+混合モードは {{cssxref("background-image")}} プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや切り落としが行われます。
 
-<p>混合モードは {{cssxref("background-image")}} プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや短縮が行われます。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">/* 1 値 */
+```
+/* 1 値 */
 background-blend-mode: normal;
 
 /* 2 値、背景ごとにひとつずつ */
@@ -29,84 +29,87 @@ background-blend-mode: darken, luminosity;
 /* グローバル値 */
 background-blend-mode: initial;
 background-blend-mode: inherit;
+background-blend-mode: revert;
 background-blend-mode: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- {{cssxref("&lt;blend-mode&gt;")}}
+  - : 適用する混合モードです。複数の値をカンマ区切りで置くことができます。
 
-<dl>
- <dt>{{cssxref("&lt;blend-mode&gt;")}}</dt>
- <dd>適用する混合モードです。複数の値をコンマ区切りで置くことができます。</dd>
-</dl>
+## Formal definition
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## Formal syntax
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
-
-<pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;
-&lt;select id="select"&gt;
-    &lt;option&gt;normal&lt;/option&gt;
-    &lt;option&gt;multiply&lt;/option&gt;
-    &lt;option selected&gt;screen&lt;/option&gt;
-    &lt;option&gt;overlay&lt;/option&gt;
-    &lt;option&gt;darken&lt;/option&gt;
-    &lt;option&gt;lighten&lt;/option&gt;
-    &lt;option&gt;color-dodge&lt;/option&gt;
-    &lt;option&gt;color-burn&lt;/option&gt;
-    &lt;option&gt;hard-light&lt;/option&gt;
-    &lt;option&gt;soft-light&lt;/option&gt;
-    &lt;option&gt;difference&lt;/option&gt;
-    &lt;option&gt;exclusion&lt;/option&gt;
-    &lt;option&gt;hue&lt;/option&gt;
-    &lt;option&gt;saturation&lt;/option&gt;
-    &lt;option&gt;color&lt;/option&gt;
-    &lt;option&gt;luminosity&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-<pre class="brush: css hidden">#div {
+<h2 id="Examples">例</h2>
+
+### 基本的な例
+
+```css
+.item {
+    width: 300px;
+    height: 300px;
+    background: url('image1.png'),url('image2.png');
+    background-blend-mode: screen;
+}
+```
+
+### 様々な混合モードを試してみる
+
+```html hidden
+<div id="div"></div>
+<select id="select">
+    <option>normal</option>
+    <option>multiply</option>
+    <option selected>screen</option>
+    <option>overlay</option>
+    <option>darken</option>
+    <option>lighten</option>
+    <option>color-dodge</option>
+    <option>color-burn</option>
+    <option>hard-light</option>
+    <option>soft-light</option>
+    <option>difference</option>
+    <option>exclusion</option>
+    <option>hue</option>
+    <option>saturation</option>
+    <option>color</option>
+    <option>luminosity</option>
+</select>
+```
+
+```css hidden
+#div {
     width: 300px;
     height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background: url('br.png'),url('tr.png');
     background-blend-mode: screen;
-}</pre>
+}
+```
 
-<pre class="brush: js hidden">document.getElementById("select").onchange = function(event) {
+```js hidden
+document.getElementById("select").onchange = function(event) {
     document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
 }
-console.log(document.getElementById('div'));</pre>
-
-<p>{{ EmbedLiveSample('Examples', "330", "330") }}</p>
+console.log(document.getElementById('div'));
+```
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{ EmbedLiveSample('Examples', "330", "350") }}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td>
-   <td>{{ Spec2('Compositing') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.background-blend-mode")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("mix-blend-mode")}}</li>
-</ul>
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("mix-blend-mode")}}
diff --git a/files/ja/web/css/blend-mode/br.png b/files/ja/web/css/blend-mode/br.png
new file mode 100644
index 0000000000..99477b2318
--- /dev/null
+++ b/files/ja/web/css/blend-mode/br.png
diff --git a/files/ja/web/css/blend-mode/index.md b/files/ja/web/css/blend-mode/index.md
index 1425d46207..1432c870f0 100644
--- a/files/ja/web/css/blend-mode/index.md
+++ b/files/ja/web/css/blend-mode/index.md
@@ -2,458 +2,443 @@
 title: <blend-mode>
 slug: Web/CSS/blend-mode
 tags:
-  - Blend modes
+  - 混合モード
   - CSS
   - CSS Data Type
-  - Compositing
+  - 合成
   - Compositing and Blending
   - Data Type
   - Reference
   - color
-  - ブレンドモード
-  - 合成
 browser-compat: css.types.blend-mode
 translation_of: Web/CSS/blend-mode
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong><code>&lt;blend-mode&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、要素が重なったときにどのように色が現れるかを記述します。 {{cssxref("background-blend-mode")}} または {{cssxref("mix-blend-mode")}} プロパティで使用されます。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<p><code>&lt;blend-mode&gt;</code> データ型は、以下に挙げたキーワードのうちの一つで定義します。</p>
+{{CSSRef}}
+
+**`<blend-mode>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、要素が重なったときにどのように色が現れるかを記述します。 {{cssxref("background-blend-mode")}} または {{cssxref("mix-blend-mode")}} プロパティで使用されます。
+
+## 構文
+
+`<blend-mode>` データ型は、以下に挙げたキーワードのうちの一つで定義します。
+
+### 値
+
+- `normal`
+  - : 下の色が何であるかに関わらず、上の色が最終的な色になります。
+     この効果は 2 枚の不透明の紙が重なっているようなものです。
+- `multiply`
+  - : 上の色と下の色を掛け合わせた結果が最終的な色になります。
+    黒いレイヤーは最終的に黒いレイヤーになり、白いレイヤーは変化をもたらしません。
+    この効果は 2 枚の透明なフィルムに印刷された画像を重ね合わせたようなものです。
+- `screen`
+  - : 色を反転して乗算を行い、さらに色を反転した結果が最終的な色になります。
+    黒いレイヤーは変化をもたらしません。白いレイヤーは、最終的に白いのレイヤーへ近づけます。
+    この効果は 2 枚の画像が画面に投影された状況に似ています。
+- `overlay`
+  - : 下の色が暗ければ `multiply`、下の色が明るければ `screen` の結果が最終的な色になります。
+    この混合モードは `hard-light` と同等ですが、レイヤーは逆です。
+- `darken`
+  - : 色成分ごとに最も暗い値が最終的な値になります。
+- `lighten`
+  - : 色成分ごとに最も明るい値が最終的な値になります。
+- `color-dodge`
+  - : 下の色を、反転した上の色で除算した結果が、最終的な色になります。
+    黒い前景は変化をもたらしません。背景色を反転した色を持つ前景は、完全に明るい色に導きます。
+    この混合モードは `screen` に似ていますが、完全に明るい色に近づけるためには背景色を反転した色と同程度に明るい前景が必要です。
+- `color-burn`
+  - : 反転した下の色を上の色で除算して、さらに反転した結果が最終的な色になります。
+    白い背景は変化をもたらしません。背景色を反転した色を持つ前景は、最終的に黒い画像へ近づけます。
+    この混合モードは `multiply` に似ていますが、最終的に画像を暗くするためには背景色を反転した色と同程度に暗い前景が必要です。
+- `hard-light`
+  - : 上の色が暗い色であれば `multiply` 、明るい色であれば `screen` の結果が最終的な色になります。
+    この混合モードは `overlay` と同じですが、レイヤーが入れ替わっています。
+    この効果は、背景に*強烈な*スポットライトを当てた状況に似ています。
+- `soft-light`
+  - : 最終的な色は `hard-light` に似ていますが、よりソフトになります。
+    この混合モードは `hard-light` に似ています。
+    この効果は、背景に*拡散光の*スポットライトを当てた状況に似ています。
+- `difference`
+  - : 2 つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。
+    黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。
+- `exclusion`
+  - : 最終的な色は `difference` に似ていますが、コントラストが低くなります。
+    `difference` と同様に、黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。
+- `hue`
+  - : 最終的な色は上の色の*色相*を持ちますが、*彩度*および*明度*は下の色の値を使用します。
+- `saturation`
+  - : 最終的な色は上の色の*彩度*を持ちますが、*色相*および*明度*は下の色の値を使用します。
+    彩度を持たない純粋なグレーの背景は、効果がありません。
+- `color`
+  - : 最終的な色は上の色の*色相*および*彩度*を持ちますが、*明度*は下の色の値を使用します。
+    この効果はグレーレベルを保持しており、前景に色をつけるために使用できます。
+- `luminosity`
+  - : 最終的な色は上の色の*明度*を持ちますが、*色相*および *彩度*は下の色の値を使用します。
+    この混合モードは `color` と同じですが、レイヤーが入れ替わっています。
+
+## 解説
+
+混合モードは、適用されるレイヤー間のそれぞれのピクセルにおいて前景色と背景色を取り、計算を行い、新しい色の値を返します。
+
+混合モード同士の変化は補完されません。すべての変更が直接反映されます。
+
+## 例
+
+### normal
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: normal;
+}
+```
 
-<h3 id="Values">値</h3>
+{{ EmbedLiveSample('normal', "300", "350") }}
 
-<dl>
- <dt><code id="normal">normal</code></dt>
- <dd>
- <p>下の色が何であるかに関わらず、上の色が最終的な色になります。<br>
-  この効果は 2 枚の不透明の紙が重なっているようなものです。</p>
+### multiply
 
- <div id="normal_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
-  background-blend-mode: normal;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p>
- </dd>
- <dt><code id="multiply">multiply</code></dt>
- <dd>
- <p>上の色と下の色を掛け合わせた結果が最終的な色になります。<br>
-  黒いレイヤーは最終的に黒いレイヤーに近づけ、白いレイヤーは変化をもたらしません。<br>
-  この効果は2枚の透明なフィルムに印刷された画像を重ね合わせたようなものです。</p>
-
- <div id="multiply_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
-  width: 300px;
-  height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: multiply;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p>
- </dd>
- <dt><code id="screen">screen</code></dt>
- <dd>
- <p>色を反転して乗算を行い、さらに色を反転した結果が最終的な色になります。<br>
-  黒いレイヤーは変化をもたらしません。白いレイヤーは、最終的に白いのレイヤーへ近づけます。<br>
-  この効果は2枚の画像がスクリーンに投影された状況に似ています。</p>
-
- <div id="screen_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+}
+```
+
+{{ EmbedLiveSample('multiply', "300", "350") }}
+
+### screen
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: screen;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p>
- </dd>
- <dt><code id="overlay">overlay</code></dt>
- <dd>下の色が暗ければ <code>multiply</code>、下の色が明るければ <code>screen</code> の結果が最終的な色になります。。<br>
- このブレンドモードは <code>hard-light</code> と同等ですが、レイヤーは逆です。
- <div id="overlay_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+}
+```
+
+{{ EmbedLiveSample('screen', "300", "350") }}
+
+### overlay
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: overlay;
-}</pre>
- </div>
- </div>
+}
+```
 
- <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p>
- </dd>
- <dt><code id="darken">darken</code></dt>
- <dd>
- <p>色成分ごとに最も暗い値が最終的な値になります。</p>
+{{ EmbedLiveSample('overlay', "300", "350") }}
 
- <div id="darken_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+### darken
 
- <pre class="brush: css">#div {
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: darken;
-}</pre>
- </div>
- </div>
+}
+```
+
+{{ EmbedLiveSample('darken', "300", "350") }}
 
- <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p>
- </dd>
- <dt><code id="lighten">lighten</code></dt>
- <dd>
- <p>色成分ごとに最も明るい値が最終的な値になります。</p>
+### lighten
 
- <div id="lighten_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: lighten;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p>
- </dd>
- <dt><code id="color-dodge">color-dodge</code></dt>
- <dd>
- <p>下の色を、反転した上の色で除算した結果が、最終的な色になります。<br>
-  黒い前景は変化をもたらしません。背景色を反転した色を持つ前景は、完全に明るい色に導きます。<br>
-  このブレンドモードは <code>screen</code> に似ていますが、完全に明るい色に近づけるためには背景色を反転した色と同程度に明るい前景が必要です。</p>
-
- <div id="color-dodge_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+}
+```
+
+{{ EmbedLiveSample('lighten', "300", "350") }}
+
+### color-dodge
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: color-dodge;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p>
- </dd>
- <dt><code id="color-burn">color-burn</code></dt>
- <dd>
- <p>反転した下の色を上の色で除算して、さらに反転した結果が最終的な色になります。<br>
-  白い背景は変化をもたらしません。背景色を反転した色を持つ前景は、最終的に黒い画像へ近づけます。<br>
-  このブレンドモードは <code>multiply</code> に似ていますが、最終的に画像を暗くするためには背景色を反転した色と同程度に暗い前景が必要です。</p>
-
- <div id="color-burn_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+}
+```
+
+{{ EmbedLiveSample('color-dodge', "300", "350") }}
+
+### color-burn
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: color-burn;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p>
- </dd>
- <dt><code>hard-light</code></dt>
- <dd>
- <p>上の色が暗い色であれば <code>multiply</code> 、明るい色であれば <code>screen</code> の結果が最終的な色になります。<br>
-  このブレンドモードは <code>overlay</code> と同じですが、レイヤーが入れ替わっています。<br>
-  この効果は、背景に<em>強烈な</em>スポットライトを当てた状況に似ています。</p>
-
- <div id="hard-light_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+}
+```
+
+{{ EmbedLiveSample('color-burn', "300", "350") }}
+
+### hard-light
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: hard-light;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p>
- </dd>
- <dt><code id="soft-light">soft-light</code></dt>
- <dd>
- <p>最終的な色は <code>hard-light</code> に似ていますが、よりソフトになります。<br>
-  このブレンドモードは <code>hard-light</code> に似ています。<br>
-  この効果は、背景に<em>拡散光の</em>スポットライトを当てた状況に似ています。</p>
-
- <div id="soft-light_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+}
+```
+
+{{ EmbedLiveSample('hard-light', "300", "350") }}
+
+### soft-light
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: soft-light;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p>
- </dd>
- <dt><code id="difference">difference</code></dt>
- <dd>
- <p>2 つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。<br>
-  黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。</p>
-
- <div id="difference_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+}
+```
+
+{{ EmbedLiveSample('soft-light', "300", "350") }}
+
+### difference
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: difference;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p>
- </dd>
- <dt><code id="exclusion">exclusion</code></dt>
- <dd>
- <p>最終的な色は <code>difference</code> に似ていますが、コントラストが低くなります。<br>
-  <code>difference</code> と同様に、黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。</p>
-
- <div id="exclusion_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+}
+```
+
+{{ EmbedLiveSample('difference', "300", "350") }}
+
+### exclusion
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: exclusion;
-}</pre>
- </div>
- </div>
+}
+```
 
- <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p>
- </dd>
- <dt><code id="hue">hue</code></dt>
- <dd>
- <p>最終的な色は上の色の<em>色調</em>を持ちますが、<em>彩度</em>および<em>明度</em>は下の色の値を使用します。</p>
+{{ EmbedLiveSample('exclusion', "300", "350") }}
 
- <div id="hue_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+### hue
 
- <pre class="brush: css">#div {
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background: url('br.png'),
+              url('tr.png');
   background-blend-mode: hue;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p>
- </dd>
- <dt><code id="saturation">saturation</code></dt>
- <dd>
- <p>最終的な色は上の色の<em>彩度</em>を持ちますが、<em>色調</em>および<em>明度</em>は下の色の値を使用します。<br>
-  彩度を持たない純粋なグレーの背景は、効果がありません。</p>
-
- <div id="saturation_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
-  width: 300px;
-  height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
-  background-blend-mode: saturation;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p>
- </dd>
- <dt><code id="color">color</code></dt>
- <dd>
- <p>最終的な色は上の色の<em>色調</em>および<em>彩度</em>を持ちますが、<em>明度</em>は下の色の値を使用します。<br>
-  この効果はグレーレベルを保持しており、前景に色をつけるために使用できます。</p>
-
- <div id="color_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
-  width: 300px;
-  height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
-  background-blend-mode: color;
-}</pre>
- </div>
- </div>
-
- <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p>
- </dd>
- <dt><code id="luminosity">luminosity</code></dt>
- <dd>
- <p>最終的な色は上の色の<em>明度</em>を持ちますが、<em>色調</em>および <em>彩度</em>は下の色の値を使用します。<br>
-  このブレンドモードは <code>color</code> と同じですが、レイヤーが入れ替わっています。</p>
-
- <div id="luminosity_example">
- <div class="hidden">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
-  width: 300px;
-  height: 300px;
-  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-              url('https://mdn.mozillademos.org/files/8545/tr.png');
-  background-blend-mode: luminosity;
-}</pre>
- </div>
- </div>
+}
+```
 
- <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p>
- </dd>
-</dl>
+{{ EmbedLiveSample('hue', "300", "350") }}
 
-<h2 id="Description">解説</h2>
+### saturation
 
-<p>ブレンドモードは、適用されるレイヤー間のそれぞれのピクセルにおいて前景色と背景色を取り、計算を行い、新しい色の値を返します。</p>
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: saturation;
+}
+```
 
-<p>ブレンドモード同士の変化は補完されません。すべての変更が直接反映されます。</p>
+{{ EmbedLiveSample('saturation', "300", "350") }}
 
-<h2 id="Examples">例</h2>
+### color
 
-<h3 id="Blend_mode_comparison">ブレンドモードの比較</h3>
+```html hidden
+<div id="div"></div>
+```
 
-<p>次の例の <code>&lt;div&gt;</code> には、 Firefox のロゴと線形グラデーションの 2 つの背景画像を設定してあります。その下に <code>&lt;select&gt;</code> メニューがあって <code>background-blend-mode</code> を変更することができ、それが <code>&lt;div&gt;</code> に適用されますので、様々なブレンドモードの効果を比較することができます。</p>
+```css
+#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: color;
+}
+```
 
-<h4 id="HTML">HTML</h4>
+{{ EmbedLiveSample('color', "300", "350") }}
 
-<pre class="brush: html">&lt;div&gt;&lt;/div&gt;
-&lt;p&gt;ブレンドモードを選択してください。&lt;/p&gt;
-&lt;select&gt;
-  &lt;option selected&gt;normal&lt;/option&gt;
-  &lt;option&gt;multiply&lt;/option&gt;
-  &lt;option&gt;screen&lt;/option&gt;
-  &lt;option&gt;overlay&lt;/option&gt;
-  &lt;option&gt;darken&lt;/option&gt;
-  &lt;option&gt;lighten&lt;/option&gt;
-  &lt;option&gt;color-dodge&lt;/option&gt;
-  &lt;option&gt;color-burn&lt;/option&gt;
-  &lt;option&gt;hard-light&lt;/option&gt;
-  &lt;option&gt;soft-light&lt;/option&gt;
-  &lt;option&gt;difference&lt;/option&gt;
-  &lt;option&gt;exclusion&lt;/option&gt;
-  &lt;option&gt;hue&lt;/option&gt;
-  &lt;option&gt;saturation&lt;/option&gt;
-  &lt;option&gt;color&lt;/option&gt;
-  &lt;option&gt;luminosity&lt;/option&gt;
-&lt;/select&gt;</pre>
+### luminosity
 
-<h4 id="CSS">CSS</h4>
+```html hidden
+<div id="div"></div>
+```
 
-<pre class="brush: css">div {
+```css
+#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: luminosity;
+}
+```
+
+{{ EmbedLiveSample('luminosity', "300", "350") }}
+
+<h3 id="Blend_mode_comparison">混合モードの比較</h3>
+
+次の例の `<div>` には、 Firefox のロゴと線形グラデーションの 2 つの背景画像を設定してあります。その下に `<select>` メニューがあって `background-blend-mode` を変更することができ、それが `<div>` に適用されますので、様々な混合モードの効果を比較することができます。
+
+#### HTML
+
+```html
+<div></div>
+<p>混合モードを選択してください。</p>
+<select>
+  <option selected>normal</option>
+  <option>multiply</option>
+  <option>screen</option>
+  <option>overlay</option>
+  <option>darken</option>
+  <option>lighten</option>
+  <option>color-dodge</option>
+  <option>color-burn</option>
+  <option>hard-light</option>
+  <option>soft-light</option>
+  <option>difference</option>
+  <option>exclusion</option>
+  <option>hue</option>
+  <option>saturation</option>
+  <option>color</option>
+  <option>luminosity</option>
+</select>
+```
+
+#### CSS
+
+```css
+div {
   width: 300px;
   height: 300px;
   background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center,
   linear-gradient(to bottom, blue, orange);
-}</pre>
+}
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">const selectElem = document.querySelector('select');
+```js
+const selectElem = document.querySelector('select');
 const divElem = document.querySelector('div');
 
-selectElem.addEventListener('change', () =&gt; {
+selectElem.addEventListener('change', () => {
   divElem.style.backgroundBlendMode = selectElem.value;
-});</pre>
+});
+```
 
-<h4 id="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample('Blend_mode_comparison', '100%', 370)}}</p>
+{{EmbedLiveSample('Blend_mode_comparison', '100%', 400)}}
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
-   <td>{{ Spec2('Compositing') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>このデータ型を使用するプロパティ: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li>
-</ul>
+- このデータ型を使用するプロパティ: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}
 
-<p>様々なブレンドモードの他のウェブサイトにおける解説</p>
+様々な混合モードの他のウェブサイトにおける解説:
 
-<ul>
- <li>Wikipedia の<a href="https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AC%E3%83%B3%E3%83%89%E3%83%A2%E3%83%BC%E3%83%89">ブレンドモード</a>の記事</li>
- <li><a href="https://helpx.adobe.com/jp/photoshop/using/blending-modes.html">Adobe Photoshop における描画モード</a> (Adobe)</li>
-</ul>
+- Wikipedia の[ブレンドモード](https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AC%E3%83%B3%E3%83%89%E3%83%A2%E3%83%BC%E3%83%89)の記事
+- [Adobe Photoshop における描画モード](https://helpx.adobe.com/jp/photoshop/using/blending-modes.html) (Adobe)
diff --git a/files/ja/web/css/blend-mode/tr.png b/files/ja/web/css/blend-mode/tr.png
new file mode 100644
index 0000000000..a6e0f81eaf
--- /dev/null
+++ b/files/ja/web/css/blend-mode/tr.png
diff --git a/files/ja/web/css/compositing_and_blending/index.md b/files/ja/web/css/compositing_and_blending/index.md
index 42cf85122a..3b7a0a610d 100644
--- a/files/ja/web/css/compositing_and_blending/index.md
+++ b/files/ja/web/css/compositing_and_blending/index.md
@@ -3,70 +3,44 @@ title: 合成と混合
 slug: Web/CSS/Compositing_and_Blending
 tags:
   - CSS
-  - リファレンス
   - 合成と混合
+  - ガイド
   - 概要
+  - リファレンス
 translation_of: Web/CSS/Compositing_and_Blending
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><ruby><strong>合成と混合</strong><rp> (</rp><rt>Compositing and Blending</rt><rp>) </rp></ruby>は CSS モジュールの一つで、様々な要素のシェイプを単一の画像に合成する方法を定義します。</p>
+**合成と混合** (Compositing and Blending) は CSS モジュールの一つで、様々な要素のシェイプを単一の画像に合成する方法を定義します。
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="Properties" name="Properties">プロパティ</h3>
+### プロパティ
 
-<div class="index">
-<ul>
- <li>{{cssxref("background-blend-mode")}}</li>
- <li>{{cssxref("isolation")}}</li>
- <li>{{cssxref("mix-blend-mode")}}</li>
-</ul>
-</div>
+- {{cssxref("background-blend-mode")}}
+- {{cssxref("isolation")}}
+- {{cssxref("mix-blend-mode")}}
 
-<h3 id="Data_types" name="Data_types">データ型</h3>
+### データ型
 
-<div class="index">
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
-</ul>
-</div>
+- {{cssxref("&lt;blend-mode&gt;")}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Compositing")}}</td>
-   <td>{{Spec2("Compositing")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+| 仕様書                      | 状態                     | 備考     |
+| --------------------------- | ------------------------ | -------- |
+| {{SpecName("Compositing")}} | {{Spec2("Compositing")}} | 初回定義 |
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<h3 id="background-blend-mode_プロパティ"><code>background-blend-mode</code> プロパティ</h3>
+### `background-blend-mode` プロパティ
 
-<div>
-<p>{{Compat("css.properties.background-blend-mode")}}</p>
-</div>
+{{Compat("css.properties.background-blend-mode")}}
 
-<h3 id="isolation_プロパティ"><code>isolation</code> プロパティ</h3>
+### `isolation` プロパティ
 
-<div>
-<p>{{Compat("css.properties.isolation")}}</p>
-</div>
+{{Compat("css.properties.isolation")}}
 
-<h3 id="mix-blend-mode_プロパティ"><code>mix-blend-mode</code> プロパティ</h3>
+### `mix-blend-mode` プロパティ
 
-<div>
-<p>{{Compat("css.properties.mix-blend-mode")}}</p>
-</div>
+{{Compat("css.properties.mix-blend-mode")}}
diff --git a/files/ja/web/css/isolation/index.md b/files/ja/web/css/isolation/index.md
index 5074d09743..e9df8116e3 100644
--- a/files/ja/web/css/isolation/index.md
+++ b/files/ja/web/css/isolation/index.md
@@ -5,58 +5,72 @@ tags:
   - CSS
   - CSS プロパティ
   - 合成と混合
+  - NeedsContent
+  - isolation
+  - recipe:css-property
+browser-compat: css.properties.isolation
 translation_of: Web/CSS/isolation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>isolation</code></strong> プロパティは、要素が新しい{{glossary("stacking context", "重ね合わせコンテキスト")}}を生成する必要があるかどうかを定義します。</p>
+[CSS](/ja/docs/Web/CSS) の **`isolation`** プロパティは、要素が新しい{{glossary("stacking context", "重ね合わせコンテキスト")}}を生成する必要があるかどうかを定義します。
 
-<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div>
+{{EmbedInteractiveExample("pages/css/isolation.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+このプロパティは {{cssxref("mix-blend-mode")}} との組み合わせで使用すると特に有用です。
 
-<p>このプロパティは {{cssxref("mix-blend-mode")}} との組み合わせで使用すると特に有用です。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 isolation: auto;
 isolation: isolate;
 
 /* グローバル値 */
 isolation: inherit;
 isolation: initial;
+isolation: revert;
 isolation: unset;
-</pre>
+```
+
+`isolation` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。
 
-<p><code>isolation</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `auto`
+  - : 何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。
+- `isolate`
+  - : 新しい重ね合わせコンテキストが必ず作成されます。
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。</dd>
- <dt><code>isolate</code></dt>
- <dd>新しい重ね合わせコンテキストが必ず作成されます。</dd>
-</dl>
+## Formal definition
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## Formal syntax
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+<h3 id="Forcing_a_new_stacking_context_for_an_element">要素で強制的に新しい重ね合わせコンテキストを生成</h3>
 
-<pre class="brush: html">&lt;div id="b" class="a"&gt;
-  &lt;div id="d"&gt;
-    &lt;div class="a c"&gt;auto&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div id="e"&gt;
-    &lt;div class="a c"&gt;isolate&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+#### HTML
 
-<pre class="brush: css">.a {
+```html
+<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+```
+
+#### CSS
+
+```css
+.a {
   background-color: rgb(0,255,0);
 }
 #b {
@@ -75,38 +89,22 @@ isolation: unset;
 }
 #e {
   isolation: isolate;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Examples', 230, 230) }}</p>
+#### 結果
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{ EmbedLiveSample('Forcing_a_new_stacking_context_for_an_element', 230, 230) }}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Compositing', '#isolation', 'Isolation') }}</td>
-   <td>{{ Spec2('Compositing') }}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.isolation")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li>
-</ul>
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}
diff --git a/files/ja/web/css/mix-blend-mode/index.md b/files/ja/web/css/mix-blend-mode/index.md
index cd76be032c..9b9adbe7c3 100644
--- a/files/ja/web/css/mix-blend-mode/index.md
+++ b/files/ja/web/css/mix-blend-mode/index.md
@@ -2,24 +2,25 @@
 title: mix-blend-mode
 slug: Web/CSS/mix-blend-mode
 tags:
+  - 混合
   - CSS
   - CSS プロパティ
-  - ウェブ
-  - リファレンス
+  - 合成
   - 合成と混合
+  - recipe:css-property
+browser-compat: css.properties.mix-blend-mode
 translation_of: Web/CSS/mix-blend-mode
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mix-blend-mode</code></strong> プロパティは、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。</p>
+**`mix-blend-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>
+{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
 
-<p class="hidden">このインタラクティブデモのソースは GitHub のリポジトリに格納されています。インタラクティブデモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送ってください。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css">/* キーワード値 */
+```css
+/* キーワード値 */
 mix-blend-mode: normal;
 mix-blend-mode: multiply;
 mix-blend-mode: screen;
@@ -40,434 +41,441 @@ mix-blend-mode: luminosity;
 /* グローバル値 */
 mix-blend-mode: initial;
 mix-blend-mode: inherit;
+mix-blend-mode: revert;
 mix-blend-mode: unset;
-</pre>
+```
+
+### 値
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+  - : 適用する混合モードを表す {{cssxref("&lt;blend-mode&gt;")}} です。
 
-<h3 id="Values" name="Values">値</h3>
+## Formal definition
 
-<dl>
- <dt><code>&lt;blend-mode&gt;</code></dt>
- <dd>適用する混合モードを表す {{cssxref("&lt;blend-mode&gt;")}} です。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## Formal syntax
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
-
-<div class="hidden" id="mix-blend-mode">
-<pre class="brush: html">&lt;div class="grid"&gt;
-  &lt;div class="col"&gt;
-    &lt;div class="note"&gt;Blending in isolation (no blending with the background)&lt;/div&gt;
-    &lt;div class="row isolate"&gt;
-      &lt;div class="cell"&gt; normal
-        &lt;div class="container normal"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;defs&gt;
-                &lt;linearGradient id="red"&gt;
-                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
-                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
-                &lt;/linearGradient&gt;
-                &lt;linearGradient id="green"&gt;
-                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
-                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
-                &lt;/linearGradient&gt;
-                &lt;linearGradient id="blue"&gt;
-                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
-                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
-                &lt;/linearGradient&gt;
-              &lt;/defs&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; multiply
-        &lt;div class="container multiply"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; darken
-        &lt;div class="container darken"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; screen
-        &lt;div class="container screen"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; lighten
-        &lt;div class="container lighten"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; overlay
-        &lt;div class="container overlay"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color-dodge
-        &lt;div class="container color-dodge"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color-burn
-        &lt;div class="container color-burn"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; hard-light
-        &lt;div class="container hard-light"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; soft-light
-        &lt;div class="container soft-light"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; difference
-        &lt;div class="container difference"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; exclusion
-        &lt;div class="container exclusion"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; hue
-        &lt;div class="container hue"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; saturation
-        &lt;div class="container saturation"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color
-        &lt;div class="container color"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; luminosity
-        &lt;div class="container luminosity"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;Blending globally (blend with the background)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; normal
-        &lt;div class="container normal"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; multiply
-        &lt;div class="container multiply"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; darken
-        &lt;div class="container darken"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; screen
-        &lt;div class="container screen"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; lighten
-        &lt;div class="container lighten"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; overlay
-        &lt;div class="container overlay"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color-dodge
-        &lt;div class="container color-dodge"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color-burn
-        &lt;div class="container color-burn"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; hard-light
-        &lt;div class="container hard-light"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; soft-light
-        &lt;div class="container soft-light"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; difference
-        &lt;div class="container difference"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; exclusion
-        &lt;div class="container exclusion"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; hue
-        &lt;div class="container hue"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; saturation
-        &lt;div class="container saturation"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color
-        &lt;div class="container color"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; luminosity
-        &lt;div class="container luminosity"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css">html,body {
+## 例
+
+<h3 id="Effect_of_different_mix-blend-mode_values">mix-blend-mode の様々な値の効果</h3>
+
+```html hidden
+<div class="grid">
+  <div class="col">
+    <div class="note">Blending in isolation (no blending with the background)</div>
+    <div class="row isolate">
+      <div class="cell"> normal
+        <div class="container normal">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <defs>
+                <linearGradient id="red">
+                  <stop offset="0"    stop-color="hsl(0,100%,50%)" />
+                  <stop offset="100%" stop-color="hsl(0,0%,100%)" />
+                </linearGradient>
+                <linearGradient id="green">
+                  <stop offset="0"    stop-color="hsl(120,100%,50%)" />
+                  <stop offset="100%" stop-color="hsl(120,0%,100%)" />
+                </linearGradient>
+                <linearGradient id="blue">
+                  <stop offset="0"    stop-color="hsl(240,100%,50%)" />
+                  <stop offset="100%" stop-color="hsl(240,0%,100%)" />
+                </linearGradient>
+              </defs>
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> multiply
+        <div class="container multiply">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> darken
+        <div class="container darken">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> screen
+        <div class="container screen">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> lighten
+        <div class="container lighten">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> overlay
+        <div class="container overlay">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color-dodge
+        <div class="container color-dodge">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color-burn
+        <div class="container color-burn">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> hard-light
+        <div class="container hard-light">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> soft-light
+        <div class="container soft-light">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> difference
+        <div class="container difference">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> exclusion
+        <div class="container exclusion">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> hue
+        <div class="container hue">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> saturation
+        <div class="container saturation">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color
+        <div class="container color">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> luminosity
+        <div class="container luminosity">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">Blending globally (blend with the background)</div>
+    <div class="row">
+      <div class="cell"> normal
+        <div class="container normal">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> multiply
+        <div class="container multiply">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> darken
+        <div class="container darken">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> screen
+        <div class="container screen">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> lighten
+        <div class="container lighten">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> overlay
+        <div class="container overlay">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color-dodge
+        <div class="container color-dodge">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color-burn
+        <div class="container color-burn">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> hard-light
+        <div class="container hard-light">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> soft-light
+        <div class="container soft-light">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> difference
+        <div class="container difference">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> exclusion
+        <div class="container exclusion">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> hue
+        <div class="container hue">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> saturation
+        <div class="container saturation">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color
+        <div class="container color">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> luminosity
+        <div class="container luminosity">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css hidden
+html,body {
   height: 100%;
   box-sizing: border-box;
   background: #EEE;
@@ -559,20 +567,27 @@ mix-blend-mode: unset;
 .hue .item         { mix-blend-mode: hue; }
 .saturation .item  { mix-blend-mode: saturation; }
 .color .item       { mix-blend-mode: color; }
-.luminosity .item  { mix-blend-mode: luminosity; }</pre>
-</div>
+.luminosity .item  { mix-blend-mode: luminosity; }
+```
 
-<div>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</div>
+{{EmbedLiveSample("Effect_of_different_mix-blend-mode_values", "100%", 1600, "", "", "example-outcome-frame")}}
 
-<h3 id="HTML_example" name="HTML_example">HTML の例</h3>
+<h3 id="Using_mix-blend-mode_with_HTML">HTML での mix-blend-mode の使用</h3>
 
-<pre class="brush: html">&lt;div class="isolate"&gt;
-  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
-  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
-  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+#### HTML
 
-<pre class="brush: css">.circle {
+```html
+<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+```
+
+#### CSS
+
+```css
+.circle {
   width: 80px;
   height: 80px;
   border-radius: 50%;
@@ -596,58 +611,49 @@ mix-blend-mode: unset;
 }
 
 .isolate {
-  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  isolation: isolate; /* isolation がないと、背景色が考慮されてしまう */
   position: relative;
-}</pre>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Using_mix-blend-mode_with_HTML", "100%", "180")}}
 
-<p>{{EmbedLiveSample("HTML_example", "100%", "180")}}</p>
+<h3 id="Using_mix-blend-mode_with_SVG">SVG での mix-blend-mode の使用</h3>
 
-<h3 id="SVG_example" name="SVG_example">SVG の例</h3>
+#### SVG
 
-<p>This example reproduces the previous example using SVG.</p>
+```html
+<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+```
 
-<pre class="brush: html">&lt;svg&gt;
-  &lt;g class="isolate"&gt;
-    &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
-    &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
-    &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
-  &lt;/g&gt;
-&lt;/svg&gt;</pre>
+#### CSS
 
-<pre class="brush:css">circle { mix-blend-mode: screen; }
+```css
+circle { mix-blend-mode: screen; }
 .isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
-</pre>
+```
 
-<p>{{EmbedLiveSample("SVG_example", "100%", "180")}}</p>
+#### 結果
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{EmbedLiveSample("Using_mix-blend-mode_with_SVG", "100%", "180")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td>
-   <td>{{ Spec2('Compositing') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("background-blend-mode")}}</li>
-</ul>
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("background-blend-mode")}}