CSS Anchor Positioning 解説

長年にわたり、ツールチップ、ドロップダウンメニュー、ポップオーバーの配置には、JavaScriptによる複雑な計算が必要でした。要素のサイズを測定し、スクロール位置を追跡し、UI要素を適切に配置し続けるために絶えず再計算を行う必要がありました。CSS Anchor Positioningは、純粋なCSSを使用して要素同士を関連付けることで、この状況を完全に変革します。JavaScriptは一切不要です。

CSS Anchor Positioningとは？

CSS Anchor Positioningは、ページ上の他の要素に対して要素を相対的に配置できるネイティブブラウザAPIです。要素間に見えない接続を作成するようなものと考えてください。一つの要素が「アンカー」（基準点）として機能し、もう一つの要素が「ターゲット」（配置される要素）として機能します。

これにより、ツールチップ、コンテキストメニュー、フローティングダイアログなどの一般的なUIパターンを構築する際に、JavaScriptの配置ライブラリが不要になります。ブラウザがビューポートの境界やスクロール位置を含む、すべての複雑な計算を処理します。

コアプロパティ：アンカー関係の構築

anchor-nameでアンカーを設定

まず、要素に一意の識別子を与えることで、その要素をアンカーとして指定する必要があります：

.menu-button {
  anchor-name: --main-menu;
}

アンカー名は、CSSカスタムプロパティと同様に、ダブルダッシュ（--）で始まる必要があります。

position-anchorで要素を接続

次に、ターゲット要素をアンカーに接続します：

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
}

ターゲット要素は、アンカー配置と連携するためにposition: absoluteまたはposition: fixedを持つ必要があります。

position-areaによる要素配置

position-areaプロパティは、ターゲットを配置する最もシンプルな方法を提供します。アンカーを中心とした3×3グリッドモデルを使用します：

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
  position-area: bottom center;
}

物理的な値（top、bottom、left、right）または論理的な値（block-start、inline-end）を使用して、より良い国際化サポートを得ることができます。span-プレフィックスにより、要素を複数のグリッドセルにまたがって拡張できます：

.tooltip {
  position-area: top span-inline;
}

anchor()関数による細かい調整

精密な制御には、insetプロパティとanchor()関数を使用します：

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(left);
}

これにより、ツールチップの上端がアンカーの下端に配置され、左端が揃えられます。特定のアンカーを明示的に参照することもできます：

.multi-anchor-target {
  top: anchor(--anchor-1 bottom);
  right: anchor(--anchor-2 left);
}

anchor-size()によるレスポンシブサイジング

anchor-size()関数により、アンカーの寸法に基づいて要素のサイズを設定できます：

.dynamic-tooltip {
  position-anchor: --button;
  width: anchor-size(width);
  max-height: calc(anchor-size(height) * 2);
}

これにより、アンカーに比例してスケールするツールチップが作成されます。レスポンシブデザインに最適です。

position-tryによるエッジケースの処理

配置された要素がビューポートの端に当たった場合はどうなるでしょうか？position-tryプロパティがフォールバック位置を提供します：

.context-menu {
  position: absolute;
  position-anchor: --menu-trigger;
  position-area: bottom start;
  position-try: flip-block, flip-inline;
}

ブラウザは、主要な位置がオーバーフローを引き起こす場合に、自動的に代替位置を試行します。flip-blockやflip-inlineなどの組み込みキーワードが一般的なシナリオを処理するか、カスタムフォールバックを定義できます：

@position-try --compact-menu {
  position-area: top;
  width: 200px;
}

.context-menu {
  position-try: --compact-menu, flip-block;
}

ブラウザサポート状況

2024年後半時点で、CSS Anchor Positioningのブラウザサポートは拡大しています：

• Chrome/Edge: バージョン125以降で完全サポート
• Safari: バージョン18以降でサポート
• Firefox: 実装進行中

本番環境での使用には、Firefox 54およびChrome 51まで互換性を提供するOddbird polyfillの検討をお勧めします。機能検出は簡単です：

@supports (anchor-name: --test) {
  /* Anchor positioning styles */
}

実装における実用的なヒント

ツールチップやメニューにCSS anchor positioningを実装する際：

1. ポップオーバー要素のデフォルト配置を常にリセット：inset: auto
2. より良い国際化のために論理プロパティを使用
3. 完全にJavaScriptフリーのインタラクションのためにPopover APIと組み合わせ
4. アクセシビリティを忘れずに—セマンティックな関係を維持するために適切なARIA属性を追加

まとめ

CSS Anchor Positioningは、フローティングUI要素の構築方法を変革します。配置ロジックをJavaScriptからCSSに移すことで、より良いパフォーマンス、よりクリーンなコード、そしてエッジケースの自動処理を得ることができます。完全なブラウザサポートを待つ間、polyfillは本番環境での使用に向けた確実な道筋を提供します。ツールチップやドロップダウンメニューで実験を始めてください。位置を計算するのではなく関係を宣言するシンプルさをすぐに実感できるでしょう。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..