diff options
Diffstat (limited to 'files/ja/web/css/blend-mode/index.md')
| -rw-r--r-- | files/ja/web/css/blend-mode/index.md | 459 |
1 files changed, 459 insertions, 0 deletions
diff --git a/files/ja/web/css/blend-mode/index.md b/files/ja/web/css/blend-mode/index.md new file mode 100644 index 0000000000..1425d46207 --- /dev/null +++ b/files/ja/web/css/blend-mode/index.md @@ -0,0 +1,459 @@ +--- +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><blend-mode></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><blend-mode></code> データ型は、以下に挙げたキーワードのうちの一つで定義します。</p> + +<h3 id="Values">値</h3> + +<dl> + <dt><code id="normal">normal</code></dt> + <dd> + <p>下の色が何であるかに関わらず、上の色が最終的な色になります。<br> + この効果は 2 枚の不透明の紙が重なっているようなものです。</p> + + <div id="normal_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></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: 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"><div id="div"></div></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: 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"><div id="div"></div></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: 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"><div id="div"></div></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: overlay; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p> + </dd> + <dt><code id="darken">darken</code></dt> + <dd> + <p>色成分ごとに最も暗い値が最終的な値になります。</p> + + <div id="darken_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></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: darken; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p> + </dd> + <dt><code id="lighten">lighten</code></dt> + <dd> + <p>色成分ごとに最も明るい値が最終的な値になります。</p> + + <div id="lighten_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></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: 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"><div id="div"></div></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-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"><div id="div"></div></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-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"><div id="div"></div></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: 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"><div id="div"></div></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: 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"><div id="div"></div></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: 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"><div id="div"></div></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: 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> + + <div id="hue_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></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: 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"><div id="div"></div></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"><div id="div"></div></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"><div id="div"></div></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> + +<h2 id="Description">解説</h2> + +<p>ブレンドモードは、適用されるレイヤー間のそれぞれのピクセルにおいて前景色と背景色を取り、計算を行い、新しい色の値を返します。</p> + +<p>ブレンドモード同士の変化は補完されません。すべての変更が直接反映されます。</p> + +<h2 id="Examples">例</h2> + +<h3 id="Blend_mode_comparison">ブレンドモードの比較</h3> + +<p>次の例の <code><div></code> には、 Firefox のロゴと線形グラデーションの 2 つの背景画像を設定してあります。その下に <code><select></code> メニューがあって <code>background-blend-mode</code> を変更することができ、それが <code><div></code> に適用されますので、様々なブレンドモードの効果を比較することができます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: 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> + +<pre class="brush: js">const selectElem = document.querySelector('select'); +const divElem = document.querySelector('div'); + +selectElem.addEventListener('change', () => { + divElem.style.backgroundBlendMode = selectElem.value; +});</pre> + +<h4 id="Result">結果</h4> + +<p>{{EmbedLiveSample('Blend_mode_comparison', '100%', 370)}}</p> + +<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', '<blend-mode>') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>このデータ型を使用するプロパティ: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li> +</ul> + +<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> |