CSSで“切り抜く”あれこれ（clip-pathとmask-imageの違い）

長谷川満＠制作業

2020年9月27日 15:15

WEB制作で要素を「特定の形に切り抜く」テクニックについて再確認する機会があったので共有します。

CSSで切り抜くメリット

・画像などの素材を予め任意の形に切り抜いておく必要がなくなる
・動画をはじめとするあらゆる表示要素に適応可能
・アニメーションなどと組み合わせることで、切り抜きの形が変わるなどより柔軟なデザインが可能

使い所

・デザイン性の高いWEBサイトで曲線を多用する場面
・ECサイトなどの素材・色見本等、形状を均一化する場面
・情報量の制限（一部だけ見せる）が必要な場合等

切り抜く方法

方法A：clip-pathプロパティを使う
- 方法A-I：図形ファイル（SVG）がある場合
- 方法A-II：基本的な図形の場合
方法B：mask-imageを使う

方法A：clip-pathプロパティを使う

任意の形の内側だけを表示領域にできるという優れたCSSプロパティです。

clip-path : ❶clip-source ❷ [basic-shape || geometry-box] ❸none

clip-pathプロパティは上記の値❶❷❸のいずれかを設定して使います。

方法A-I：図形ファイル（SVG）がある場合

❶clip-source…特定の画像の形したい場合、このプロパティで内部や外部のSVGを参照して、切り抜く形を読み込めます。

任意の図形を形取ったSVG画像がある場合、imgタグで読み込むのではなく<svg>タグとしてHTMLにコードを直書きします。そこで下記のようにidをつけた<clipPathタグ>を内部に設け、そのidをclip-sourceの値として設定する仕組み。

<svg>
    <clipPath id="clip_id">
....
     </clipPath>
</svg>

clip-path:url(#clip_id)

方法A-II：基本的な図形の場合

❷basic-shape…切り抜く形が基本的な図形の場合、こちらを指定し、（）の中で図形の頂点や半径などを指定ます。
inset() … 内側へのオフセット（通常は長方形）
circle(【半径】 at 【中心の位置】) … 円形
ellipse(【横の半径】【縦の半径】 at 【中心の位置】) … 楕円
polygon(【各頂点のX座標Y座標】)…多角形

geometry-box...basic-shapeと共に設定し、marginやpaddingを含むかどうかなどを決める。指定しなければborder-boxとなる。

上記の通り、形を作るための数値を入力します。

/*三角形*/
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 


/*正円*/
clip-path: circle(50% at 50% 50%); 


/*楕円形*/
clip-path: ellipse(25% 40% at 50% 50%);

図形の形を定める値を自分で入力するのが難しい場合、下記ジェネレーターを使えば任意の形のコードを自動で生成してくれます。コピペしましょう。

Clip-path各ブラウザサポート状況

2020年9月現在、多くの主要ブラウザでベンダープリフィックス必須、対応も内部SVGや基本図形のみとなっているので注意しましょう。

方法B：mask-imageを使う

既に切り抜く形をpng（背景透過）で作っているなど、上記clip-pathのようにsvgコードを書き出すのが難しい／嫌だという場合や、そもそもsvg画像じゃない場合はこちらの方法がおすすめです。

背景画像を設定するbackground-imageに全プロパティが酷似しているため、同様の方法で切り抜きたい画像に設定していきます。

mask-image:マスクの形にする画像の参照;
mask-size: マスクの大きさ;
mask-repeat: マスク画像を繰り返すかどうか;
mask-position: マスクの位置;

(他、輝度や透明度を決めるmask-modeや複数のマスク画像を合成する mask-compositeなども存在しますが主要ブラウザで対応していないので割愛）

<div class="mask"></div>

.mask{
 mask-image:url(xxxxxx);
 mask-size: contain;
 mask-repeat: no-repeat;
 mask-position:  center;
}

Mask-image各ブラウザサポート状況

やはりベンダープリフィックスが必要なのと、一部対応しきれていないプロパティがあるので注意しましょう。モダンブラウザであれば、サイズに関するプロパティや位置に関するプロパティは問題なく対応しています。

どちらも使えない場合

どうしてもIEに対応させなければいけない、プラグイン等で画像の表示の仕方が特殊で切り抜けない場合は、以下の方法になるのかなと思います。

・CSSによる切り抜きではなく、従来どおり背景透過素材をPhotoshop等で制作する
・切り抜きたい形の部分が透過したフレームを、positionなどで上から重ねて切り抜きに見せる

もしこのようにフレームをCSSで重ねる場合は、
・フレームを擬似要素で表示（positionとz-indexで手前に表示）
・境界部分がはみ出ないようにフレームを背景画像より少し大きくする
と良いと思います。

以上です。少しでもお役に立てば嬉しいです。

この記事が気に入ったらサポートをしてみませんか？

CSSで“切り抜く”あれこれ （clip-pathとmask-imageの違い）