CSS clip-pathの使い方をジェネレーターを活用しながら覚える

CSS clip-pathの使い方をジェネレーターを活用しながら覚える

CSSのclip-pathプロパティを使用してクリッピングしたことがなかったのでclip-pathの使い方を覚えることにしました。

CSSのclip-pathの使い方を覚えるにあたってclip-pathのジェネレーターを参考にしながらclip-pathの使い方(主にbasic-shapeの使い方)を覚えました。

初めてCSSでclip-pathの使い方を覚えようとしているclip-path初心者さん向けの内容になるかと思います。

 

CSSでclip-pathの使い方

 

CSSのclip-pathを使用すると要素にクリッピング領域を作ることができ、領域の境界から内側を表示して外側を切り抜くことができます。切り抜くことを「クリッピング」と言います。

CSSでクリッピングするclip-pathの使い方は、clip-pathをCSSのプロパティとして記述してclip-pathに使用できる関数と値を記述することでCSSのセレクタに指定する要素の切り抜きができます。

 

clip-path: basic-shape():

 

clip-pathに使用できる関数の部分は「basic-shape」と言います。basic-shapeはCSSで要素をどのような形状にするかを記述します。

 

  • inset 四角形
  • circle 円形
  • ellipse 楕円形
  • polygon 多角形

 

clip-pathのbasic-shapeはクリッピングする形状の雛形と考えると覚えやすいかもです。

 

clip-path: inset(0 0 0 0);

 

例えばclip-pathのbasic-shapeにinsetを記述するとCSSのセレクタにした要素は四角い形状でクリッピングができるようになります。

CSSでclip-pathのbasic-shapeにinsetを指定しただけではクリッピングする形状を「四角形にします」と指定しているようなものなので、「切り抜く領域と切り抜かない境界」を値で設定します。

clip-pathでbasic-shapeの値の使い方は「inset」「circle」「ellipse」「polygon」どの形状で指定するかによって値の書き方が若干違うため覚えるのに難しさを感じました。

clip-pathのジェネレーターを活用すると多少かもしれませんが「inset」「circle」「ellipse」「polygon」で要素をクリッピングする値の使い方が覚えやすかったです。

 

clip-pathのジェネレーターを活用

 

clip-pathのジェネレーターを活用するとbasic-shapeとクリッピングしたい値が生成されたCSSを取得できるのでclip-pathの記述方法を覚えるときの参考にできます。

 

 

Clippy – CSS clip-path maker

 

上記のURLからclip-pathのジェネレーターのページに進むと上画像のようにページが開きます。

clip-pathで画像の切り抜きをしたプレビューが表示されて、プレビュー下にはクリッピングするbasic-shapeと値で構成されたCSSの記述があります。

 

 

clip-pathのジェネレーターに表示するCSSコードのbasic-shapeの値を見ると左から順番に「レッド」「グリーン」「オレンジ」「ブルー」で色分けされた記述になっているのがわかります。

色分けはプレビューにも同じ色分けがされた点が表示されます。

 

Advertisement

 

この点は頂点の座標を示しています。CSSでclip-pathの値を記述するときも基本的には頂点の座標を時計周りに指定することでクリッピングする形状を整えていく使い方をします。

clip-pathのジェネレーターに表示する色分けされたbasic-shapeの値の順番も時計回りに記述されているいるので視覚的な参考になり、CSSを書くときのclip-pathの使い方が覚えやすいです。

またclip-pathのジェネレーターに表示するプレビューで色分けされた点をマウスで移動することで値に指定する座標も変化します。

 

 

座標はx軸の横方向、y軸の縦方向の順番で記述をします。これにより頂点ごとの座標が移動するため、点と点を繋いでいる境界の形が変化します。

clip-pathのジェネレーターでどの点の値が対象の座標になって境界が変化するか分かるので、CSSでclip-pathを書くときに立ち止まったときなど活用できます。

 

CSSのclip-pathでbasic-shapeごとの使い方

 

CSSのclip-pathで「inset」「circle」「ellipse」「polygon」のbasic-shapeごとの使い方も覚えることにします。

 

  • insetは四角形
  • circleは円形
  • ellipseは楕円形
  • polygonは多角形

 

というbasic-shapeごとの形状で以下の画像をクリッピングする使い方にチャレンジ。

 

 

insetで四角形にする

 

CSSのclip-pathでinsetを指定して四角形でクリッピングするときの使い方です。

 

clip-path: inset(5% 20% 15% 10%);

 

basic-shapeのinsetは四角形に切り抜きができるので値には上下左右の4辺を使用して値を指定します。

上下左右を個別ではなく「上下と左右」「上、左右、下」とCSSのmarginとかpaddingのように指定する使い方も可能です。好奇心でinset(5% auto)にしたけどautoは効かなかったです。

 

 

clip-pathのbasic-shapeでinset() は値に指定する数値によって、基準点になる位置から内側へ矩形でクリッピングされます。

基準辺になる上下左右の位置からの距離をinset()の値に指定してください。そうすると内側に切り取れますよ。みたいに理解すると使い方が覚えやすいのかも?です。

clip-pathのジェネレーターでマウスをグリグリして数値を変えながら覚えてもよろしいかと思います。

ちなみに「矩形」は四辺形とか長方形のことで「くけい」と読みます。

「たんけい」と読んでいた人がいます。そう私です。

 

Advertisement

 

insetでclip-pathの形状を指定して四角形にした場合には「角丸」にして丸みを出す使い方もできるので覚えておいても良いかと思います。

 

clip-path: inset(5% 20% 15% 10% round 40px);

 

insetの値に基準点からの位置を記述した後にroundとその数値を半角スペース区切りで記述すると角丸にすることができます。

 

 

circleで円形に切り抜く

 

CSSのclip-pathでbasic-shapeのcircleを使用して円形に切り抜く場合の使い方です。

 

 

clip-path: circle();

 

clip-pathにcircle()を指定すると丸く切り抜くことができます。

 

clip-path: circle(40%);

 

circle()のカッコ内に値を記述する場合には、最初に「円の半径」を指定します。このときパーセントで指定すると基準になる要素に対しての比率になるようです。

CSSでclip-pathのcircle()の使い方としては「at」を使用することで円の中心を移動する使い方ができるようになります。

 

clip-path: circle(40% at 50% 50%);

 

書き方は円の半径を指定してからatを記述してx軸とy軸の方向を指定します。上記のCSSではx軸の横方向を50%に、y軸の縦方向を50%で指定しています。これにより円の基準位置は基準要素の中央に移動できます。

 

Advertisement

 

キーワードを使用した指定も可能です。

 

x軸
left とcenterとrightが使用可能

y軸
topとcenterとbottomが使用可能

 

例えばbottomだけでclip-pathのcircleの基準位置を移動する場合は以下です。

 

clip-path: circle(40% at bottom);

 

 

円の半径のサイズを大きくしてクリッピングしてしまえば何かのコンテンツで使えそうなclip-pathの使い方ができます。

 

 

clip-pathのcircleの使い方や基準位置についてよく分からなくなってきたときには、必殺のclip-pathジェネレーターで基準点をマウスでグリグリ動かしながら値を追いかけると覚えるきっかけが掴みやすくなるかと思います。

 

ellipseで楕円形に切り抜く

 

CSSのbasic-shapeでclip-pathを指定して楕円形に切り抜く場合の使い方です。

 

 

clip-path: ellipse();

 

CSSのclip-pathにellipse()を指定すると楕円形で切り抜くことができます。

 

clip-path: ellipse(25% 40% at 50% 50%);

 

ellipse()の値の記述方法はcircleと少しだけ違います。

ellipse()の楕円のサイズを設定する部分にx軸の半径とy軸の半径を半角スペースで区切って指定します。

 

 

簡単に言えばclip-pathのellipseで楕円形にするときは横と縦のサイズを個別に記述する使い方です。

そしてclip-pathのellipseで楕円形の基準位置を変えるときにはcircleと同じくatを使用することで基準の位置が移動できます。

 

 

clip-pathのジェネレーターでellipseの楕円形でクリッピングするときにはx軸(赤い点)とy軸(緑の点)ごとにサイズを調整してクリッピングしたCSSが変化するるので、ellipseを指定したclip-pathの使い方を視覚的に覚えることができます。

 

polygonで多角形にクリッピング

 

CSSのclip-pathでbasic-shapeをpolygonで指定して多角形にクリッピングする場合の使い方です。

 

 

多角形というだけあって複数の頂点になりますが、どこからどこまでが一つの頂点に使われている記述なのかを覚えるのがコツかもしれません。

 

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

 

一つずつの頂点はpolygonの値に最初にx軸、次にy軸の順番で記述します。カンマで区切って一区切りです。また形状には任意の数のポイントを定義することが可能です。(その分、複雑さも増す)

例えば上の画像のclip-path: polygonで多角形にした頂点は5つポイントがあるので1番上の頂点のx軸y軸から記述が始まり、時計回りの順番で指定をすることで多角形にクリッピングできます。

 

 

しかし実際にCSSでclip-path: polygonで要素を多角形にクリッピングしてみると難しかったです。

そんなときこそCSSのclip-pathの使い方をジェネレーターを活用しながら覚えることでclip-pathの使い方のコツが掴みやすくなります。

個人的にはなりますがclip-pathジェネレーターから自分のクリッピングしたい形状に似ているCSSをゲットして要素に適用させてから、検証ツールで座標を調整しまくることでだいぶ理解できました。

CSSのclip-pathの使い方は基本的に切り抜いたあとの形状にたどり着くために、頂点をどこまで移動すれば目的の形のクリッピング領域が導き出せるのかゲームのようなものです。(違うかも…)

疲れたらチート級のclip-pathジェネレータを使いましょう。ある意味clip-pathジェネレータの利用もclip-pathの使い方です。

 

CSSのclip-pathの使い方を覚えてやりたかったこと

 

CSSでclip-pathの使い方を覚えることにした私の今回の目的はclip-pathのpolygonで多角形を自由にクリッピングして表現できるようになることでした。

やりたかったことは一つしかなく、以下の画像のような不揃いな斜めのデザインでクリッピングしたかったがためにCSSのclip-pathの使い方を覚えることにした次第であります。

 

 

clip-path: polygon(0 15%, 98% 26%, 91% 68%, 10% 74%);

 

以前にボタンを斜めにデザインして遊んだことがあり、そのときは2つの要素を組み合わせてCSSのtransformで不揃いの斜めにしてみたのですがclip-pathを使用したほうが簡単に実現できそうだと発見できました。

長方形のコンテンツに見飽きたらCSSのclip-pathで切り抜いたデザインをして楽しんでみてください。

CSSカテゴリの最新記事