CSSアンカーポジショニングジェネレーターとは
CSSアンカー位置指定を使用すると、CSSのみで1つの要素を別の要素に固定できます。アンカー要素にanchor-nameを割り当て、位置指定要素にposition-anchorを使用します。ツールチップ、ドロップダウン、ポップオーバーにJavaScriptの位置指定ライブラリが不要になります。Chrome 125以上でサポートされている新しいCSS機能です。
クイックアンサー
アンカー位置指定を使用すると、JavaScriptなしでCSSのみを使用して、要素をページ上の別の要素に固定できます。ツールチップ、ポップオーバー、ドロップダウンメニューの手動位置計算のほとんどを置き換えます。
Last updated: 2026-05-25
制限事項
- アンカー位置指定はChrome 125以上でのみサポートされています。2026年初頭時点でFirefoxとSafariはまだサポートしていません。
- アンカー要素はDOMの祖先であるか、anchor-nameで参照されている必要があります。異なるシャドウルート内の要素では機能しない可能性があります。
- position-fallbackによるフォールバック位置指定は実験的であり、サポートされるブラウザ間で動作が異なります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- anchor-nameプロパティを使用して、トリガー要素にアンカー名を設定します。
- トリガーに対するアンカー要素の位置領域を選択します。
- ツールがアンカー要素と位置指定要素の両方のCSSを生成します。
- CSSをコピーして、トリガーとポップオーバーのHTMLと組み合わせます。
主な用途
- ボタンやリンクに追従するツールチップを配置する。
- トリガー要素に揃えたドロップダウンメニューを作成する。
- ページ上の特定のUI要素を指すコールアウトを構築する。