【HTML/CSS】clip-pathの利用について
2025年10月21日〇 まずはじめに、clip-pathとは？
CSSの要素（画像やテキストなど）を指定した形に「切り抜いて表示する」ためのプロパティになります。形は、丸や多角形、楕円など様々です.。
基本的な指定方法
clip-path:形(形についての設定);
clip-pathのプロパティは主なプロパティは下記4つになります。
① inset()：四角形（角丸）
② circle()：丸
③ ellipse()：楕円
④ polygon()：多角形
① inset()：四角形（角丸）；」
「inset()」は要素の内側を四角形の形に切り抜くための関数になります。
＝値の指定方法＝
inset:(上 右 下 左 round 角丸);
※ 角丸を付けない場合、round以下は省略可。
＝実勢の使用例＝
clip-path:inset(20px 20px 20px 20px round 30px);
解説：
要素の上・右・下・左をそれぞれ 20px 内側に切り抜き、
さらに round 30px の指定によって 角を30px丸く しています。
つまり、上下左右20pxずつ削った角丸の四角形に切り抜かれる指定です。
② 「circle()：丸；」
「circle()」は要素の内側を丸の形に切り抜くための関数になります。
＝値の指定方法＝
circle:(半径 at 円の中心のX座標 円の中心のY座標);
＝実勢の使用例＝
clip-path: circle(40% at 50% 50%);
解説：
要素の中央（50% 50%）を円の中心として、半径を要素の短辺の 40% に設定しています。
つまり、要素の真ん中に、少し小さめの円形で切り抜く指定です。40% は「円の半径」を、at 50% 50% は「円の中心の位置（X座標・Y座標）」をそれぞれ示しています。
③ 「ellipse()：楕円；」
「ellipse() は、要素を楕円形に切り抜くための関数です。
半径を X軸方向・Y軸方向に個別で指定できる点が circle() と異なります。
＝値の指定方法＝
clip-path: ellipse(X軸方向の半径 Y軸方向の半径 at 円の中心のX座標 円の中心のY座標);
＝実勢の使用例＝
clip-path: ellipse(60％ 40％ at 50% 50%);
解説：
要素の中央（50% 50%）を中心として、
X軸方向に半径 60%、Y軸方向に半径 40% の楕円形で切り抜く指定です。
そのため、横に少し長い楕円の形になります。
④「polygon()：多角形；」
「polygon() は、要素を多角形の形に切り抜くための関数です。
各頂点の座標を指定して、好きな形を自由に作ることができます。
＝値の指定方法＝
clip-path: polygon(X座標 Y座標, X座標 Y座標, X座標 Y座標, …);
＝実勢の使用例＝
clip-path: polygon(40% 0%, 0% 100%, 100% 100%);
解説：
上頂点を中央（40% 0%）に、左下を（0% 100%）、右下を（100% 100%）に指定しています。
この3点を結ぶことで、上が尖った三角形のような形で要素を切り抜く指定になります。
〇 実際にclip-pathを使ってみよう！
実際のソースを用いて、clip-pathを使用します。
！source！
<!DOCTYPE html>
<html lang=”ja”>
<body>
<style>
.sec{
clip-path:polygon(0 0,100% 0,150px 200px,0 100px);
background:url(keshiki.jpg);
background-size:cover;
width:300px;
height:200px;
}
</style>
<section class=”sec”></section>
</body>
</html>
このコードでは、clip-path: polygon() を使って、画像を四角形に近い多角形の形に切り抜いています。polygon() の中の値は「頂点の座標（X座標 Y座標）」を表し、
**左上を原点（0 0）**として、順番に点を結んでいく仕組みです。
指定した値、4点を線で結ぶことで、右下が斜めにカットされたような形になります。
また、平行四辺形で切り抜いて背景画像として表示させることで、おしゃれな斜め背景として利用することもできます。
！source！
<!DOCTYPE html>
<html lang=”ja”>
<body>
<style>
.sec{
display:grid;
place-items:center;
background:#8cf;
height:400px;
clip-path:polygon(0 20%,100% 0,100% 75%,0 100%);
}
</style>
<section class=”sec”>Telln Pc School</section>
</body>
</html>
このコードでは、clip-path: polygon() を使って
セクション全体を斜めにカットされた四角形のような形に切り抜いています。
指定した4点を線で結ぶことで、上辺と下辺が斜めになったデザインになります。
下二枚の画像は、clip-path 適用前と適用後の比較画像になります。
形の変化を見て、どのように要素が切り抜かれているか確認してみましょう。
〇最後に・・・
clip-path は、要素や画像を自由な形に切り抜ける便利なプロパティです。circle() や ellipse()、polygon() などを使えば、
コードだけで手軽におしゃれなデザインを作ることができます。
デザインにちょっとした個性を出したいときにとても役立ちます。
ぜひ一度、試してみてください！
関連サイト
パソコン教室
パソコン修理・販売・買取・サポート
