Documentation CSS

この記事で学べること

  • clip-pathプロパティの基本構文
  • circle、ellipse、polygonなどの形状関数
  • SVGパスを使ったカスタムシェイプ
  • 画像やコンテンツの切り抜きテクニック
  • パフォーマンスとアクセシビリティの考慮点

概要

clip-pathプロパティは、CSSで要素の表示領域をクリッピング（切り抜き）するためのプロパティです。要素の一部を隠して特定の形状にすることで、デザインに多様な表現を加えることができ、クリエイティブなWebデザインに欠かせない機能の一つです。画像、動画、テキストブロックなどのさまざまな要素に適用でき、独特のレイアウトを簡単に実現します。

clip-pathプロパティの基本構文

clip-pathプロパティは以下の構文で使用します。

clip-path: none | <形状関数> | <SVGのパス>;
  • none クリッピングなしで、要素全体が表示されます（デフォルト）。
  • <形状関数> circle()、ellipse()、polygon()、inset()などの形状関数で、要素のクリッピング形状を定義します。
  • <SVGのパス> SVGのpath()を使用して、カスタムの複雑な形状を指定できます。

使用例

基本的なクリッピングシェイプ

以下の例では、clip-pathプロパティを使って、要素をさまざまな形にクリッピングしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clip-pathプロパティの例</title>
<style>
.circle {
width: 200px;
height: 200px;
background-color: #ff6347;
clip-path: circle(50% at 50% 50%);
}
.ellipse {
width: 300px;
height: 200px;
background-color: #4682b4;
clip-path: ellipse(50% 30% at 50% 50%);
}
.polygon {
width: 200px;
height: 200px;
background-color: #32cd32;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.inset {
width: 300px;
height: 200px;
background-color: #ffa500;
clip-path: inset(20px 30px 20px 30px);
}
</style>
</head>
<body>
<h2>clip-path: circle()</h2>
<div class="circle"></div>
<h2>clip-path: ellipse()</h2>
<div class="ellipse"></div>
<h2>clip-path: polygon()</h2>
<div class="polygon"></div>
<h2>clip-path: inset()</h2>
<div class="inset"></div>
</body>
</html>
  • circle() 円形にクリップします。50% at 50% 50%は要素の中心に円を配置します。
  • ellipse() 楕円形にクリップします。幅と高さを指定して柔軟に形を調整できます。
  • polygon() 多角形にクリップします。複数の座標点を指定して形状を自由に定義します。
  • inset() 四角形の内側をクリップします。マージンのように各辺の距離を指定します。

SVGパスを使ったカスタムクリッピング

clip-pathプロパティでは、SVGのパスデータを使用して、より複雑で自由な形状を指定することも可能です。

<div class="custom-shape"></div>
<style>
.custom-shape {
width: 300px;
height: 300px;
background-color: #ff69b4;
clip-path: path('M 150 0 L 75 200 L 225 200 Z');
}
</style>

この例では、SVGパスを使って三角形のクリッピングを行っています。path()を使うことで、デザイナーのアイデアに応じた多様な形を実現できます。

clip-pathプロパティの注意点

  • パフォーマンスへの影響: 複雑なクリッピングシェイプやアニメーションを適用すると、レンダリングパフォーマンスに影響を与える可能性があります。特に、古いブラウザやリソースの少ないデバイスでの動作を確認することが重要です。
  • アクセシビリティ
    clip-pathでクリップされた部分は視覚的に隠されますが、画面リーダーなどには認識されることがあります。コンテンツの意図しない部分がクリップされないように注意し、視覚効果とユーザー体験を両立させる必要があります。
  • ブラウザサポート
    clip-pathはモダンなブラウザでサポートされていますが、一部の古いブラウザではサポートされていない可能性があるため、必要に応じてフォールバックのスタイルを考慮してください。

まとめ

clip-pathプロパティは、Webデザインにおいて要素の一部を切り抜き、独創的で魅力的なビジュアルを作成するために非常に便利なCSSプロパティです。circle()やpolygon()などのシェイプ関数を活用して、様々なデザインを試すことができます。また、SVGパスを使用することで、自由度の高いカスタムシェイプのクリッピングも可能です。デザインのアクセントやインタラクティブな要素の強調に、ぜひ活用してみましょう。

ポイントの振り返り

形状関数説明構文例
circle()円形circle(50% at 50% 50%)
ellipse()楕円形ellipse(50% 30% at 50% 50%)
polygon()多角形polygon(50% 0%, 0% 100%, 100% 100%)
inset()内側の矩形inset(20px 30px)
path()SVGパスpath('M 150 0 L 75 200...')

よく使うシェイプ

シェイプ構文
円clip-path: circle(50%)
三角形clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
六角形clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)

参考文献

円