CSS アンカーポジショニング ジェネレーター

CSS Anchor Positioning は2024年に登場したCSS機能で、ある要素（ターゲット）を別の要素（アンカー）に対して純粋なCSSだけで配置できるようにします。アンカーが anchor-name: --x で識別子を宣言し、ターゲットが position-anchor: --x で参照を表明し、あとは position-area ショートハンド（例：position-area: top）か明示的な anchor() 関数（例：top: anchor(--x bottom)）でターゲットを配置します。スクロールもリサイズも再フローも、計算はすべてブラウザがJavaScriptなしで処理します。ツールチップ・ドロップダウン・ポップオーバー・ダイアログでよく使われていた Floating UI / Popper.js / Tippy ライブラリの代替になります。

2026年4月時点で Firefox は未実装です。Bugzilla（bug 1838746）でトラッキングされておりロードマップ上にはありますが、具体的なリリース時期は約束されていません。Firefox 対応を含めた本番コードには、Oddbird の CSS Anchor Positioning Polyfill（未対応ブラウザで構文をバックフィルする小さなJSシム）を使うか、@supports (anchor-name: --x) { ... } でアンカースタイルをラップして position: absolute のフォールバックを明示的に用意する方法があります。本ページの「browser-fallback-strategy」記事で両方のアプローチを詳しく解説しています。

anchor-name はアンカー要素側に設定するもので、「自分はアンカーです、識別子はこれです」と宣言します。position-anchor はターゲット要素側に設定するもので、「この名前のアンカーに追従したい」と宣言します。接続が成立するには、両方が同じカスタムプロパティ識別子（どちらも -- で始まる）を使う必要があります。anchor-name はアンカーに貼るラベル、position-anchor はターゲットが配送される住所、というイメージです。シンプルなケースでは両者の値は同じになりますが、複数のターゲットが1つのアンカーを共有する場合や、JavaScript でターゲットのアンカーを切り替える場合などの上級ケースでは値が分離されます。

はい。アンカーポジショニングは position: absolute でも position: fixed でも動作します。意味的な違いは従来通りで、absolute はターゲットを最も近い配置済み祖先（containing block）に対して配置し、fixed はビューポートに対して配置します。どちらの場合もページのスクロールや再フローに合わせてアンカーの解決位置に追従します。overflow: hidden な祖先要素から脱出すべきツールチップやポップオーバー（カードの境界でツールチップが切れてしまうおなじみの問題）には position: fixed が最適です。本ジェネレーターのトグルで absolute / fixed を切り替え、対応するCSSをコピーできます。

position-try-fallbacks は、ターゲットが containing block からはみ出しそうなときにブラウザが順番に試す代替配置のリストです。最もよく使う値は flip-block（ブロック軸の反対側を試す、例：top → bottom）、flip-inline（インライン軸を反転、例：left → right）、'flip-block flip-inline'（両方反転）です。'top, bottom, right, left' のように具体的な position-area 値を優先順位付きでリストすることもできます。ターゲットがビューポートからはみ出す可能性があるとき、つまりほぼすべてのツールチップ・ポップオーバーで使うべきです。Floating UI の flip ミドルウェアのネイティブ等価物です。

CSS Anchor Positioning は HTML Popover API（[popover] 属性、popovertarget など）と組み合わせて使うことを念頭に設計されています。ポップオーバー要素がターゲット、トリガーボタンがアンカーになります。ボタンに anchor-name を、ポップオーバーに position-anchor を設定するだけで、ポップオーバーがトリガーに自動追従します — 配置のためのJavaScriptは一切不要です。両機能をサポートするブラウザ（Chrome 125+、Edge 125+、Safari 26+）では、ツールチップ・メニュー・ダイアログを完全に宣言的に実装できます。本ページの「anchor-with-popover-api」記事で完全なパターンを紹介しています。

はい。このジェネレーターはブラウザ内だけで完結します。アンカー・ターゲットの識別子、position-area の値、フォールバックリスト、生成されたCSSはすべて React のステートとCSSで計算・描画されており、サーバーには何も送信されません。ブラウザサポートバナーはローカルの CSS.supports() API を使っており、外部の機能検出サービスは利用しません。入力に紐づくアナリティクスもなく、一度読み込めばオフラインでも動作するので、独自のコンポーネントライブラリAPI（'--my-app-tooltip' のようなアンカー名）をプロトタイプしても、データが端末から外に出ることはありません。