TANE-beエンジニアです。

今回紹介するCSSプロパティは、IEのサポート終了後に実装できるCSSプロパティの一つ、clip-pathです。
clip-pathは、画像をCSSで好きな形に切り抜けたり、SVGのパスで自由にクリッピングできちゃうので、使いこなすとかなり利便性も向上します。

clip-pathで指定できる値や具体的な使い方などをご紹介します。

IEのサポート終了後に実装できるデザインとしては、前回の記事をご覧ください。

IEサポート終了後にCSSで実装できるデザイン集　Vol.1

こんにちは！ TANE-beエンジニアです。 さて、2022年6月にいよいよInternet Explorerのサポートが終了します。 日本国内では馴染み深くシェアを維持してきたIEですが気がつけばサポート終了まで1年を […]

続きを読む

clip-pathとは

今回ご紹介するclip-pathは、Photoshopなどでいうマスクのような役割を果たします。
動画や画像を切り抜いて（クリッピングして）指定した領域の外側を見えなくするような効果です。

切り抜かれた画像の表示をしたい場合、今まではpngなどを使用して対応していたのではないでしょうか？

clip-pathは画像以外の、tableやiframe要素といったコーディングされた要素から動画まで、
元になるクリッピングの対象要素は何でも問題ありません。
また、クリッピングする形も四角や丸だけではなく、SVGなどで自由に指定することが可能です。

クリップに関しては、IllustratorやPhotoshopを利用してSVGから作成してもよいですが
Web上にジェネレータなどを公開してくれているサイトがあるので、簡単に実装することも可能です。

Clippy — CSS clip-path maker – Bennett Feely

では、具体的にclip-path で指定できる値を確認していきましょう。

clip-pathで指定できる値

clip-path: <clip-source>;</clip-source>

SVGを使用できます。
svgのパスをclipPathというタグで囲ってIDを指定し、
そのIDでクリッピングを指定するという方法です。

好きな形にクリッピングできますが、一部ではサポートされていない状態があるので
サポートされているブラウザやバージョンを確認しつつ使用しましょう。

特に、safariではURLで指定してもうまく反映されないこともあるようです。
クリッピング要素がpathであれば、個人的には後述のbasic-shapeのpath()で指定した方がスムーズだなとおもいました。

clip-path: <basic-shape>;

四角・円、矢印、星形など…
基本的なシェイプはほとんどカバーでき、かつサポートブラウザが最も多いので積極的に使用しましょう。

clip-path: <geometry-box>;

ボックスのタイプを指定できます。またシェイプと一緒に指定する場合、参照ボックスを定義する値です。
ただ現在（2021年10月）はサポート外のブラウザが多いため、ひとまず使用対象から外して良いと思います。

clip-path: none;

初期値。なにもクリップがされていない元の状態です。
アニメーションなどで元の画像に戻したい時や、スタイルを分ける場合などに使用できます。

basic-shapeの具体的な使い方

実際に指定できる値は以下の通りです。

inset()　：四角（角丸も対応可能）

<div class="is-clipping-inset">
<img src="/demo/img/2021/img_dummy02.jpg" alt="">
</div>

.is-clipping-inset{
　　clip-path: inset(30px round 10px);
}

端から30pxの大きさに、border-radius: 10px;の状態でクリッピング。
値はborderやpadding同様に、複数指定することで個別指定できます。

circle()　：円

<div class="is-clipping-circle">
   <img src="/demo/img/2021/img_dummy02.jpg" alt="">
</div>

.is-clipping-circle{
  clip-path: circle(30% at 25% 50%);
}

対象に対して30％の大きさの丸を、左上を基準にして
丸の中心が左から25%,50%の位置にクリッピング。
at 以降を指定しない場合センター（50%,50%）に配置されます。

ellipse()　：楕円

<div class="is-clipping-ellipse">
  <img src="/demo/img/2021/img_dummy02.jpg" alt="">
</div>

.is-clipping-ellipse{
  clip-path: ellipse(100px 50px at 50%);
}

横幅が100px、高さが50pxの楕円にクリッピングされます。
at以降の値は、circleと同じで（左から 上から）で指定できます。
上記は50%なのでセンターに配置されます。

polygon()　：多角形

<div class="is-clipping-polygon">
  <img src="/demo/img/2021/img_dummy02.jpg" alt="">
</div>

.is-clipping-polygon{
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

それぞれの値を（X軸の座標 Y軸の座標,　…）とで指定し、その組み合わせで多角形を指定していきます。
座標の組み合わせなの作成できるのは直線で描ける形になります。
先ほどのclippyのサイトがわかりやすいので、ぜひ多角形を指定して値と座標を確認してみてください。

path(‘ ‘)　：SVGのパスが指定できます。

<div class="is-clipping-polygon">
  <img src="/demo/img/2021/img_dummy02.jpg" alt="">
</div>

.is-clipping-path {
  clip-path: path('M257,113.61h0a234~~略~~');
}

個人的に、URLで指定するよりも確実性が高いと感じました。
SVGのpathのd=””の中身をそのままクォーテーションの中に指定します。

また、Firefoxでは検証ツールからclip-pathの調整をすることが可能です。

clip-pathを利用したアニメーション

CSSで指定できるということは、画像の表示にアニメーションを実装したり、画像部分をパララックスで実装したり、hover時の動きを実装したりと要素に対して動きをあわせた実装が簡単になります。
clip-pathを使用した簡単なアニメーションをいくつか実装してみました。

また、background-clip というプロパティを使用すると、テキストで画像をくり抜くことも可能です。
こちらに関しては次回のブログで、テキストまわりのCSSを中心にまとめようと思います。
お楽しみに！