CSS shapes を編集する

ルールビュー で、CSS shape の値の隣に灰色と白の長方形の見本を表示します:

見本をクリックすると CSS shapes highlighter の有効・無効を切り替えます。これはブラウザーのビューポートで、CSS shape の値で生成した図形の周りに輪郭を表示します。

図形のそれぞれの頂点に、ドラッグハンドルがあります。ドラッグハンドルをクリック・アンド・ドラッグすると図形を変更でき、図形の視覚的な出力と、ルールビューで対応する CSS shape の値の両方が変化します。

図形が polygon() であれば、図形の辺をダブルクリックして新しいドラッグハンドルを生成できます。また、既存のドラッグハンドルをダブルクリックすると、ドラッグハンドル (および対応する頂点) を図形から削除できます。

ブラウザーのサポート

CSS shapes highlighter は Firefox 58 で、clip-path で生成した図形についてデフォルトで有効です (バグ 1405339)。shape-outside で生成した図形も編集できますが、設定項目 layout.css.shape-outside.enabled で有効化した場合に限ります。

ドキュメントのタグと貢献者

このページの貢献者: wbamberg, yyss
最終更新者: wbamberg,