【25-1】切り抜き（クリッピング）のための新プロパティ clip-path
最終更新日：2018年02月20日 （初回投稿日：2018年02月03日）前回の clipプロパティは、いずれ廃止される予定で、それに代わる新しいプロパティが clip-path です。
clip との違いは、四角形だけじゃなく円形・ポリゴンなど、いろんなシェイプで切り抜けること。SVGで作った複雑なシェイプでの切抜きもできます。
clip-path はまだ「勧告候補」。
今のところ Firefoxのver.54 以降は実装。 Chrome、Safari は一部の機能を除いて実装しているようです。
clip-pathプロパティ関連は、話が長いので記事を3つに分けました。
今回は「基本シェイプ」での切抜きをしてみます。
- 【25-1】切り抜き表示のための新しいプロパティ clip-path ←今日はココ
- CSSの「基本シェイプ」による切抜きを中心にサンプルを見ていきましょう。
- 【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう
- SVGのパスを使って切り抜きます。
- 【25-3】クリッピングに便利！ shape-outside と shape-margin
- 切り抜いた要素の余白を取ってくれるshape-outsideプロパティと、その切抜き後のシェイプにマージンをつけてくれる shape-marginプロパティを使います。
参考：
clip-pathプロパティ（勧告候補）↓
CSS Masking Module Level 1 - W3C Candidate Recommendation, 26 August 2014
5.1 Clipping Shape: the clip-path property
Basic Shapes（CSSの基本シェイプ）（勧告候補）↓
CSS Shapes Module Level 1 - W3C Candidate Recommendation-Basic Shapes
シェイプには「margin-box」というボックス値もある（勧告候補）↓
CSS Shapes Module Level 1 - W3C Candidate Recommendation-Shapes from Box Values
clip-path の値
clip-path の値は「構文」と言われる、キーワードや数値を一定のルールで組み合わせたものです。（グラデーションも構文でしたねぇ）
どんなものかザッとまとめてみました。
| none | これがデフォルト値。クリッピングパスは生成されません。 |
|---|---|
| <basic-shape> または <geometry-box> |
<basic-shape>は「基本シェイプ」。inset（四角形）、circle（正円）、ellipse（楕円）、polygon（ポリゴン）が用意されています。
[使用例] clip-path: circle(50px at 70% 30%) ★正円の半径は50px、中心点 x=要素の幅の70％、y=要素の高さの30％の場合 <geometry-box>は、box-sizingプロパティで使う値のように「範囲」を決める。 margin-box、border-box、padding-box、content-box、 fill-box、stroke-box、view-box という値があります。 |
| <clip-source> | url() 構文を使って SVG の <clipPath>要素で作ったパスを呼び出して切り抜きます
[使用例] clip-path: url(#clip1) ★要素を切り抜くための内部 SVGの <clipPath>要素の idが #clip1な場合 |
| 値の継承 | なし | 適用できる要素 | すべての要素 |
|---|
clip-path のブラウザの対応状況（2018年2月）
Can I use で対応状況がわかります（クリックで別ウィンドウで開きます）
（2018年2月の状況です）
Chrome、Safari は、外部SVGによる切抜きには未対応なものの、ほぼ対応。
Safari（iOS Safari も）、Android 用のブラウザの一部 は ベンダープレフィックス「-webkit-」が必要ですが、外部SVGの切抜き以外なら対応しています。
Firefoxだけは対応済み。外部SVGにも対応しています。
Firefoxのver.53まで は、基本シェイプ（CSSだけで作るシェイプ）に未対応でしたが、ver.54 からは対応。古い Firefox のかたはバージョンアップしてみてください。
IE11, Edge（と Opera Mini）は clip-path プロパティ そのものに未対応。
というわけで、今すぐに使えるかというと、そうでも無いようです。
（モバイル用サイトならもう使えそうかな）
CSSの基本シェイプで切り抜こう
では、さっそく使ってみよう。
CSSの 基本シェイプ（basic-shape）で用意されているシェイプを使って、clip-pathプロパティで切り抜いてみましょう。
clip-pathプロパティは、なにも画像を切り抜くのが専用ではなく。「要素」を「パスによる図形」で切り抜くためのもの。
<img>だけでなく <table>だろうが <figure>だろうが、どんな要素でも切り抜けます。
それにしても、CSSだけでベクターパスが作れるってスゴイよね。
このページのサンプルには、<img>要素を使います。
<img>要素には、すべてこの画像を仕込みます。（これはまだ切り抜いてないよ）
どれだけ切り抜かれたか、元の画像領域を残すために、<img>要素を <div>要素で囲んで、その <div>の背景に薄いグレーをつけてます。
HTMLはこんなかんじ。
<div class="sample"> <!--サンプルのための背景用のdiv要素。本来は不要です。-->
<img class="clip" src="img/image.jpg"> <!--img要素-->
</div>
それではサンプルを見てみよう。（サンプルは 対応ブラウザで見てね）
inset() で四角形で切り抜く
inset() は () の中の値を1〜4個入れられます。
複数の値は「半角スペース」で区切ります。
値が1つなら、要素の上右下左のエッジから同じ距離で切り抜きます。
HTMLはこちら。
<div class="sample">
<img class="clip-inset1" src="img/image.jpg">
</div>
CSSはこちら。
.sample {
width:280px;
height:auto;
background:rgba(204,204,204,.2)
}
.sample img {
width:100%;
height:auto
}
.clip-inset1 { /*img要素のクラス名です*/
-webkit-clip-path:inset(20px);
clip-path:inset(20px)
}
値が2つなら、要素の上下のエッジから同じ距離、左右のエッジから同じ距離で切り抜きます。
HTMLはこちら。
<div class="sample">
<img class="clip-inset2" src="img.jpg">
</div>
CSSはこちら。
.clip-inset2 {
-webkit-clip-path:inset(10px 40px);
clip-path:inset(10px 40px)
}
値が3つなら、要素の上のエッジ、左右のエッジ、下のエッジから距離です。
HTMLはこちら。
<div class="sample">
<img class="clip-inset3" src="img.jpg">
</div>
CSSはこちら。
.clip-inset3 {
-webkit-clip-path:inset(20px 50px 10px);
clip-path:inset(20px 50px 10px)
}
値が4つなら、上、右、下、左の順番です。
HTMLはこちら。
<div class="sample">
<img class="clip-inset4" src="img.jpg">
</div>
CSSはこちら。
.clip-inset4 {
-webkit-clip-path:inset(10px 25px 0 70px);
clip-path:inset(10px 25px 0 70px)
}
クリッピングパスを角丸にすることもできます。
() の中に続けて「round ●」（●は半径）と書けば、4つの角が同じ半径の角丸に。
HTMLはこちら。
<div class="sample">
<img class="clip-inset5" src="img.jpg">
</div>
CSSはこちら。
.clip-inset5 {
-webkit-clip-path:inset(10px 25px 0 70px round 20px);
clip-path:inset(10px 25px 0 70px round 20px)
}
角丸の値は、border-radiusプロパティ と同じ構文です。
このように4つの角を別々に指定することもできます。
HTMLはこちら。
<div class="sample">
<img class="clip-inset6" src="img.jpg">
</div>
CSSはこちら。
.clip-inset6 {
-webkit-clip-path:inset(10px 25px 0 70px round 10px 20px 30px 40px / 10px 20px 30px 40px);
clip-path:inset(10px 25px 0 70px round 10px 20px 30px 40px / 10px 20px 30px 40px)
}
border-radius に関しては、こちらをご覧ください。
[18-1] CSS3で、ボックス要素を角丸にしよう（border-radius）
切り抜いた余白の処理をするには、やはりネガティブマージン
で、ここで皆さん気がついたと思うんですが、clip-pathプロパティも clipプロパティと同じで、切り抜くだけで位置はそのままなんですね。
切り抜いた部分を、左上に移動し余白も無くすためには、やはりネガティブマージンを使うのがイイみたい。
下のサンプルのように、clip-path で切り抜いた上右下左の距離をそのままネガティブマージンで引くと、いい感じです。
このサンプルでは、確認のため テキスト を追加しました。切り抜いた画像のすぐ横に来てますね。
テキスト
HTMLはこちら。
<div class="sample">
<img class="clip-inset7" src="img.jpg"><span style="margin-left:1em">テキスト</span>
</div>
CSSはこちら。
.clip-inset7 {
-webkit-clip-path:inset(10px 25px 0 70px round 40px);
clip-path:inset(10px 25px 0 70px round 40px);
margin:-10px -25px 0 -70px;
vertical-align:middle
}
★ネガティブマージンに関しては、こちらをご覧ください。
【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）
circle() で正円で切り抜く
circle() は正円のシェイプを作って切り抜きます。
() 内は
「半径 at 中心点のx座標 中心点のy座標」を半角スペース区切りで書きます。
「半径」を ％ で指定する場合、要素の幅（width）に対してのパーセンテージになります。
HTMLはこちら。
<div class="sample">
<img class="clip-circle1" src="img.jpg">
</div>
CSSはこちら。
.clip-circle1 {
-webkit-clip-path: circle(30% at 50% 50%);
clip-path: circle(30% at 50% 50%)
}
もう1個サンプル。% と px の単位を混在させてみました。
HTMLはこちら。
<div class="sample">
<img class="clip-circle2" src="img.jpg">
</div>
CSSはこちら。
.clip-circle2 {
-webkit-clip-path: circle(90px at 165px 50%);
clip-path: circle(90px at 165px 50%)
}
ellipse() で楕円で切り抜く
ellipse() は楕円のシェイプを作って切り抜きます。
() 内は
「x軸半径 y軸半径 at 中心点のx座標 中心点のy座標」を半角スペース区切りで書きます。
HTMLはこちら。
<div class="sample">
<img class="clip-ellipse1" src="img.jpg">
</div>
CSSはこちら。
.clip-ellipse1 {
-webkit-clip-path: ellipse(50% 40% at 50% 50%);
clip-path: ellipse(50% 40% at 50% 50%)
}
もう1個サンプル。縦長の楕円ね。
HTMLはこちら。
<div class="sample">
<img class="clip-ellipse2" src="img.jpg">
</div>
CSSはこちら。
.clip-ellipse2 {
-webkit-clip-path: ellipse(25% 48% at 60% 50%);
clip-path: ellipse(25% 48% at 60% 50%)
}
polygon() でポリゴン（折れ線で囲まれた図形）で切り抜く
ポリゴンとは、三角形とか星型とか、折れ線で囲まれた図形です。
polygon() はポリゴンのシェイプを作って切り抜きます。
() 内は、角の頂点を「x座標 y座標」をワンセットで「,（カンマ）」で区切りながら 一筆書きのように書いていきます。時計回りでも反時計でも、どっちでもOK。
三角形で切り抜いてみます。
HTMLはこちら。
<div class="sample">
<img class="clip-polygon1" src="img.jpg">
</div>
CSSはこちら。上部の頂点から始めて、反時計回りに指定しています。
.clip-polygon1 {
-webkit-clip-path: polygon(60% 0%, 10% 80%, 90% 100%);
clip-path: polygon(60% 0%, 10% 80%, 90% 100%)
}
直線の組み合わせなら どんな形でも切り抜けます。
吹き出しみたいにしてみた。（頂点が7コあります）
HTMLはこちら。
<div class="sample">
<img class="clip-polygon2" src="img.jpg">
</div>
CSSはこちら。左上の角から、時計回りに。
.clip-polygon2 {
-webkit-clip-path: polygon(20% 0%, 100% 0%, 100% 90%, 75% 90%, 73% 100%, 68% 90%, 20% 90%);
clip-path: polygon(20% 0%, 100% 0%, 100% 90%, 75% 90%, 73% 100%, 68% 90%, 20% 90%)
}
簡単に clip-path を作れるサイト「clippy」
ポリゴンは、六角形などの単純な形でも、コードを書くのが大変そうですね。
そのコードをサクッと作ってくれる、clip-path 用のオンラインサービスがあります。
Bennet Feely氏の Clippy - CSS clip-path maker（クリックで別ウィンドウで開きます）
-webkit- 付きのコードも一緒に書き出してくれるので便利です。
ちょっといじってみて、構造を理解するのにも役立ちます。
クリッピングパスのアニメーションも
clip-path で「基本シェイプ」を使うと、CSSで簡単にパスアニメーションが作れます。「基本シェイプ」のパスはベクター形式なので、滑らかでキレイです。
animationプロパティを使います。
HTMLはこちら。
<div class="sample">
<img class="clip-animation" src="img.jpg">
</div>
CSSはこちら。
.clip-animation {
-webkit-clip-path: ellipse(25% 50% at 60% 50%);
clip-path: ellipse(25% 50% at 60% 50%);
margin-left:-25%;
animation: clip 2s infinite}
@keyframes clip {
0% {
-webkit-clip-path: ellipse(25% 50% at 60% 50%);
clip-path: ellipse(25% 50% at 60% 50%)}
33% {
-webkit-clip-path: ellipse(30% 50% at 60% 50%);
clip-path: ellipse(30% 50% at 60% 50%)}
66% {
-webkit-clip-path: ellipse(25% 30% at 60% 50%);
clip-path: ellipse(25% 30% at 60% 50%)}
}
transitionプロパティを使った、マウスオーバー時のアニメーションも簡単です。
下の画像にマウスオーバーしてみてください。（PCブラウザのみ）
HTMLはこちら。
<div class="sample">
<img class="clip-click" src="img.jpg">
</div>
CSSはこちら。
.clip-click {
margin-left:-25%;
-webkit-clip-path: ellipse(25% 50% at 60% 50%);
clip-path: ellipse(25% 50% at 60% 50%);
transition:.5s ease-in}
.clip-click:hover {
-webkit-clip-path: ellipse(35% 50% at 60% 50%);
clip-path: ellipse(35% 50% at 60% 50%);
cursor:pointer}
「transition:clip-path .5s ease-in」とすると Safariで動作せず、transition を all（省略でコレ）にすれば反応しました。
いずれのサンプルも、「基本シェイプ」は同じシェイプじゃないと、アニメーションとして動作しませんでした。（例えば、楕円からポリゴンとかは無理）
animationプロパティ、transitionプロパティについては、いずれまとめます。
geometry-box（ジオメトリーボックス）を使ってみる
<basic-shape>（基本シェイプ）と共に値として登場する <geometry-box>（ジオメトリーボックス）を、ちょっと試してみます。
W3Cの clip-path の仕様（勧告候補）によると、
<geometry-box>は、box-sizingプロパティの値のように「範囲」を決める モノらしいです。
clip-path で切り抜く範囲に、マージンを含めるか、ボーダーまでにするか、パディングまでにするか、コンテンツまでにするか、を決めるってことらしい。
geometry-box の値
値は margin-box、border-box、padding-box、content-box と、fill-box、stroke-box、view-box があります。
box-sizingプロパティは borderの範囲の border-box までですが、これに margin-box（マージンの範囲）まで加えたのが <shape-box> と呼ばれる仕様なんだって。
HTML要素を切り抜くときは、margin-box、border-box、padding-box、content-box という値を使えて、これら以外の値（ fill-box、stroke-box、view-box ）を使うと「border-box」になるようです。
SVG要素を切り抜くときは、fill-box、stroke-box、view-box が使えて、これら以外（ margin-box、border-box、padding-box、content-box ）なら「fill-box」になるということです。
clip-path の値の構文は次のようになっています。
<clip-source> | [ <basic-shape> || <geometry-box> ] | none
これは「CSSの定義構文」ってやつ。
<clip-source> は次回やる SVGのパスを url()構文で呼び出す値です。
最後の none はデフォルト値。
「 |（縦1本のバー）」は「コレで区切った値のどれか1つを使う」って意味。
真ん中の [ <basic-shape> || <geometry-box> ] ですが、
[ ]（角括弧）は「ひとまとまり」。「 ||（縦2本のバー）」は「どっちか1つか2つとも使うかで順不同」って意味。
<basic-shape>（基本シェイプ）と <geometry-box>（ジオメトリーボックス）を一緒に使うことも、 <geometry-box> だけ単独で使うこともできるようです。
<geometry-box> の値を単独で使ってみる
というわけで、単独で使うと どうなるか試してみます。
clip-pathプロパティで、inset() やら polygon() などの <basic-shape>（基本シェイプ）の値を使わずに、<geometry-box> の値のみを指定してみます。
この <div>要素を使います。今はまだ何も指定していない状態です。
clip-pathの指定無し
HTMLはこちら。
<div class="sample">
<div class="smpl-geo">
<p>clip-pathの指定無し</p>
</div>
</div>
CSSはこちら。
.sample {
width:280px;
height:auto;
background:rgba(204,204,204,.2); /*グレー=margin部分*/
padding:1px; /*マージンの相殺を防ぐためにパディングを指定しています*/
}
.smpl-geo {
margin:20px;
border:20px solid #F99; /*赤=border部分*/
padding:20px;
background:#9F9 /*グリーン=padding部分*/
}
.smpl-geo > p {
line-height:1.8em;
margin:0;
padding:0;
background:#9CF /*ブルー=content部分*/
}
クラス名「.smpl-geo」の <div>要素に、マージン・ボーダー・パディングそれぞれ 20pxを指定。マージンの領域がわかるように、グレーバックの親要素で囲んでいます。
中身の <p>要素がコンテンツ領域というわけです。
では、<div>要素に clip-path: padding-box を指定してみます。
予想では padding の領域（グリーンのところ）で切り抜かれるはずです。
これ、Safariだけは対応していました。（2018年2月）
clip-path: padding-box
CSSはこちら。
.smpl-geo {
margin:20px;
border:20px solid #F99;
padding:20px;
background:#9F9;
-webkit-clip-path: padding-box;
clip-path: padding-box
}
<geometry-box> を <basic-shape>（基本シェイプ）と併用してみる
<basic-shape> と併用するには「半角スペース」で区切ります。
<div>要素を ポリゴンの三角形で切抜き、同時に clip-path: padding-box を指定してみます。
予想では padding の領域（グリーンのところ）以内で三角に切り抜かれます。
Safari と Firefoxは対応しています（2018年2月）
clip-path: padding-box
CSSはこちら。
.smpl-geo {
margin:20px;
border:20px solid #F99;
padding:20px;
background:#9F9;
-webkit-clip-path: polygon(60% 0%, 10% 80%, 90% 100%) padding-box;
clip-path: polygon(60% 0%, 10% 80%, 90% 100%) padding-box
}
ちなみに、下は ポリゴンの切抜きのみにしたサンプル。
<geometry-box> の値（padding-box）を外したらこうなります。
<basic-shape>（基本シェイプ）は、border-boxが基準みたいですね。
clip-path: padding-box
CSSはこちら。
.smpl-geo {
margin:20px;
border:20px solid #F99;
padding:20px;
background:#9F9;
-webkit-clip-path: polygon(60% 0%, 10% 80%, 90% 100%);
clip-path: polygon(60% 0%, 10% 80%, 90% 100%)
}
というわけで、<geometry-box>（ジオメトリーボックス）に関しては、今のところ Safari が対応。 Firefox は一部対応しているようですね。
Chrome が未対応なので、悪い予感... また勧告の時に仕様がガラッと変わるかもしれませんね。（2018年2月）
次回予告
今回は、IE11、Edge で見た人は、なんにも切り抜かれてない画像の羅列だったはず。
Chrome、Safari、Firefox（ver.54以降）で見るとオモシロイよ（笑）
（2018年2月のブラウザ対応状況です）
次回は SVGで作ったパスを clip-pathプロパティで呼び出して要素を切り抜く方法をやってみます。
文字や ロゴマークなどの複雑な図形をクリッピングパスにできます。
- 関連記事
-
- 【26-5】font-styleプロパティでフォントを斜体に指定しよう
- 【26-4】font-stretch で condensed などの文字幅を選択しよう
- 【26-3】font-weightでフォントのウェイト（太さ）を指定しよう
- 【26-2】font-sizeプロパティでフォントのサイズを指定しよう
- 【26-1】font-familyプロパティでフォント（書体）を指定しよう
- 【25-3】クリッピングに便利！ shape-outside と shape-margin
- 【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう
- 【25-1】切り抜き（クリッピング）のための新プロパティ clip-path
- 【24】要素を切り抜き表示する clipプロパティ（非推奨ですが）
- 【23-2】重なり順のルールと 新しいスタックコンテキストができる条件
- 【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ
- 【22-4】スクロールしていくとピタッと固定する position: sticky
- 【22-3】要素を固定位置に指定する position: fixed
- 【22-2】要素を絶対位置に指定する position: absolute
- 【22-1】位置指定の positionと top, right, bottom, leftプロパティ
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
