CSS Anchor Positioningが全ブラウザ対応：ポップオーバーを任意の要素に紐付けるモダンUIの実装パターン

2026年1月21日

当ページのリンクには広告が含まれています。

お疲れ様です！IT業界で働くアライグマです！

2026年1月、Firefox 147のリリースによりCSS Anchor Positioningが全ブラウザ対応となりました。これにより、JavaScriptなしでポップオーバーやツールチップを任意の要素に紐付けて表示できるようになります。

「ドロップダウンメニューの位置調整でJavaScriptを書くのが面倒」「ツールチップがビューポートからはみ出る問題に悩んでいる」——そんな課題を抱えていた方には朗報です。

本記事では、CSS Anchor Positioningの基本概念から実践的なポップオーバー実装パターンまでを解説します。

CSS Anchor Positioningとは何か

💡 モダンフロントエンド技術を武器に転職するなら

最新CSS技術に精通したエンジニアは、自社開発企業で高い評価を受けます

IT・Web転職サービスなら【レバテックキャリア】

CSS Anchor Positioningは、ある要素（アンカー）を基準にして別の要素を配置するためのCSS機能です。詳しくはVercel公式React Best Practicesを読み解くも参考にしてください。

従来の課題

これまで、ポップオーバーやツールチップを特定の要素に紐付けて表示するには、以下のような方法が必要でした。

JavaScript計算：getBoundingClientRect()で位置を取得し、動的にstyleを設定
CSSハック：position: relativeとabsoluteの組み合わせで親子関係に依存
ライブラリ利用：Popper.js、Floating UIなどの外部ライブラリに依存

これらの方法は、リサイズ対応、スクロール追従、ビューポート境界処理など、多くのエッジケースへの対応が必要でした。

Anchor Positioningの解決策

CSS Anchor Positioningでは、以下の2つのプロパティで要素間の紐付けを宣言的に記述できます。

/* アンカー要素の定義 */
.trigger-button {
  anchor-name: --my-anchor;
}

/* ポップオーバーの配置 */
.popover {
  position: fixed;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(left);
}

これだけで、.popoverは.trigger-buttonの下に自動配置されます。

IT女子アラ美

JavaScriptなしで本当にできるんですか？

ITアライグマ

はい、CSSだけで完結します。リサイズやスクロールにも自動追従するので、実装がとても楽になります。

全ブラウザ対応の状況と注意点

ポップオーバー実装方法別の記述量比較 — 図：ポップオーバー実装方法別のコード行数比較

2026年1月時点でのブラウザ対応状況を確認しましょう。詳しくはGitHub Copilotを極めるも参考にしてください。

対応ブラウザ一覧

Chrome 125+：2024年5月から対応
Edge 125+：Chromiumベースのため同時期に対応
Safari 18+：2024年9月から対応
Firefox 147+：2026年1月13日リリースで対応（最後発）

Firefoxの対応により、主要ブラウザすべてでAnchor Positioningが利用可能になりました。

フォールバック戦略

古いブラウザ向けには、@supportsを使ったフォールバックを用意します。

/* Anchor Positioning非対応ブラウザ向け */
.popover {
  position: absolute;
  top: 100%;
  left: 0;
}

/* Anchor Positioning対応ブラウザ向け */
@supports (anchor-name: --test) {
  .popover {
    position: fixed;
    position-anchor: --my-anchor;
    top: anchor(bottom);
    left: anchor(left);
  }
}

IT女子アラ美

古いブラウザも考慮する必要がありますよね。

ITアライグマ

はい、@supportsでフォールバックを書いておけば、段階的に導入できます。プログレッシブエンハンスメントの考え方ですね。

基本的な実装パターン

実際のコード例を見ていきましょう。詳しくはWebGLでレトロCRT効果を再現するも参考にしてください。

ドロップダウンメニュー

ボタンをクリックするとメニューが表示されるパターンです。

<button class="menu-trigger" popovertarget="dropdown-menu">
  メニュー
</button>

<div id="dropdown-menu" popover class="dropdown">
  <ul>
    <li><a href="#">プロフィール</a></li>
    <li><a href="#">設定</a></li>
    <li><a href="#">ログアウト</a></li>
  </ul>
</div>

.menu-trigger {
  anchor-name: --menu-anchor;
}

.dropdown {
  position: fixed;
  position-anchor: --menu-anchor;
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 4px;

  /* 基本スタイル */
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
}

ツールチップ

ホバー時に説明を表示するパターンです。

.tooltip-trigger {
  anchor-name: --tooltip-anchor;
}

.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);

  /* 表示制御 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip-trigger:hover + .tooltip,
.tooltip-trigger:focus + .tooltip {
  opacity: 1;
}

IT女子アラ美

Popover APIと組み合わせると便利そうですね。

ITアライグマ

その通りです。popovertarget属性と組み合わせることで、JavaScriptゼロでインタラクティブなUIが作れます。

ケーススタディ：タスク管理UIのサブメニュー実装

💡

フロントエンド技術で自社開発企業へ転職したいなら

モダンCSS・JavaScript技術に精通したエンジニアは、自社開発企業で高く評価されます。スキルを活かせる環境を探してみませんか？

ITエンジニアのための転職エージェント【TechClipsエージェント】

実際のプロジェクトでAnchor Positioningを導入した事例を紹介します。詳しくはnanocodeで学ぶAIコーディングエージェントも参考にしてください。

状況（Before）

5人チームで開発中のタスク管理SaaSアプリ（React 18 + TypeScript）で、各タスク行の右側に「…」ボタンがあり、クリックするとサブメニュー（編集・複製・削除など）が表示されるUIを実装していました。タスク一覧は約500件を仮想スクロールで表示する構成です。

技術構成：React 18 + Floating UI v1.6（位置計算用）
規模：タスク一覧500件、チームメンバー5人、リリース後6ヶ月
課題：Floating UIの依存関係が重く（約15KB gzip）、バンドルサイズが肥大化
問題：スクロール時のちらつき（60fps維持できず）、仮想スクロールとの相性問題でメニューが残像化

行動（Action）

Anchor Positioningへの移行を決定し、以下の手順で実装しました。

Popover API導入：サブメニューをpopover属性で宣言
アンカー設定：各「…」ボタンに動的なanchor-nameを設定
フォールバック：@supportsで旧ブラウザ向けにFloating UI維持

/* 動的アンカー名の利用 */
.task-menu-trigger {
  anchor-name: var(--task-anchor-name);
}

.task-submenu {
  position: fixed;
  position-anchor: var(--task-anchor-name);
  left: anchor(right);
  top: anchor(top);
  margin-left: 8px;
}

結果（After）

バンドルサイズ：15KB削減（Floating UI削除）
パフォーマンス：スクロール時のちらつき解消、常時60fps維持
保守性：CSS宣言のみで位置制御が完結し、関連コード約120行削減
開発時間：類似UIの実装時間が約40%短縮（2日→1.2日）

IT女子アラ美

ライブラリなしでここまでできるのは衝撃ですね。

ITアライグマ

CSS標準機能として実装されたので、長期的なメンテナンスも安心です。ぜひ試してみてください。

導入判断と今後の展望

CSS Anchor Positioningを導入すべきかの判断基準をまとめます。詳しくはTrail of Bits skillsでセキュリティ監査自動化も参考にしてください。

導入すべきケース

新規プロジェクトでモダンブラウザのみをサポート
ポップオーバー・ツールチップが多用されるUI
バンドルサイズ削減が優先課題

慎重に検討すべきケース

IE11やSafari 17以前のサポートが必要
既存ライブラリで安定動作している
複雑な衝突回避ロジックが必要

本記事で解説したようなAI技術を、基礎から体系的に身につけたい方は、以下のスクールも検討してみてください。

比較項目	DMM 生成AI CAMP	Aidemy Premium
目的・ゴール	ビジネス活用・効率化非エンジニア向け	エンジニア転身・E資格Python/AI開発
難易度	初心者◎プロンプト作成中心	中級者〜コード記述あり
補助金・給付金	最大70%還元リスキリング補助金対象	最大70%還元教育訓練給付金対象
おすすめ度	S今の仕事に活かすなら	AAIエンジニアになるなら
公式サイト	詳細を見る	−