• Home
  • Web制作
  • 【CSS】clip-pathで画像を自由に切り抜こう！基本から活用事例まで徹底解説

【CSS】clip-pathで画像を自由に切り抜こう！基本から活用事例まで徹底解説

schedule
Tags: CSS

はじめに

Webサイトを制作する際、画像を思い通りの形に切り抜きたいと思ったことはありませんか？

CSSの clip-path プロパティを使えば、画像を四角形だけでなく、円形や三角形、星形など、様々な形に切り抜くことができます。

この記事では、clip-path の基本的な使い方から、実際のWebサイトで活用できる応用的な使い方まで、具体的なコード例を交えながら解説していきます。

1. clip-pathの基本

1-1. clip-pathとは？

clip-path は、要素の表示領域を指定するCSSのプロパティです。

指定した形状の外側にある部分は切り取られて表示されなくなります。

従来、画像の切り抜きはPhotoshopなどの画像編集ソフトで行うのが一般的でしたが、clip-path を使えばWebサイト上で直接切り抜くことができます。

1-2. clip-pathの基本的な使い方

clip-path プロパティには、切り抜く形状を指定する値を設定します。

基本的な図形を指定する場合は、以下のような値を使用します。

  • circle(): 円形
  • ellipse(): 楕円形
  • inset(): 長方形（余白を指定）
  • polygon(): 多角形

それぞれの値の使い方は、後ほど詳しく解説します。

2. clip-pathで使える図形と指定方法

2-1. circle() - 円形に切り抜く

circle() を使用すると、要素を円形に切り抜くことができます。

構文

clip-path: circle(半径 at 中心座標);
  • 半径: 円の半径を指定します。
  • 中心座標: 円の中心の座標を指定します。 center キーワードを使用すると、要素の中心を指定できます。

使用例

.circle-image {
  clip-path: circle(50% at center); /* 要素の中心を基準に、半径50%の円形で切り抜く */
}

2-2. ellipse() - 楕円形に切り抜く

ellipse() を使用すると、要素を楕円形に切り抜くことができます。

構文

clip-path: ellipse(水平半径 垂直半径 at 中心座標);
  • 水平半径: 楕円の水平方向の半径を指定します。
  • 垂直半径: 楕円の垂直方向の半径を指定します。
  • 中心座標: 楕円の中心の座標を指定します。 center キーワードを使用すると、要素の中心を指定できます。

使用例

.ellipse-image {
  clip-path: ellipse(50% 40% at center); /* 要素の中心を基準に、水平半径50%、垂直半径40%の楕円形で切り抜く */
}

2-3. inset() - 長方形（余白）で切り抜く

inset() を使用すると、要素を長方形に切り抜くことができます。

構文

clip-path: inset(上辺の余白 右辺の余白 下辺の余白 左辺の余白);
  • 上辺の余白: 要素の上辺からの余白を指定します。
  • 右辺の余白: 要素の右辺からの余白を指定します。
  • 下辺の余白: 要素の下辺からの余白を指定します。
  • 左辺の余白: 要素の左辺からの余白を指定します。

使用例

.inset-image {
  clip-path: inset(10px 20px 30px 40px); /* 上辺10px、右辺20px、下辺30px、左辺40pxの余白で切り抜く */
}

2-4. polygon() - 多角形に切り抜く

polygon() を使用すると、要素を多角形に切り抜くことができます。

構文

clip-path: polygon(頂点1の座標, 頂点2の座標, 頂点3の座標, ...);
  • 頂点の座標: 多角形の各頂点の座標を指定します。座標は、要素の左上を起点としたパーセンテージで指定します。

使用例

.triangle-image {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* 三角形に切り抜く */
}

3. clip-pathを活用したWebサイト表現例

3-1. 画像を丸く切り抜く

プロフィール画像やサムネイル画像などを丸く切り抜く表現は、Webサイトでよく見られます。

clip-path: circle(50% at center); を使用することで、簡単に実装できます。

3-2. スライドショーの画像を斜めに切り抜く

スライドショーの画像を斜めに切り抜くことで、動きを表現することができます。

polygon() を使用して、斜めの多角形を指定することで実現できます。

3-3. ホバーエフェクトで画像の切り抜きを変える

ホバーエフェクトと組み合わせることで、マウスホバー時に画像の切り抜き方を変えることができます。

transition プロパティと組み合わせることで、滑らかなアニメーションを実現できます。

4. clip-pathを使用する際の注意点

  • ブラウザによって対応状況が異なるため、各ブラウザの対応状況を確認する必要があります。
  • 複雑な形状に切り抜く場合は、パフォーマンスに影響を与える可能性があります。

5. まとめ

この記事では、CSSのclip-pathプロパティについて、基本的な使い方から応用的な使い方まで解説しました。

clip-path を使用することで、画像を様々な形に切り抜くことができ、Webサイトのデザインの幅が広がります。ぜひ、あなたのWebサイトにも取り入れてみてください。

関連記事