コーディングを行うにあたってPSDやAIで作られたデザインをチェックしている際に、レイヤーに「乗算」や「スクリーン」が使われていて悩んだ経験がある方も多いのではないでしょうか。

今までCSSでコーディングするときには複数のレイヤーをまとめて画像で書き出したりとちょっとひと手間かける必要がありましたが、レガシーブラウザ（主にIE11）がサポート外となりブレンドモードをCSSで再現できるプロパティ「mix-blend-mode」を使える機会が増えてきました。

今回はmix-blend-modeの基本的な使い方をご紹介します。

ブレンドモードとは

まずはブレンドモードのおさらいです。Wikipediaから引用しますと

となっています。これを利用することでレイヤーが重なり合った時の表現を操作することができます。

Photoshopだと上記のようにレイヤーパネルから設定を変更できます。

具体的にはRGBの3つの値を比較・計算してレイヤー間の色が決まりますが、説明が長くなるのでここでは割愛します。

CSS mix-blend-modeとは

「mix-blend-mode」はCSS3で使えるようになったプロパティの1つで、名前通り、ブレンドモードを表現するためのプロパティです。

Photoshop等のソフトと同じように、重なる要素（上に乗る要素）に対してプロパティを指定します。指定できる値はデフォルトの normal を含めて全部で16種類あります。

先述しましたが、当記事公開時点ではIE11を除くモダンブラウザで利用可能です。

CSS mix-blend-modeの使い方

実際にプロパティ値を指定して確認します。

画像の中央に背景色を指定した文字が配置されるようにレイアウトを作成します。

これで下記のような見た目になります。

背景色を指定している  .txt  にmix-blend-modeプロパティにnormal以外の値を指定して効果を確認します。

弊社でデザインを作成する際に使われることの多い「乗算」「スクリーン」「オーバーレイ」「ハードライト」「焼き込み」の5種類で試してみました。

乗算

.txt { mix-blend-mode: multiply; }

1 2 3

.txt {     mix-blend-mode: multiply; }

スクリーン

.txt { mix-blend-mode: screen; }

1 2 3

.txt {     mix-blend-mode: screen; }

オーバーレイ

.txt { mix-blend-mode: overlay; }

1 2 3

.txt {     mix-blend-mode: overlay; }

ハードライト

.txt { mix-blend-mode: hard-light; }

1 2 3

.txt {     mix-blend-mode: hard-light; }

焼き込み

.txt { mix-blend-mode: color-burn; }

1 2 3

.txt {     mix-blend-mode: color-burn; }

それぞれのブレンドモードが反映され、背景色や文字色が変化しているのがわかります。

さいごに

CSSのmix-blend-modeについて簡単にご紹介しました。今回は  background  プロパティでべた塗りにした要素を例に説明しましたが、写真同士を重ね合わせてブレンドモードを指定したりと色々応用して利用することができます。

コーディングの幅を広げるためにも使い方をしっかりおさえておきましょう。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

なかもと

ソリューション事業部 マークアップエンジニア

企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。

最新記事 by なかもと (全て見る)

• CSSのfilterプロパティを利用して簡単なフィルターを画像に追加しよう - 2021年10月8日
• CSS mix-blend-modeを利用してブレンドモードをキレイに再現しよう - 2021年9月22日
• CSS Grid Layoutを利用して2次元レイアウトを自由自在に操作する - 2021年7月19日
• CSS変数（カスタムプロパティ）を利用してコーディングを効率化しよう（入門編） - 2021年5月24日
• Adobe XDのプラグイン開発を簡単に始めるツール「xdpm」試してみた - 2021年2月2日