【25-1】切り抜き(クリッピング)のための新プロパティ clip-path

最終更新日:2018年02月20日  (初回投稿日:2018年02月03日)

前回の clipプロパティは、いずれ廃止される予定で、それに代わる新しいプロパティが clip-path です。

clip との違いは、四角形だけじゃなく円形・ポリゴンなど、いろんなシェイプで切り抜けること。SVGで作った複雑なシェイプでの切抜きもできます。

clip-path はまだ「勧告候補」。
今のところ Firefoxのver.54 以降は実装。 Chrome、Safari は一部の機能を除いて実装しているようです。

本日のINDEX
  1. clip-path の値
  2. clip-path のブラウザの対応状況
  3. CSSの基本シェイプで切り抜こう
    1. inset() で四角形で切り抜く
    2. 切り抜いた余白の処理をするには、やはりネガティブマージン
    3. circle() で正円で切り抜く
    4. ellipse() で楕円で切り抜く
    5. polygon() でポリゴン(折れ線で囲まれた図形)で切り抜く
  4. 簡単に clip-path を作れるサイト「clippy」
  5. クリッピングパスのアニメーションも
  6. geometry-box(ジオメトリーボックス)を使ってみる
    1. <geometry-box> を単独で使ってみる
    2. <geometry-box> を <basic-shape>(基本シェイプ)と併用してみる

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>の背景に薄いグレーをつけてます。

サンプルは、<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プロパティで呼び出して要素を切り抜く方法をやってみます。
文字や ロゴマークなどの複雑な図形をクリッピングパスにできます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.