CSS【 clip-path 】～クリッピング

clip-pathプロパティは、クリッピング（画像を切り抜いて表示）することができるプロパティです。
clip-pathプロパティを使うと、長方形だけでなく、円形や星形など複雑な形で画像をクリッピングできます。
CSS2まではclipプロパティを使用して、長方形のクリッピングのみ可能でしたが、今後、CSS3ではclip-pathプロパティに移行する予定です（現時点では、IEなど未対応のブラウザもあるため注意が必要）。
今回は、このようなclip-pathプロパティについてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. クリッピングとは

クリッピングとは、画像の一部を切り取ることをいいます。

クリッピングを行う際には、クリッピングパスとクリッピング領域という２つの概念が重要となります。
クリッピングパスは、要素を切り取る時に必要となるパス（基本的なシェイプや複雑な多角形の位置情報）で、クリッピング領域を区切りるものです。
クリッピング領域は、クリッピングパス内の範囲をすべて含む領域のことです。

今後廃止予定となっているclipプロパティでは、長方形のクリッピングのみ実現可能でしたが、CSS3で登場したclip-pathプロパティを使用することで、長方形以外にも、基本的なシェイプやオリジナルの形で自由にクリッピングできるようになりました。
但し、現時点では IEなどclip-pathプロパティ未対応のブラウザがあるため、その点は注意が必要です。

▲目次へ戻る

2. clip-pathプロパティの値

clip-pathプロパティの値は、次のような形で指定します。

clip-path:clip-source | [basic-shape || geometry-box] | none

clip-source、basic-shape、geometry-boxで指定する値は、次の通りです。

clip-source（URLの指定）
url	url()のカッコ内に<svg>で指定した<clipPath>のIDを記述する
basic-shape（基本シェイプ機能の指定）
polygon	polygon（[fill-rule] | x1 y1,x2 y2, ･･･） 多角形の頂点を指定 ・[fill-rule]：塗り潰しの指定 　　nonzero=全面（初期値） 　　evenodd=領域が囲まれている線の本数が奇数の場合、塗り潰す 　　　　　　 偶数の場合、塗らない（白抜き） ・x1 y1,x2 y2･･･：多角形の頂点をx座標、ｙ座標をスペース区切りで指定
circle	circle（半径 | at 中心点） 円形を指定 ・半径：半径の長さを指定 ・at 中心点：中心の座標をx座標、ｙ座標をスペース区切りで指定 　　　　　　 （centerは、画像の中心となる）
elipse	elipse（横の半径 | 縦の半径 | at 中心点） 楕円形を指定 ・横の半径、縦の半径：半径の長さを横、縦の順にスペース区切りで指定 ・at 中心点：中心の座標をx座標、ｙ座標をスペース区切りで指定 　　　　　　 （centerは、画像の中心となる）
inset	inset（length | round 「border-radius」） 長方形を指定 ・length：画像の端からの距離を1～4個までスペースで区切って指定できる 　　　　　 指定個数の文法は、marginと同様 ・round：角を丸くする場合に「border-radius」とともに指定する ・border-radius：丸みの長さを指定する（px、%などを付けることもできる） 　　　　　　　　長さを1つ指定=四隅が同じ丸み 　　　　　　　　長さを2つ指定=左上と右下、右上と左下の順の丸み 　　　　　　　　長さを4つ指定=左上、右上、右下、左下の順の丸み 　　　　　　　　長さを2つスラッシュ区切り=水平方向 / 垂直方向の丸み 　　　　　　　　 0を指定=丸みなし
geometry-box（basic-shapeと組み合わせて指定）
margin-box	マージンを含めた長方形を指定
border-box	ボーダーを含めた長方形を指定
padding-box	パディングを含めた長方形を指定
content-box	パディングの内側のコンテント領域の長方形を指定
fill-box	オブジェクトバウンディングボックスをレファレンスボックスとして使用
stroke-box	ストロークバウンディングボックスをレファレンスボックスとして使用
view-box	直近のSVGビューポイントを使用
none（クリッピングパスを指定しない）

　
clip-pathプロパティの値は、継承されません。
また、clip-pathプロパティは、絶対位置の指定をした要素（position:absolute または position:fixed を指定した要素）に使用できます。

▲目次へ戻る

3. 円形にクリッピング

次の画像を使用して、実際にクリッピングしてみます。

まずは、円形でクリッピングします。
（見やすいように、背景色を付けています。）

　
ソースは次の通りです。

<!-- CSSファイル -->
div.sample{width:350px; padding:10px; background:#EEE;}
.sample-circle{clip-path: circle(75px at center);}

<!-- HTMLファイル -->
<div class="sample">
  <div><img src="image.jpg" class="sample-circle"></div>
</div>

clip-path: circle(75px at center);と指定して、画像の中心から半径75pxの円形を切り取って表示しています。

▲目次へ戻る

4. 多角形にクリッピング

今度は、多角形でクリッピングします。
（見やすいように、背景色を付けています。）

星型にクリッピング

　
ソースは次の通りです。

<!-- CSSファイル -->
div.sample{width:350px; padding:10px; background:#EEE;}
.sample-star{clip-path: polygon(75px 0px, 30px 150px, 150px 60px, 0px 60px, 120px 150px);}

<!-- HTMLファイル -->
<div class="sample">
  <div><img src="image.jpg" class="sample-star"></div>
</div>

clip-path: polygon(75px 0px, 30px 150px, 150px 60px, 0px 60px, 120px 150px);として５つの頂点のx座標とy座標を指定し、画像から星形を切り取って表示しています。
　

三角形にクリッピング

　

ソースは次の通りです。

<!-- CSSファイル -->
div.sample{width:350px; padding:10px; background:#EEE;}
.sample-triangle{clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}

<!-- HTMLファイル -->
<div class="sample">
  <div><img src="image.jpg" class="sample-triangle"></div>
</div>

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);として３つの頂点のx座標とy座標を指定し、画像から三角形を切り取って表示しています。
「50% 0%, 0% 100%, 100% 100%」のように、画像全体の幅と高さに対するパーセンテージで座標を指定することもできます。

▲目次へ戻る