CSS position-area Editor

GitHub (burnworks/css-position-area-editor)

position-area プロパティをサポートしていません

お使いのブラウザは、CSS の position-area プロパティをサポートしていません。ブラウザごとのサポート状況は下記をご確認ください。

Can I use...

Anchor
Item

position-area プロパティについて

CSS の position-area プロパティは、アンカーボックスを中心とした、3×3 のグリッドを想定し、そのグリッドに対してどのようにボックスを配置するかを指定することができる CSS プロパティです。

position-area プロパティを使用することで、グリッド内でボックスの配置を直感的に設定することが可能になります。

仕様書: CSS Anchor Positioning

このツールについて

このツールは、position-area プロパティに指定可能な値をセレクトメニューから選択することで、実際にアンカー要素(「Anchor」とラベルのあるエリア )に対して、配置ボックス(「Item」とラベルのある要素)がどのように配置されるかを確認できます。

セレクトメニューから適用したい値を選択し「適用」ボタンを押してください。配置ボックスが値に応じた位置に配置されます。「CSSをコピー」ボタンを押すことで、適用されたCSSをクリップボードにコピーできます。

position-area プロパティには最大で2つの値を指定可能ですが、組み合わせには制約があるため、セレクトメニューは「値1」で選択した内容に応じて、「値2」はそれと組み合わせ可能な値のみが表示されるようにしています。「値1」もしくは「値2」を「指定しない」とすれば、1つだけ値を指定した状態になります。