CSS Clip-Pathジェネレーター
CSS clip-pathシェイプをライブプレビュー付きで視覚的に作成し、生成されたCSSをコピーできます。
このツールについて
CSS Clip-Pathジェネレーターは、CSSを手書きせずにclip-path値を作成できる無料のブラウザベースビジュアルエディターです。座標を推測してページを更新する代わりに、シェイプタイプを選択し、ポイントをドラッグしたりスライダーを調整したりして、ライブプレビューでクリッピング結果を即座に確認できます。形状が決まったら、生成されたCSSをコピーしてスタイルシートに貼り付けるだけです。
clip-pathプロパティはモダンCSSで最も強力な視覚ツールの一つです。あらゆるHTML要素を幾何学的な形状に切り抜くことができます：アバター用の円、バッジ用の楕円、斜めヒーローセクション用のポリゴン、矢印、星、その他の想像できるカスタムシェイプ。CSSトランジションと組み合わせることで、clip-pathはSVGやcanvasがなければ不可能だった滑らかなリビールアニメーションやモーフィングエフェクトを実現します。
このツールは4つの基本シェイプ関数すべてに対応しています：調整可能な半径と中心位置を持つcircle()、独立した水平・垂直半径を持つellipse()、一連の頂点ポイントで定義される任意の形状のpolygon()、オプションの角丸付き長方形クリップのinset()。ポリゴンモードでは、三角形、五角形、六角形、星、矢印、十字などのプリセットシェイプが出発点として含まれており、さらにカスタマイズできます。
すべての処理はブラウザ内で完全に行われます。データがサーバーに送信されることはなく、第三者スクリプトも関与しません。生成されるCSSはすべてのモダンブラウザで動作する標準的なclip-path構文を使用し、すぐに使用できるクリーンな本番環境対応コードを出力します。
使い方
- ドロップダウンからシェイプタイプを選択します：Circle、Ellipse、Polygon、Inset。
- コントロールパネルのスライダーと数値入力でシェイプを調整します。ポリゴンシェイプでは、プレビュー上でポイントを直接ドラッグすることもできます。
- ギャラリーからプリセットシェイプ（三角形、星、六角形など）を選択して一般的な形状から始め、さらにカスタマイズします。
- 設定を変更するとライブプレビューがリアルタイムで更新されます。プレビューはカラフルなグラデーションを使用してクリップ領域を明確に表示します。
- プレビューの下にある生成されたCSSコードを確認し、Copy CSSをクリック（またはCtrl+Shift+Cを押す）してクリップボードにコピーします。
clip-path値をCSSルールに貼り付け、画像、div、セクション、カードなど任意の要素に適用します。
よくある質問
CSS clip-pathとは何ですか？
CSS clip-pathプロパティは、要素を特定のシェイプにクリップ（マスク）します。シェイプ内部の部分のみが表示され、外側はすべて非表示になります。circle()、ellipse()、inset()、polygon()などの基本シェイプと、SVGパス参照に対応しています。
clip-pathはすべてのブラウザでサポートされていますか？
はい。基本シェイプ（circle、ellipse、polygon、inset）を使用したclip-pathプロパティは、Chrome、Firefox、Safari、Edgeを含むすべてのモダンブラウザでサポートされています。Can I Useによると、基本シェイプのサポートはグローバルで97%を超えています。古いclipプロパティやSVGパスのurl()構文はより限定的なサポートです。
clip-pathを画像に使えますか？
もちろんです。clip-pathは<img>タグ、<video>要素、背景画像を持つdivなど、あらゆるHTML要素で動作します。シェイプは要素全体をクリップするため、円形アバター、斜めセクション、複雑な装飾的カットをあらゆるコンテンツに適用できます。
clip-pathとmaskの違いは何ですか？
clip-pathは幾何学的なシェイプを使用して可視領域を定義し、シャープなエッジを生成します。CSS maskプロパティは画像（多くの場合グラデーション）を透明度マップとして使用し、柔らかい半透明のトランジションを可能にします。クリーンな幾何学的カットにはclip-pathを、グラデーションフェードや複雑な透明効果にはmaskを使用してください。
clip-pathをアニメーション化できますか？
はい。ソースとターゲットのシェイプが同じ関数と同じ数のポイント（polygon の場合）を使用している限り、ブラウザはclip-path値をトランジションやアニメーション化できます。これにより、リビールアニメーション、モーフィングシェイプ、インタラクティブなホバートランジションなどの効果が可能になります。CSSトランジションや@keyframesで値をアニメーション化してください。
データは安全ですか？
はい。Clip-PathジェネレーターはブラウザIn内で完全に動作します。すべてのシェイプ編集、プレビューレンダリング、CSS生成はJavaScriptでローカルに処理されます。データがデバイスから送信されることはなく、サーバーリクエストや第三者スクリプトもありません。
ポリゴンのポイントはどのように機能しますか？
ポリゴンのポイントはカンマで区切られたパーセンテージのペア（x% y%）で定義されます。各ペアはポリゴンの頂点を表します。ブラウザは連続するポイント間に直線を描画し、シェイプを自動的に閉じます。プレビュー上でポイントをドラッグするか、コントロールパネルでパーセンテージ値を直接編集できます。