
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.08.30
clip-pathプロパティは、クリッピング(画像を切り抜いて表示)することができるプロパティです。
clip-pathプロパティを使うと、長方形だけでなく、円形や星形など複雑な形で画像をクリッピングできます。
CSS2まではclipプロパティを使用して、長方形のクリッピングのみ可能でしたが、今後、CSS3ではclip-pathプロパティに移行する予定です(現時点では、IEなど未対応のブラウザもあるため注意が必要)。
今回は、このようなclip-pathプロパティについてまとめたいと思います。
1.クリッピングとは
2.clip-pathプロパティの値
3.円形にクリッピング
4.多角形にクリッピング
クリッピングとは、画像の一部を切り取ることをいいます。
クリッピングを行う際には、クリッピングパスとクリッピング領域という2つの概念が重要となります。
クリッピングパスは、要素を切り取る時に必要となるパス(基本的なシェイプや複雑な多角形の位置情報)で、クリッピング領域を区切りるものです。
クリッピング領域は、クリッピングパス内の範囲をすべて含む領域のことです。
今後廃止予定となっているclipプロパティでは、長方形のクリッピングのみ実現可能でしたが、CSS3で登場したclip-pathプロパティを使用することで、長方形以外にも、基本的なシェイプやオリジナルの形で自由にクリッピングできるようになりました。
但し、現時点では IEなど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座標、y座標をスペース区切りで指定circle circle(半径 | at 中心点) 円形を指定
・半径:半径の長さを指定
・at 中心点:中心の座標をx座標、y座標をスペース区切りで指定
(centerは、画像の中心となる)elipse elipse(横の半径 | 縦の半径 | at 中心点) 楕円形を指定
・横の半径、縦の半径:半径の長さを横、縦の順にスペース区切りで指定
・at 中心点:中心の座標をx座標、y座標をスペース区切りで指定
(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 を指定した要素)に使用できます。
次の画像を使用して、実際にクリッピングしてみます。
まずは、円形でクリッピングします。
(見やすいように、背景色を付けています。)
ソースは次の通りです。
(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の円形を切り取って表示しています。
今度は、多角形でクリッピングします。
(見やすいように、背景色を付けています。)
ソースは次の通りです。
(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);として5つの頂点の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%);として3つの頂点のx座標とy座標を指定し、画像から三角形を切り取って表示しています。
「50% 0%, 0% 100%, 100% 100%」のように、画像全体の幅と高さに対するパーセンテージで座標を指定することもできます。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.