実践
前編 ブレンドモードの仕様

このシリーズではCSSのブレンドモードを利用したヒーローエリアの実装について解説します。この実装は、リニューアルしたピクセルグリッドコーポレートサイトのヒーローエリアに使われています。PhotoshopやIllustratorの機能として見かけるようなさまざまなモードでのブレンドがCSSで実現できます。

2016年07月14日発行

目次

デザインの意図

まずは、なぜブレンドモードを使用することになったのか、簡単に経緯をお話ししましょう。ピクセルグリッドのコーポレートサイトをリニューアルすることになり、社内デザイナーの小原がデザインを担当しました。

コーポレートサイトは、ピクセルグリッドらしいシンプルなデザインが基調となっています。ですが、シンプルすぎて、サイト全体の印象が弱くならないように、また全体のコントラスト不足を補うために、今までのピクセルグリッドのコーポーレートサイトにはなかった「ヒーローエリア」のデザインが提示されました。

リニューアル後のヒーローエリア

リニューアル後のヒーローエリア

デザインされたIllustratorファイルを見てみると、グラデーションに重なっている白い模様に、描画モード(オーバーレイ)が適用されていました。

ひと昔前であれば、こういったオーバーレイなどの描画モードが使用されていると、CSSではどうにもならず、画像をうまい具合に書き出す必要がありました。実装する側は、ちょっと苦い顔をせざるをえません。

ですが、現在では、最近のブラウザをターゲットにして良いのであれば、mix-blend-modebackground-blend-modeというプロパティを使用することで、描画モードを扱うことができるようになりました。

ピクセルグリッドのサイトは、ところどころに比較的新しい技術を使った実装が行われています。そういった新しい技術をさりげなく取り入れるのも、ピクセルグリッドという会社の特徴をうまく表現してくれそうです。そこで、ヒーローエリアの画像表現にはmix-blend-modeを使った実装を取り入れることにしました。

模様がオーバーレイでグラデーションと合成されている

デザインを見てどのように実装するか考える

そもそも、デザインを作成していく過程で、小原からは「mix-blend-modeは使っても大丈夫そうか?」という相談はされていました。

実装方法を考えるにあたって、まず、小原が作成したデザインと、それに記載された指示をどのように実現するかを検討しました。

小原が作成したデザインと指示

ヒーローエリアの高さや色指定などが細かく指定されている(大きい画像

デザイナーからの指定

デザインと細かい指示をみると、以下の3つの要件を満たす実装をする必要がありました。

  1. グラデーションは2種類。それぞれヒーローエリアの上部と下部に利用する
  2. 画像(SVG)と、グラーデーションを合成した表現をする。合成のブレンドモードにオーバーレイを使用する
  3. もしブレンドモードが使えない場合は、SVGの不透明度を調整して、グラデーションと重ねる

上記の条件を満たしつつ実装するために筆者が考えた仕様は次のようなものです。いくつかの要素を組み合わせて、実装していこうと考えました。

SVGと2つのグラデーション

SVGと2つのグラデーション

まずは、1つの要素にグラデーションを2つ描画する方法と、ブレンドモードについて解説し、SVGとグラデーションを合成する部分について解説します。

なお、以降で紹介するコードは次のリポジトリにまとめてあります。

CSSブレンドモードの利用 サンプルコード

1つの要素に2種類のグラデーションを敷く

まずは、1つめの要件です。1つの要素に2種類のグラデーションを敷きます。

デザイナーからは、特に「1つの要素でなくてはいけない」とは言われてはいませんが、なるべく少ないマークアップで実現したいので1つとしました。ここでは、解説のために、サイトで使用したコードを簡略化して解説します。

ヒーローエリア用のdiv要素です。

<div class="hero"></div>

CSSは、次のように指定します。

2種類の線形グラデーションの指定
.hero {
  width: 100%;
  height: 200px;
  background-image:
    /* 赤いグラデーション */
    linear-gradient(to right, #594b14 0, #591532 100%),
    /* 青いグラデーション */
    linear-gradient(to right, #37124d 0, #145951 100%);
  background-repeat: no-repeat;
  background-size: 100% 100px;
  background-position: 0 100px, 0 0;
}

グラデーションを複数指定し、それぞれの幅と高さをbackground-sizeで調整します。そして、background-positionで縦位置を100px移動します。これで1つの要素にグラデーションを2つ表示することができました。

上下に異なる線形グラデーションを表示する

これといって難しいことはないかと思います。なるべくヒーローエリアの高さの変化にも対応できるよう相対的に配置したい場合は、次のような書き方もできます。

2種類の線形グラデーションの指定(相対的な配置)
.hero {
  width: 100%;
  height: 200px;
  background-image:
    /* 赤いグラデーション */
    linear-gradient(to right, #594b14 0, #591532 100%),
    /* 青いグラデーション */
    linear-gradient(to right, #37124d 0, #145951 100%);
  background-repeat: no-repeat;
  /* 幅100%、高さの50%のサイズにする */
  background-size: 100% 50%;
  /* 画像の100%分(100px)移動させる */
  background-position: 0 100%, 0 0;
}

.heroの高さが可変であれば、パーセンテージの指定にしておくほうが良いでしょう。

ブレンドモードの指定

次に、前述のグラデーションに、SVGをオーバーレイのブレンドモードで重ねるために必要なmix-blend-modebackground-blend-modeについて解説します。これは、Compositing and Blending Level 1に登場します。

mix-blend-modebackground-blend-modeは色の合成と混色を行うためのものです。どちらも同じような働きをしますが、簡単に説明すると、要素同士の合成はmix-blend-modeで行い、背景画像・背景色の合成はbackground-blend-modeで行います。

mix-blend-mode

mix-blend-mode | Compositing and Blending Level 1

mix-blend-modeでは、要素のブレンドモードを指定します。このプロパティで指定できる値は、次のとおりです。PhotoshopやIllustratorのブレンド・描画モードで同じようなものを見たことがあるのではないでしょうか。そして、mix-blend-modeは執筆現在、Chrome、Firefox、Safari(一部の値をサポートしない)で利用できます。

意味
normal 通常(初期値)
multiply 乗算
screen スクリーン
overlay オーバーレイ
darken 比較(暗)
lighten 比較(明)
color-dodge 覆い焼き
color-burn 焼きこみ
hard-light ハードライト
soft-light ソフトライト
difference 差の絶対値
exclusion 除外
hue 色相
saturation 彩度
color カラー
luminosity 輝度

また、normal以外を指定するとスタック文脈*を形成します。

*注:スタック文脈

スタック文脈に関しては、次の記事などを参考にしてください。

実際に各値を試せるデモを用意したので、どういった変化が起きるのかを確認してみてください。白いテキストを内包する.box1と、グラデーションが指定された.box2は絶対配置で重ねています。

ソースコードは次のようになっています。

<div class="box-1" style="mix-blend-mode: normal;">私のHome Pageにようこそ</div>
<div class="box-2"></div>
mix-blend-modeプロパティ値を試す

セレクトボックスで値を選ぶと、どういった効果が得られるかを確認することができます。

【コラム】mix-blend-modeの有無を判別する

mix-blend-modeが使えないブラウザ向けには別の指定をしたかったため、次のような判定のためのコードを書いて、mix-blend-modeに対応しているブラウザの場合は、html.mix-blend-modeとなるように指定しました。

mix-blend-mode対応の判定
(function () {
  if ('CSS' in window && 'supports' in window.CSS) {
    if (window.CSS.supports('mix-blend-mode', 'soft-light')) {
      document.documentElement.classList.add('mix-blend-mode')
    }
  }
}())

実装では、結果的にSVGとグラデーションを合成するために、mix-blend-modeを使用しているのですが、その理由については後述します。

background-blend-mode

background-blend-mode | Compositing and Blending Level 1

次に、背景のブレンドモードを指定するbackground-blend-modeプロパティを解説します。background: url(foo.png), url(bar.png);のように複数背景を指定したときに、それぞれの背景にブレンド効果を付けて、背景同士を合成することができます。

このプロパティに使える値は、mix-blend-modeと同様です。backgroundプロパティのサブプロパティのため、background-blend-mode: overlay, screen, normal;のように複数の指定することもできます。

background-blend-modeプロパティ値を試す

これも先ほどと同様に、セレクトボックスで値を選ぶと、どういった効果が得られるかを確認することができます。

まとめ

今回はピクセルグリッドのコーポレートサイトリニューアルにあたってのデザイン意図と、その結果、ヒーローエリアにブレンドモードを採用した実装を施すことになった経緯を説明しました。

また、その実装に必要な2つのプロパティ、mix-blend-modebackground-blend-modeの仕様を解説しました。

次回はこの知識をもとに、実際の実装をどのように行ったのか、また実装の際の注意点についても解説します。

坂巻 翔大郎
坂巻 翔大郎
フロントエンド・エンジニア

大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。