Rich Media API ハンドブック

HTML5 でマスクを使用する

クリエイティブやクリエイティブのコンセプトによって、マスクを使用するか、またどの種類のマスクを使用するかが決まります。

マスクを作成する 3 つの方法

クリエイティブの一部を透明にすると、クリエイティブがサイト運営者のページに重なる場合や、クリエイティブ内で異なる要素がアニメーションする場合に便利です。CSS でマスク効果を作成するには、次の 3 つの方法があります。

clip-path プロパティと mask プロパティに関するより詳しい分析については、CSS-Tricks の Clipping and Masking in CSS をご覧ください。

 

Overflow:hidden

要素をクリップする方法の 1 つに、overflow:hidden プロパティを適用済みの div 要素内にクリップされるように要素をネストする方法があります。この方法はすべてのブラウザで行えますが、div 要素(border-radius を適用)で作成できるシェイプに限られます。

Clip-path

clip-path プロパティは、ハード(ベクター)エッジに最適なクリッピング パスの定義に使用する CSS プロパティです。クリッピング パスは SVG シェイプに依存し、ジオメトリの点でより柔軟性があります。ただし、Internet Explorer のバージョンによっては clip-path プロパティに互換性がないという制限があります。

専門家でない限りクリッピング パスを手動で定義するのは困難ですが、無料のオンライン ビジュアル ツール(Clippy など)が多数あり、シンプルなものから複雑なものまで、シェイプの作成を容易にしてくれます。

Mask

mask プロパティを使用すると、元の画像の透明度や光度もマスクできます。イメージマスクは、Webkit ブラウザ(Chrome や Safari)でのみサポートされています。mask プロパティの詳細

clip-path プロパティや mask プロパティのブラウザとの互換性については、caniuse.com をご覧ください。overflow:hidden プロパティは、どのブラウザにおいても完全にサポートされています。

キャンペーンに使える方法を選択する

使用する方法を決定するときは、CSS クリッピングのサポートが Internet Explorer や Safari では限定されることを考慮に入れてください。

  • IE ではサポートなし
  • Safari では SVG パスのサポートなし、CSS 宣言にインラインされているシェイプ(円や多角形など)のみサポート

ブラウザとの互換性を高めるためには、overflow:hidden プロパティを使用して親要素の範囲にコンテンツをクリップします。この欠点は、マスクのシェイプが長方形と楕円(border-radius 使用時)に限られることです。clip-path の他の重要なプロパティは維持されます。

  • 任意の DOM コンテンツ(テキスト、画像、SVG、キャンバスなど)をクリップできます。
  • div 要素で作成可能なシェイプの範囲内で、マスクをアニメーションできます。
  • 非表示部分におけるマウスイベントを抑制します。要素の一部が表示されない場合は、誤って操作できないようになります。

簡単なシェイプを使って一般的なマスク効果を作成する

overflow:hidden プロパティでは簡単なマスクシェイプしかできませんが、マスクのプロパティをアニメーションすると便利な効果を作成できます。

  • 0 から画像の幅までの幅をアニメーションし、リビール効果を作成します。
  • box-shadow プロパティを使って、端をぼかしたマスクを作成します。
  • 大きな枠範囲を設定して幅と高さをアニメーションし、コンテンツを中心に円形状に広がるリビール効果を作成します。
  • マスクを変換または回転して、スポットライト効果を作成します。

マスクを組み合わせて複雑なシェイプを作成する

  • 交差: マスクコンテナをネストして交わりを作成します。たとえば、長方形と円形を交差させて、半円が広がっていくようなマスクを作成します。
  • 結合: Google Web Designer では、「グループ」というデータタイプをサポートしています。グループを使用すると、同じコンテンツをカバーする異なるマスクを作成し、複数の部分からなる単一のマスクのように見せることができます(実際は、各マスクに独立した DOM があります)。

親要素と子要素を反対方向にアニメーションする

div 要素をアニメーションすると、すべての子要素も同じようにアニメーションします。マスクのアニメーションで錯覚を起こすには、子要素を反対方向にアニメーションして静止しているように見せます。

検討すべきその他の技法

透明な画像を部分的に重ねる

不透明部分のバックグラウンドと同じ色のコンテンツ、または反対に透明なコンテンツの上に画像を追加します。こうすることで任意のシェイプを作成できますが、マスクをレイヤすることはできません(表示部分を選んでレンダリングするのではなく、各マスクによって不透明な部分全体が上塗りされるため)。また、マスクシェイプを(変換または回転の範囲、規模を超えて)アニメーションすることはできません。

canvas 要素を使用する

コンテンツがすべて <canvas> 内にある場合は、より柔軟にクリッピング効果を追加できます。canvas 要素はブラック ボックスですが、リッチコンテンツをサポートするには大規模で複雑なランタイムが必要です。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。