はじめに
みなさんは、「CSS Anchor Positioning」を知っていますか？
CSS Anchor Positioning は、特定の要素(アンカー)を基準にして、その要素から別の要素の位置を指定できる機能です。
この記事では、そんなCSS Anchor Positioningを紹介しようと思います。
CSS Anchor Positioningの使い方
CSS Anchor Positioningとは、特定の要素をAnchor（アンカー）として、
Anchor（アンカー）の要素を基準にtooltipなどの要素の位置を決めることができるものです。
1. アンカーを決める
まずは、アンカーにしたい要素に anchor-name プロパティを指定します。
anchor-name プロパティには、CSS変数と同様に、--〇〇 という形で一意の識別子を割り当てます。
.anchor {
anchor-name: --sample-anchor;
}
2. アンカーを紐付ける
アンカーを基準に位置を決めたい要素にアンカーを紐付けます。
紐付ける方法は2つの方法があり、「明示的にアンカーを紐づける」と「暗黙的にアンカーを紐づける」です。
⚪︎ 暗黙的にアンカーを紐づける方法
暗黙的にアンカーを紐づける方法は、position-anchor プロパティを指定する方法です
position-anchor プロパティに anchor-name で指定した識別子を割り当てます。
その後、anchor() 関数を使用して、位置を決める時にアンカーを明示せずに指定します。
/*暗黙的に紐づける*/
.boat {
position-anchor: --sample-anchor;
top: anchor(bottom);
}
⚪︎ 明示的にアンカーを紐づける方法
明示的にアンカーを紐づける方法は、anchor() 関数にアンカーを明示して、要素を配置する方法です
/*明示的に紐付ける*/
.boat {
top: anchor(--sample-anchor bottom);
}
3. アンカーを基準に位置を決める
アンカーを基準に位置を決めたい要素の位置は、CSSの絶対位置に基づいて行われます。そのため、position: absolute; を指定する必要があります。
そして、Anchor() 関数を使用して、位置を決めます。
上記の画像のようにアンカーの基準となる位置を、位置を決めたい要素に記述します。
.boat {
position-anchor: --sample-anchor;
position: absolute;
top: anchor(bottom); /*固定したい要素のtopをアンカーのbottomに合わせている*/
left: anchor(right); /*固定したい要素のleftをアンカーのrightに合わせている*/
}
論理的な配置を使用したい場合は、以下の値を Anchor 関数に指定しても大丈夫です。
inset-block-start、inset-inline-start、inset-block-end、inset-inline-end
⚪︎ Tips: 位置を決めたい要素をアンカーの中央に配置したい時
位置を決めたい要素をアンカーの中央に配置したい時、left: Anchor(center);を指定しても、中央からずれてしまいます。
その時に使うのが、anchor-center という値です。
anchor-center を justify-self、align-self、justify-items、align-itemsに指定することで、アンカーの中央には一してくれます。
.boat {
position-anchor: --sample-anchor;
position: absolute;
bottom: anchor(top); /*固定したい要素のbottomをアンカーのtopに合わせている*/
justify-self: anchor-center; /*固定したい要素をアンカーの中央に合わせている*/
}
⚪︎ Tips: 複数のアンカーを基準に位置を指定する
複数のアンカーを基準に位置を決めたいとき、は、Anchor() 関数を使う時にアンカーを明示的に指定すればできます。
.boat {
position: absolute;
top: anchor(--anchor-one bottom); /*固定したい要素のtopを--anchor-oneのbottomに合わせている*/
left: anchor(--anchor-two right); /*固定したい要素のleftを--anchor-twoのrightに合わせている*/
}
CSS Anchor Positioningの発展的な使い方
ここからは、CSS Anchor Positioningの発展的な使い方について解説します。
⚪︎ inset-area を使って位置を決める
CSS Anchor Positioningには、インセット領域と呼ばれる新しいレイアウトメカニズムが含まれています。
以下の画像のように9セルグリッドの位置に指定することができます。
.boat {
position-anchor: --sample-anchor;
position: absolute;
inset-area: top left; /* ① の位置配置したい時 */
}
セルの1箇所だけに配置するだけではなく、
inset-area: top span-left; では、①と②の位置に配置され、
inset-area: bottom span-all; では、⑦、⑧、⑨の位置に配置されたりと
自由に配置することができます。
(20パターンくらいあるのでここでは全部の記載は省略します🙏)
⚪︎ anchor-size() で要素のサイズを設定する
anchor-size() 関数を使用することで、アンカーのサイズに基づいて要素のサイズや配置をすることができます。
.boat {
position-anchor: --sample-anchor;
position: absolute;
max-height: calc(anchor-size(height) * 2); /* アンカーの2倍の高さを指定している */
}
⚪︎ 最上位レイヤ要素でアンカーを使用する
CSS Anchor Positioningは、popover や <dialog>などの最上位レイヤーを使う要素と組み合わせることができます。
<button style="anchor-name: --sample-anchor;">
アンカー
</button>
<div style="position-anchor: --sample-anchor;" popover>
ボート
</div>
⚪︎ @position-try を使って要素の位置を調整する
アンカー要素の画面内の位置によって、要素の位置を調整したい場合は、@position-try アットルールと、 position-try-options プロパティを使用することで、調整できます。
@position-tryには、一意の識別子と調整したい要素が画面外に移動したときに当てたいスタイルを指定します。
position-try-optionsには、@position-tryで指定した識別子を指定します。
このようにすることで、要素の位置が画面内に収まるようにいい感じに調整してくれます。
.boat {
position-anchor: --sample-anchor;
position: absolute;
top: anchor(bottom);
left: anchor(right);
position-try-options: --bottom;
}
@position-try --bottom {
bottom: anchor(top);
right: anchor(left);
}
ただ、上から下に移動させたり、左から右移動させたいという時は、@position-tryを指定せずに flip-block や flip-inline 等のキーワードを使うことでもいい感じに調整してくれます。
.boat {
position-anchor: --sample-anchor;
position: absolute;
inset-area: top;
position-try-options: flip-block;
}
まとめ
この記事では、Chrome 125でリリースしたCSS Anchor Positioningについて、使い方をまとめました。
ぜひこの記事を参考にCSS Anchor Positioningを触っていただけると嬉しです。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。