【css】clip-pathと仲良くなりたいwebデザイナーの話

こんにちは、ゆるふわwebデザイナーのなかむらです。弊社ではデザイナーがコーディングまで行うことがあるのですが、フロントエンドエンジニアさんのような知識があるわけでもないゆるふわデザイナー2人がclip-pathツールを使おうとしてドツボにハマった経験を活かし、表層だけを撫でるclip-pathの記事を執筆いたします。

clip-pathとは
メリット
落とし穴
- Safariと死ぬほど仲が悪い
落とし穴にはまらない使い方とポイント
- パターン1：clip-pathに直接数値を書いて切り抜く
- パターン2：svgで書いたパスをclip-pathに読み込んで切り抜く
  - パスのsvgの作り方
    - XDでのやり方
    - Illustratorでのやり方
まとめ

clip-pathとは

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

clip-path - CSS: カスケーディングスタイルシート | MDN

つまり、四角い画像をcssを使ってコード上で任意の形に切り抜ける、という便利なプロパティです。

メリット

ここで「画像の切り抜きなら先に切り抜いた画像を使えばいいんじゃ？」と思われるかもしれませんが、コード面でもユーザビリティ面でも色々とメリットがあります。

『clip-path』の使い方や活用シーンを解説【CSS】 | あびふり

中でも個人的には以下の３つが大きいと思っています。

画像の差し替えが簡単
PCとSPで画像を分ける必要がない（作業者の手間が減るし、サイトも軽くなってユーザーも見やすい）
後からでも簡単に形を変えることが可能

落とし穴

Safariと死ぬほど仲が悪い

めっちゃ便利な機能のはずなのに、とにかくSafariとの相性が悪い。

safariとSVgの相性最悪と思ってたけどやっぱりそうなんや。。。

しかも原因〈clipPath〉らしい。 https://t.co/vi6AVblcsw
— Yuki-Kanayama / spicato inc. (@spicato_kana) 2022年9月3日

要素の背景をクリップする方法

初めて clip-path を使ったので、残しておきます。Safariでは -webkit- をつけないといけない時があるみたいです。

How to use clip-path https://t.co/UfcnwxYR0o via @CodePen #webデザイン
— Pocoon (@ponpon1586) 2022年3月3日

↑こう言ってらっしゃるが、公開しているものはSafariでも問題なく表示されている。簡単な形なら許されるのかな…

この前clip-path使ったらSafariのバグがひどくて修正が大変だった https://t.co/ssPJgQIoYQ
— たふみ (@CreatorQsF) 2020年3月23日

みんな嘆いてる

落とし穴にはまらない使い方とポイント

clip-pathの２種類の使い方と、それぞれで落とし穴にはまらないためのポイントをご紹介します。

パターン1：clip-pathに直接数値を書いて切り抜く

比較的簡単な形（以下のジェネレーターで作成可能な形）ならこの方法が無難

ジェネレーター：Clippy — CSS clip-path maker

記述はこんな感じ

.hoge-bg{
       background: url(/img/bg-mv.png) ; //四角い画像
       background-size: 100px;
       background-position: center;
       clip-path: inset(8% 6.5% round 50vw 50vw 0 0); //切り抜く形
       -webkit-clip-path: inset(8% 6.5% round 50vw 50vw 0 0); //Safari用　絶対書く！！
       -moz-clip-path: inset(8% 6.5% round 50vw 50vw 0 0);
       width: 100%;
       height: 100%;
}

🌟ポイント

ベンダープレフィックス絶ッッッ対書く（6、7行目）

軽くググったところ、ベンダープレフィックス使えや、という情報が目に入ったので試したらできた。やったぜ。
— 渡部崇 (@watabe_tk4) 2021年2月12日

また、パターン１でなら表示できた、という報告も…。

svgの要素内でclip-path指定せずにcssでclip-path指定したらsafariでも無事表示できた。

safari君ほんま、、、
— じょう🐈コーダー (@like_33_cat) 2022年6月30日

パターン2：svgで書いたパスをclip-pathに読み込んで切り抜く

ふにゃふにゃしてたりパターン１のジェネレータで作れないような複雑な形の場合の方法

例：橋本環奈オフィシャルファンクラブ「橋本純情内科」

ざっくり言うと、

切り抜きたい形のsvgのパスを配置し、そのsvgを画像の方で読み込んで適用させて切り抜く

記述はこんな感じ

<div class="mv">
        <svg xmlns="http://www.w3.org/2000/svg" style="height: 0; width: 0;"> //切り抜きたい形のsvg
              <clipPath id="任意のID" clipPathUnits="objectBoundingBox">
                    <path d="M195 0.000610352C87.2582 0.270325 0 87.695 0 195.5V772H391V259V195.5V0H195.5H195V0.000610352Z" transform="translate(0.3 0.6) scale(0.003333, 0.00125)"></path>
              </clipPath>
        </svg>
        <svg class="例えばのクラス名" viewBox="0 0 500 800"> //画像を配置するためのsvg
              <image clip-path="url(#3行目で設定した任意のID)" width="100%" height="100%" preserveAspectRatio="xMidYMin slice" xlink:href="img/img-mv01.png" style="-ms-filter: blur(1.5px);
          filter: blur(1.5px);"></image>
        </svg>
</div>
    
<style>　//必要に応じて適宜スタイル当てる
        .mv {                
                .例えばのクラス名 {
                    height: 210vw;
                }
            }
</style>

🌟ポイント①

clipPathにclipPathUnits="objectBoundingBox"をつける

pathのサイズを0-1に正規化する

1.はそのままなのですが、2.のpathのサイズを正規化するというのが重要です。clipPathUnits="objectBoundingBox"をつけると、pathがviewBoxの範囲ではなく、0-1の範囲で描画されるようになります。

pathの項目一つ一つの数値をviewBoxの数値で割ることでも可能ではありますが、手っ取り早くtransformでscaleを指定しましょう。

scaleで指定する数値は、以下の計算で求めることができます。 1 / viewBoxの数値

transformでtranslate等が指定されていれば、その数値もviewBoxの数値で割る必要があります。

上記のコードの場合は、scaleに指定する数値は、

scale=1÷103.758=0.009637scale=1÷103.758=0.009637

transformの数値は、

transform=−13÷103.758=−0.125281transform=−13÷103.758=−0.125281

です。

切り抜く要素のサイズに合わせてSVGでclip-pathする - Qiita