【しーえすえすあんかーぽじしょにんぐ】
CSS Anchor Positioning とは？
最終更新:
💡 ボタンなどを基準に、CSSで表示位置を決める
別の要素をアンカー（基準）にして、ツールチップなどの位置をCSSで指定する仕組み。位置の候補を切り替えることもできる。表示の開閉や操作は、位置決めとは別に実装する。
📌 このページのポイント
ひよこ ボタンに合わせてツールチップを置けるの？
ペンギン先生 CSS Anchor Positioningを使うと、ボタンなどを基準に位置を指定できるよ。ボタンの位置をJavaScriptで読み取って計算する処理を、CSSに任せられる。ただし、いつ表示するかという開閉操作は別の役割なんだ。
ひよこ 名前を付ければ、それだけで位置が決まる？
ペンギン先生 名前は関連付けるためのものだよ。ボタンに「anchor-name: --btn」、相手に「position-anchor: --btn」を指定する。相手をabsoluteかfixedにし、position-areaなどで上に置く、といった位置指定も必要なんだ。
ひよこ 画面の端では、必ずはみ出さずに表示できる？
ペンギン先生 「position-try-fallbacks: bottom」なら、上に収まらないときに下も試せるよ。でもすべての候補が収まらない場合は元の位置に戻る。サイズを調整したり別の見せ方を用意したりして、小さい画面でも使えるか確認しよう。
ひよこ 開くボタンにもJavaScriptが必要？
ペンギン先生 使い方によるよ。HTMLのPopover APIなら、popover属性とボタンのpopovertargetを組み合わせて、クリックによる開閉を実装できる。ホバーなど別の操作を求める場合は、その動作に合う実装を用意する。位置決めだけで操作も完成するわけではないんだ。
ひよこ どのブラウザでも使えるの？
ペンギン先生 使う機能ごとに確認しよう。MDNではposition-areaとposition-try-fallbacksは2026年1月から主要ブラウザの最新版で利用可能とされているけれど、古い環境もある。@supportsなどで対応を確認し、非対応時の表示も用意してね。
📖 おまけ：英語の意味
「CSS Anchor Positioning」 ＝ CSSアンカー位置決め
💬 anchorは「いかり」や「固定する基準」、positioningは位置決めを表す語。ボタンなどを基準に、別の要素を配置するイメージだよ。