Contents - 目次
CSSブレンドモード。
PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。
「描画モード」は英語では「Blend Mode（ブレンドモード）」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。
そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。
mix-blend-modeのレイヤー構造。
2枚（画像×テキスト）、3枚（画像×画像×テキスト）以上を重ねることも可能。
PhotoshopやFigmaの場合は上のレイヤーにブレンドを指定するが、CSSの場合は下のレイヤーに指定する。
レイヤーとは「層」のことで、例えばこの洋服が積み重なった層の中でくつろぐ愛くるしいわんちゃんみたいな感じだ。わんちゃんと服自体はブレンドされないが、温度や匂いはブレンドされるだろう。
Photo by Sdf Rahbar
ブレンドモード（mix-blend-mode）の実装例。
例）
img要素の後のp要素にブレンドモードを指定する。
HTML
画像×テキストの場合。
（※img要素とp要素の計2枚をブレンド。）
<div class="blend_box">
<img src="example.jpg" alt="例">
<p class="normal">normal（通常）</p>
</div><!--blend_box-->
画像×画像×テキストの場合。
（※img要素２つととp要素の計3枚をブレンド。）
<div class="blend_box">
<img src="example.jpg" alt="例">
<img src="example_02.jpg" alt="例">
<p class="normal">normal（通常）</p>
</div><!--blend_box-->
mix-blend-mode
以下、上記のHTMLへ、CSSのmix-blend-modeを適用させた結果の一覧。
normal（通常）。
CSS
（※見やすくするために、画像とテキストの位置は別途のCSSで指定しています。）
（※ブラウザがダークモードの場合、文字色はダークモードが優先されることがあります。）
.normal {
mix-blend-mode: normal;
}
画像とテキスト（画像×テキスト）のブレンドモードが「通常」の場合。
normal
（通常）
normal
（通常）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「通常」の場合。
normal（通常）
normal（通常）は初期値。ブレンドはされず、２番目３番目の要素（2枚目のimgと3番目のpタグ）がそのまま上に重なる。
multiply（乗算）。
CSS
.multiply {
mix-blend-mode: multiply;
}
画像とテキスト（画像×テキスト）のブレンドモードが「乗算」の場合。
multiply
（乗算）
multiply
（乗算）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「乗算」の場合。
multiply（乗算）
文字通り、画像やテキストの色が掛け合わせられる。
（※今回の画像では、ちょっとだけbanksy（バンクシー）風の、壁に塗った絵のような結果になる。）
screen（スクリーン）。
CSS
.screen {
mix-blend-mode: screen;
}
画像とテキスト（画像×テキスト）のブレンドモードが「スクリーン」の場合。
screen
（スクリーン）
screen
（スクリーン）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「スクリーン」の場合。
screen（スクリーン）
白が多い画像に白いテキストなので、スクリーンでは明るくなりすぎる。
以下、それぞれのモードでの描画の結果。
overlay（オーバーレイ）。
CSS
.overlay {
mix-blend-mode: overlay;
}
画像とテキスト（画像×テキスト）のブレンドモードが「オーバーレイ」の場合。
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「オーバーレイ」の場合。
darken（暗く）。
CSS
.darken {
mix-blend-mode: darken;
}
画像とテキスト（画像×テキスト）のブレンドモードが「暗く」の場合。
darken
（暗く）
darken
（暗く）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「暗く」の場合。
darken（暗く）
lighten（明るく）。
CSS
.lighten {
mix-blend-mode: lighten;
}
画像とテキスト（画像×テキスト）のブレンドモードが「明るく」の場合。
lighten
（明るく）
lighten
（明るく）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「明るく」の場合。
lighten（暗く）
color-dodge（覆い焼き カラー）。
CSS
.color-dodge {
mix-blend-mode: color-dodge;
}
画像とテキスト（画像×テキスト）のブレンドモードが「覆い焼き カラー」の場合。
color-dodge
（覆い焼き カラー）
color-dodge
（覆い焼き カラー）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「覆い焼き カラー」の場合。
color-dodge（覆い焼き カラー）
color-burn（焼き込み カラー）。
CSS
.color-burn {
mix-blend-mode: color-burn;
}
画像とテキスト（画像×テキスト）のブレンドモードが「焼き込み カラー」の場合。
color-burn
（焼き込み カラー）
color-burn
（焼き込み カラー）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「焼き込み カラー」の場合。
color-burn（焼き込み カラー）
hard-light（ハードライト）。
CSS
.hard-light {
mix-blend-mode: hard-light;
}
画像とテキスト（画像×テキスト）のブレンドモードが「ハードライト」の場合。
hard-light
（ハードライト）
hard-light
（ハードライト）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「ハードライト」の場合。
hard-light（ハードライト）
soft-light（ソフトライト）。
CSS
.soft-light {
mix-blend-mode: soft-light;
}
画像とテキスト（画像×テキスト）のブレンドモードが「ソフトライト」の場合。
soft-light
（ソフトライト）
soft-light
（ソフトライト）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「ソフトライト」の場合。
soft-light（ソフトライト）
difference（差の絶対値）。
CSS
.difference {
mix-blend-mode: difference;
}
画像とテキスト（画像×テキスト）のブレンドモードが「差の絶対値」の場合。
difference
（差の絶対値）
difference
（差の絶対値）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「差の絶対値」の場合。
difference（差の絶対値）
exclusion（除外）。
CSS
.exclusion {
mix-blend-mode: exclusion;
}
画像とテキスト（画像×テキスト）のブレンドモードが「除外」の場合。
exclusion
（除外）
exclusion
（除外）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「除外」の場合。
exclusion（除外）
hue（色相）。
CSS
.hue {
mix-blend-mode: hue;
}
画像とテキスト（画像×テキスト）のブレンドモードが「色相」の場合。
hue
（色相）
hue
（色相）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「色相」の場合。
hue（色相）
saturation（彩度）。
CSS
.saturation {
mix-blend-mode: saturation;
}
画像とテキスト（画像×テキスト）のブレンドモードが「彩度」の場合。
saturation
（彩度）
saturation
（彩度）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「彩度」の場合。
saturation（彩度）
color（カラー）。
CSS
.color {
mix-blend-mode: color;
}
画像とテキスト（画像×テキスト）のブレンドモードが「カラー」の場合。
color
（カラー）
color
（カラー）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「カラー」の場合。
color（カラー）
luminosity（輝度）。
CSS
.luminosity {
mix-blend-mode: luminosity;
}
画像とテキスト（画像×テキスト）のブレンドモードが「輝度」の場合。
luminosity
（輝度）
luminosity
（輝度）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「輝度」の場合。
luminosity（輝度）
ブレンドモード（mix-blend-mode）の一覧。
mix-blend-modeは現時点（2022年11月現在）では以下の16種類が用意されている。
（※順番はわかりやすいように便宜上に付与。特に決まりはない。）
- mix-blend-mode: normal; （通常）
- mix-blend-mode: multiply; （乗算）
- mix-blend-mode: screen; （スクリーン）
- mix-blend-mode: overlay; （オーバーレイ）
- mix-blend-mode: darken; （暗く）
- mix-blend-mode: lighten; （明るく）
- mix-blend-mode: color-dodge; （覆い焼き カラー）
- mix-blend-mode: color-burn; （焼き込み カラー）
- mix-blend-mode: hard-light; （ハードライト）
- mix-blend-mode: soft-light; （ソフトライト）
- mix-blend-mode: difference; （差の絶対値）
- mix-blend-mode: exclusion; （除外）
- mix-blend-mode: hue; （色相）
- mix-blend-mode: saturation; （彩度）
- mix-blend-mode: color; （カラー）
- mix-blend-mode: luminosity; （輝度）
引用元サイト：mix-blend-mode – CSS: カスケーディングスタイルシート | MDN
色相・彩度・明度もCSSで。
ちなみに、やはりかつてはPhotoshopで行っていた色相・彩度・明度の調整も、すでにCSSだけで可能となっている。
CSSで調整するメリットしては…
- ブラウザに組み込まれた状態で調整できるので、修正や調整がしやすい。
- クラスセレクタや子孫セレクタの活用により、画像をまとめて一括指定でき、統一感も出しやすい。
- などがある。
関連：CSS filter。色相・彩度・明度？ filterプロパティでできること。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
井川 宜久 / Norihisa Igawa
CSS 関連メモ。
- CSSの一部が効かないときは、キャッシュやダークモードが原因かも。
- first-letterが効かないとき。覚えると便利なCSS擬似要素。
- rgb()で透明度も。CSSの新しい色指定と使い方の例。
- CSSでダークモード。prefers-color-schemeの使い方と効かないとき。
- CSSで縦書き。writing-modeの使い方。効かないときは？
- scroll-snap-typeの使い方。CSSでカルーセル。効かないときは？
- CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ？
- CSS gapの使い方？Flexboxでレスポンシブ？効かないときは？
- CSSの変数と関数。覚えておくと便利なCSSプログラミング。
- CSS aspect-ratioの使い方。効かないときはどうする？
- text-overflowの使い方。CSSで文字数を制御。効かないときは？
- detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。
- CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。
- counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。
- CSS フォントサイズはどうする？ remの基本かつ効果的な使い方。
- line-clampの使い方。CSSで複数行指定。効かないときは？
- CSSの@whenと@else。新しいブレイクポイントの設定方法？
- 縁取り文字はCSSのtext-strokeで可能。（非推奨の時代は終わり。）
- CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。
- CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。
- CSS カラーコードで透明度を指定したいとき。（16進数6つ+2つで。）
- CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。
- CSSのobject-fitの使い方。トリミングやサイズの実装例。
- backgroundの複数指定が効かない時の確認事項。（CSSアニメーションとの組み合わせ。）
- CSS filterで色変更。色相・彩度・明度？ filterプロパティでできること。
- CSS position: stickyの使い方。効かない！ときはここをチェック。