position-area
プロパティをサポートしていません
お使いのブラウザは、CSS の position-area
プロパティをサポートしていません。ブラウザごとのサポート状況は下記をご確認ください。
Anchor
Item
position-area
プロパティについて
CSS の position-area
プロパティは、アンカーボックスを中心とした、3×3 のグリッドを想定し、そのグリッドに対してどのようにボックスを配置するかを指定することができる CSS プロパティです。
position-area
プロパティを使用することで、グリッド内でボックスの配置を直感的に設定することが可能になります。
このツールについて
このツールは、position-area
プロパティに指定可能な値をセレクトメニューから選択することで、実際にアンカー要素(「Anchor」とラベルのあるエリア )に対して、配置ボックス(「Item」とラベルのある要素)がどのように配置されるかを確認できます。
セレクトメニューから適用したい値を選択し「適用」ボタンを押してください。配置ボックスが値に応じた位置に配置されます。「CSSをコピー」ボタンを押すことで、適用されたCSSをクリップボードにコピーできます。
position-area
プロパティには最大で2つの値を指定可能ですが、組み合わせには制約があるため、セレクトメニューは「値1」で選択した内容に応じて、「値2」はそれと組み合わせ可能な値のみが表示されるようにしています。「値1」もしくは「値2」を「指定しない」とすれば、1つだけ値を指定した状態になります。