CSSクリップパスジェネレーター

形状プリセットを選択し、スライダーを調整して、CSS clip-pathコードをコピーします。

形状タイプ

ライブプレビュー

生成されたCSS

使い方

  1. 形状タイプを選択: ポリゴン、円、楕円、またはinset(オプションの丸い角を持つ長方形)。
  2. コントロールポイントをドラッグ: プレビュー上の形状ハンドルを移動して、マスクエリアを正確にカスタマイズします。
  3. CSSをコピー: 生成されたclip-pathプロパティ値はスタイルシートに貼り付ける準備ができています。

なぜCSS clip-pathジェネレーターを使うのか?

CSS clip-pathは、定義されたエリアの外側にあるすべてをマスクすることで、非長方形の形状を作成します。斜めのセクション区切り、六角形の画像トリミング、カスタムボタン形状、クリエイティブなホバー効果、マスクされた画像表示に使用されます。clip-pathポリゴン座標を手動で書くには、各頂点のパーセンテージを計算する必要があります, 退屈で視覚化が難しいです。このインタラクティブジェネレーターを使うと、ポイントを視覚的にドラッグして、正確なCSS値を瞬時に取得できます。

機能

よくある質問

clip-pathはクリック可能なエリアに影響しますか?

はい。デフォルトでは、ポインタイベントはマスクエリア内でのみ登録されます, マスクされたエリアは見えなくクリックもできません。要素を視覚的にマスクしながら完全にクリック可能にするには、要素にpointer-events: allを使用するか、透明レイヤーをオーバーレイします。

clip-pathをアニメーションできますか?

はい、clip-pathはCSSのトランジションとアニメーションの対象になります。同じ数のポイントを持つ2つのポリゴン間でアニメーションすると、滑らかなモーフィング効果が得られます。異なる数のポイントを持つ形状は、補間ではなくジャンプでアニメーションします。

clip-pathはすべてのブラウザでサポートされていますか?

clip-pathはすべてのモダンブラウザでサポートされています。url(#id)構文を使ったSVG形状の場合、サポートはさらに広範です。基本的なpolygon、circle、ellipse、inset値はChrome、Firefox、Safari、Edgeで普遍的に動作します。

CSS clip-pathが実際に行うこと

CSS clip-pathプロパティは要素を選択した形状にマスクします。形状の内側のものは表示され、外側のものは透明になります。要素のレイアウトボックスは変更されません(マージン崩壊、フロー、兄弟位置の目的で同じ矩形を占有します)が、クリップ領域内のピクセルのみが描画されます。これによりclip-pathはトリミング(画像を永続的に変更する)とは異なり、配置(物を動かす)とも異なります。clip-pathはピクセルが画面にあたる直前に適用される表示時のマスクです。

4つの基本形状関数があります: polygon()(パーセントまたはピクセル座標のリストの頂点)、circle()(半径と中心)、ellipse()(2つの半径と中心)、inset()(各エッジから測定された矩形、オプションで丸い角)。これら4つには複雑すぎる形状(不規則な曲線、凹んだインデントを持つ星、書道の輪郭)には、clip-pathはpath()経由のSVGパス、またはurl(#id)経由のSVG 要素への参照も受け付けます。ブラウザは要素を描画し、その後あなたの形状によって定義されたアルファマスクを通して合成します。

clip-pathは10年前に画像エディタが必要だった形状を可能にするため、最新のウェブデザインにとって重要です。対角のセクション仕切り、六角形のアバターグリッド、シェブロンバナー、星型の写真: すべてが今や純粋なCSSで、任意のサイズに拡大縮小可能、ホバーでアニメーション可能、そして基となる要素がラスタライズされた画像ではなくHTMLのままなのでアクセシブルです。トレードオフは冗長性です: シンプルなダイヤモンドのためにpolygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)を手で書くことは実行可能ですが、12頂点の星やカスタムロゴの切り抜きはビジュアルエディタなしでは実用的ではありません。そこにこのジェネレーターが収まります。

このツールの内部での動作

プレビューはあなたが選択したclip-pathがインラインCSSとして適用されたdivで、コントロールハンドルの各ドラッグで更新されます。ハンドルは各頂点のパーセント座標でプレビューの上に重ねられた絶対位置の円です。ハンドルをドラッグすると、JavaScriptがmousemove(またはtouchmove)イベントをキャプチャし、ピクセル位置をプレビュー領域のパーセントに変換し、メモリ内の多角形のその頂点を更新し、clip-path文字列を再適用します。リアルタイムレンダリングは、ドラッグしながら形状が変化するのを後ではなく見られることを意味します。

生成されたCSSは頂点を多角形の文字列に結合することで構築されます: 多角形モードではpolygon(x1% y1%, x2% y2%, ...)、より単純な形状タイプにはcircle(r% at cx% cy%)、ellipse(rx% ry% at cx% cy%)、inset(top right bottom left round radius)です。ピクセル値ではなくパーセント値が使用されるのは、パーセンテージが要素と自動的に拡大縮小するためです。300x200で正しく見える多角形は、CSSの変更なしで600x400でも正しく見えます。コードボックスは各操作で更新され、Copy CSSボタンは現在の値をクリップボードに書き込みます。

何もブラウザを離れません。プレビュー、形状の計算、CSS生成、クリップボードのコピーはすべてクライアント側のJavaScriptです。ネットワークリクエストは行われません。画像はアップロードされません。形状の選択についての分析もありません。ツールには初回ロードで一度提供される静的HTMLとJavaScript以外のバックエンドはまったくありません。使用中にブラウザのネットワークタブを開くと、最初のページロード後にゼロのリクエストが表示されます。あなたが生成するCSSは任意のスタイルシートに貼り付けるためのあなたのものです。

CSSクリッピングの簡単な歴史

現実世界のワークフロー

よくある落とし穴とその意味

プライバシー: すべてがあなたのブラウザで動作します

CSSジェネレーターツールは伝統的に2つのキャンプに分かれます: クライアント側のJavaScriptを使用したシンプルなHTMLページ(プライベート、高速、アカウント不要)とクラウド保存されたプロジェクトを備えたフル機能エディタ(コラボレーション可能だが、すべての形状編集が他人のサーバーに記録されます)。このツールはしっかりと最初のキャンプにあります。あなたがドラッグする多角形の座標、選ぶ色、コピーするCSS: すべてがあなたのブラウザセッションに留まり、どこにも送信されません。ページをリフレッシュし、CSSを最初にコピーしていない限り、状態は消えます。

プライバシーの含意は主に専有的な作業に関係します。機密のブランドリデザインのカスタムボタン形状をプロトタイプする設計代理店、未発表のゲームUIで作業しているインディー開発者、まだNDAの下にある製品のレイアウトを設計するエンタープライズチーム: 形状自体またはその反復履歴が進行中の作業に関する情報を漏らす可能性のある任意の文脈。このツールでは、それらのリスクのいずれも存在しません。なぜなら、それらのいずれもキャプチャされないからです。ハンドルをドラッグしている間にブラウザのネットワークタブを開くと、ゼロの外向きリクエストが表示されます。

他のツールが正しい選択である場合

その他のよくある質問

頂点座標にパーセンテージまたはピクセルを使用できますか?

両方とも機能します。パーセンテージは要素のボックスと拡大縮小するので、パーセンテージで定義された多角形は要素がリサイズされたときに比例した形状を保ちます。ピクセルは絶対的なので、ピクセル座標を持つ多角形は要素に関係なく同じサイズを保ちます。レイアウトと共にリサイズすべき形状にはパーセンテージを使用し(ほとんどの場合)、正確なピクセル位置が必要な形状(例えば、特定のデザイン要素への整列)にはピクセルを使用します。混在もできます: polygon(50% 10px, 100% 50%, ...)は有効です。

clip-pathはSEOまたはスクリーンリーダーに影響しますか?

いいえ。clip-pathは視覚のみのプロパティです。基となるHTMLは完全にアクセシブルです: クリップされた要素内のテキストはまだ検索エンジンによってインデックスされ、まだスクリーンリーダーによってアナウンスされ、まだキーボードナビゲーションによって選択可能です。視覚的なスタイリングにclip-pathを使用してください。意味的にコンテンツを隠す方法として使用しないでください(それにはdisplay: noneまたはaria-hidden属性が必要です)。視覚的にクリップされたコンテンツはアクセシビリティツリーに存在し続けます。

clip-pathをレスポンシブにするにはどうすればよいですか?

ピクセルの代わりにパーセンテージを使用し、異なるブレークポイントで結果を確認してください。モバイルとデスクトップで異なる比率が必要な形状には、CSSメディアクエリを使用してclip-path値をスワップします: モバイル形状の@media (max-width: 768px)内で異なるclip-pathを宣言してください。複雑なレスポンシブニーズ(例えば、モバイルで円になる多角形)には、ウィンドウサイズに基づいてclip-pathを再計算するためのJavaScriptの使用を検討してください。ただし、純粋なCSSアプローチはほとんどのケースを処理します。

clip-pathは動画とiframeに適用できますか?

はい。clip-pathはと