CSS Anchor Positioning（シーエスエスアンカーポジショニング）

概要

CSS Anchor Positioningは2024年5月にChrome 125で正式採用された新CSS仕様で、要素を別の要素に「アンカー」として紐付けて位置決めする機能。従来はJavaScript+Floating UI(Popper.js 2022年廃止後の後継)で実装していたTooltip・Popover・Dropdown・Context Menuの位置調整をCSSのみで実現する。anchor-name/position-anchor/anchor()/position-area等のCSS propertyを組み合わせ、トリガー要素(ボタン等)に対する相対位置(top・bottom・left・right・center)を宣言的に記述可能。HTMLのpopover attributeとセットで使うと、JavaScript依存ゼロでフル機能のドロップダウンメニューを構築できる。Safari Technology Preview・Firefox Nightlyでも実装中で、2025-2026年に主要ブラウザで広く利用可能になる見込み。

主な特徴・仕組み

• anchor-name property: anchor-name: --my-anchor でアンカーポイントを定義
• position-anchor property: position-anchor: --my-anchor でアンカー要素を参照
• anchor() function: top: anchor(bottom) のように、アンカーの辺に相対配置
• position-area property: position-area: top で簡略記法、9エリア(top/right/bottom/left+対角)
• position-try-fallbacks: 画面端で位置調整、position-try-fallbacks: flip-block, flip-inline
• anchor-size() function: アンカーのサイズに基づくスタイル設定、width: anchor-size(width)
• inset-area shorthand: 旧版の構文、新仕様で position-area に統一
• Popover API連携: popover HTML attribute+popovertarget でトグル制御
• JavaScript非依存: 純粋CSSで動作、SSR(Server-side Rendering)後の即時レンダリング
• Reactive Update: アンカー要素のサイズ・位置変化に追従、自動再配置
• Browser Support: Chrome 125+(stable)、Edge 125+、Safari TP・Firefox Nightly実装中

スペック比較表

具体例・対応製品

/* 基本的なTooltip Positioning */
.button { anchor-name: --tooltip-anchor; }

.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor;
  top: anchor(bottom);
  left: anchor(center);
  position-try-fallbacks: flip-block;
}

/* position-area shorthand 使用 */
.dropdown {
  position: absolute;
  position-anchor: --my-button;
  position-area: bottom span-right;
}

• Chrome 125+ stable: 2024年5月リリース、フル機能利用可能
• Floating UI 1.6+: Anchor Positioning併用Plugin、フォールバック実装
• CSS Anchor Positioning Polyfill: oddbird/css-anchor-positioning(GitHub)、古ブラウザ対応
• 競合機種: Floating UI(JavaScript)、Popper.js(deprecated)、Tippy.js(Floating UIラッパー)

自作PCでの選び方・注意点

CSS Anchor PositioningはWeb開発者向けのCSS仕様で、自作PCの選択とは無関係だが、jisaku.com開発者として認識すべき重要な新Web仕様。jisaku.com Web Frontend(Next.js 16+TypeScript+Tailwind CSS 4)では、Tooltip・Popover・Dropdown実装でAnchor Positioningへ移行することで、Floating UIライブラリ依存を排除し、Bundle Size 10KB削減+JavaScript Hydration不要+SSR完全対応のメリットを得られる。一方、Safari/Firefoxの実装が遅れているため、2026年5月時点ではPolyfillまたはFloating UIフォールバック併用が現実的。Tailwind CSS Plugin として @tailwindcss/anchor-positioning(コミュニティ製)を使うと、ユーティリティクラス感覚で記述可能。Chrome 125+のみで動作するProduction採用は、ユーザーのブラウザ統計をMixpanel/GA4で確認してから判断すべき。jisaku.comのユーザー層(技術者+ガジェット好き)はChromeシェアが高い(80%+)ため、段階的移行が有効。Vercel Analyticsで Anchor Positioning Polyfill 適用率をモニタリング推奨。

関連用語との違い

Floating UI(JavaScript)との違い: Floating UIはJS実装で全ブラウザ動作+Pluginによる柔軟性、Anchor PositioningはCSS実装でChrome先行+JavaScript不要。FuturesプルーフならAnchor、現状互換性ならFloating UI。 Native Popover APIとの違い: Popover APIは「表示/非表示」の状態管理(popover attribute+トグル)、Anchor Positioningは「位置決め」(CSS Property)。両者を組み合わせると、JavaScript非依存のフル機能ドロップダウンが実現する。

よくある質問（FAQ）

Q1: Tailwind CSS 4でAnchor Positioningは使える？ A: 公式Plugin非対応(2026年5月時点)、@tailwindcss/anchor-positioningコミュニティ製Pluginまたは生CSSで記述。CSS Custom Property経由で [--anchor-name:--btn] のような書き方が可能。Tailwind 4.1+で標準対応予定。

Q2: Safari/Firefoxで動かない場合の代替策は？ A: oddbird/css-anchor-positioningのPolyfill(JavaScript実装)を読み込むか、Floating UI 1.6+でAnchor Positioning風APIを併用。Polyfillは約5KB、Floating UIは10KBで、後者はAuto-Updateや高度なMiddleware対応で柔軟性高い。

Q3: position-try-fallbacksとは？ A: 画面端でアンカー要素が見切れる場合の代替位置を指定する機能。position-try-fallbacks: flip-block, flip-inline で「縦反転を試行→ダメなら横反転」のフォールバック順序を指定。Floating UIのflip middlewareをCSS Native化した形。

まとめ

• CSS Anchor Positioning = 2024年5月Chrome 125+対応新CSS仕様
• anchor-name/position-anchor/anchor()/position-area properties
• Tooltip/Popover/Dropdown位置決めをJavaScript非依存で実現
• Floating UI(10KB)からの移行でBundle削減+SSR完全対応
• Safari/Firefox実装遅れ、現時点はPolyfill併用が現実的