一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

  1. 名古屋のホームページ制作会社 花のや
  2. 花のやブログ
  3. clip-pathでクリッピング
2023/12/26プログラミングHTMLCSS

clip-pathでクリッピング

覚えている方も覚えていない方もお久しぶりです。
お世話になっております、平山(旧:高橋)です。

clip-pathそれはよく聞くけどなんだかよくわからない。
そういって、なんとなく避けていたけれどこのブログを機会に少し調べてみました。

クリッピング とは?

クリッピング(clipping)とは、もともと新聞、雑誌の記事を切り抜いて保管することを意味していました。 しかし、近年のメディアの広がりにより、現在は新聞・雑誌だけではなくWEBサイトやTV、ラジオ、SNSといった様々なメディアの情報から必要な記事を「切り抜くこと」を含んだ言葉となっています。

クリッピングとは | クリッピング・記事検索サービスのELNET

Photoshopでもクリッピングマスクってありますよね。それをCSSでやれるわけです。
たとえばこの画像。

この写真を三角に切り取ってみます。

三角形になりましたね。私の頼んだドリンクだけ切り取れました。
clip-path プロパティは画像(img 要素)だけではなく、様々な要素にも適用できます。

クリッピングパスの考え方

これで四角

clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);

カンマごとに、
1つめが左上の頂点
2つめが右上の頂点
3つめが右下の頂点
4つ目が左下の頂点になっています。

数字がふたつならんでいるのは左側がx軸、右側がy軸。
左上が始点。x,yともに 0 です。
これさえ覚えればなんとなくいける気がしますね。

正三角形にしたい場合は・・・左上の頂点を真ん中にし、右上の頂点を消せばいいので、

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

こう!

ほかにもいろいろな形ができるようで
clip-path: circle(50% at 50% 50%);
これは円ができます。

clip-path: ellipse(50px 60px at 0 10% 20%);
これで楕円ですね。

clip-sourceではクリップパスが定義されている SVG の clipPath 要素の id を url() 関数を使って指定できるのですが、手元に良いSVGがないので割愛させていただきます。

お世話になっているclip-path ジェネレーター

Clippy
矢印もできるみたいです。

これを動かしているだけでも楽しいですね。
ぜひ皆様も良いクリッピングパス日和をお過ごしください。

この記事を書いた人:hirayama

主にコーディング担当しています。 1児(5歳)の母としてお酒好きヒカセンとして日々奮闘中です。 一つ願いが叶うなら頭痛をなくしてほしい。

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

Webサイト制作・その他お仕事のご依頼、
ご相談についてお気軽にお問い合わせください。

  • ホームページ制作で”補助金・助成金”使えます!
  • WEBに関する無料個別相談会
株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-211-9898 / FAX.052-211-9899

お問い合わせ