CSS-Tricks が What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More（2026-05-29）で、CSS Anchor Positioning が主要ブラウザで実用域に近づいたことを取り上げました。anchor-name / position-anchor / anchor() 関数 / position-area / position-try-fallbacks といったプロパティ群によって、これまで Popper.js や Floating UI などの JS ライブラリで実装していた「ツールチップ・ポップオーバー・ドロップダウン・メニューを基準要素にぴったり配置し、画面端ではみ出したら自動で位置を切り替える」処理が、CSS だけで宣言的に書けるようになりました。HTML の popover 属性や <dialog> とも相性が良く、オーバーレイ UI の作り方そのものが変わりつつあります。
受託 Web 制作の現場では、「ツールチップやメニューの配置のためだけに重い JS ライブラリを入れ、依存ツリーが膨らみ、バージョン追従とバグ対応で保守コストが積み上がる」という事故が繰り返されてきました。受託で Web 制作を支える立場では、これは 「最新の CSS が使えるか」ではなく、「JS 依存を減らし、保守しやすく、アクセシブルなオーバーレイ UI を、未対応ブラウザのフォールバックまで含めて引き渡せるか」を設計に組み込む課題だと捉えています。これまで モダンCSSのネイティブ機能を受託で使う（GH Media） で扱った ネイティブ CSS の取り込み方針、2026年春のCSS新機能（GH Media） で扱った 新機能の評価軸と接続して、本記事では 「オーバーレイUI・脱JSライブラリ実装支援」を 受託パッケージとして整理します。
なぜ「いま」オーバーレイUIを作り直すのか
| 観点 | JSライブラリ実装（従来） | CSS Anchor Positioning（2026） |
|---|---|---|
| 依存 | Popper / Floating UI を追加 | 追加ライブラリ不要 |
| 配置ロジック | JS で座標を計算 | CSS で宣言的に指定 |
| 画面端の回避 | リサイズ監視で再計算 | position-try-fallbacks が自動 |
| バンドルサイズ | 数十 KB 増える | ほぼゼロ |
| 保守 | バージョン追従が必要 | ブラウザ標準で陳腐化しにくい |
| アクセシビリティ | 自前で属性管理 | popover / <dialog> と統合 |
つまり 「JS ライブラリで配置する」ことと「保守しやすく依存の少ないオーバーレイ UI を届ける」ことは別物であり、受託でも 「配置ロジックを CSS に寄せ、フォールバックを設計し、アクセシブルな状態で引き渡す」ことが品質の前提になりました。これにより 「JS 依存を減らした構成」を成果物として保証できます。
CSS Anchor Positioning でできること
① anchor-name と position-anchor で結びつける
トリガー要素（ボタンなど）に anchor-name を付け、オーバーレイ側で position-anchor を指定すると、両者が 「アンカーと被配置要素」として論理的に結びつきます。JS で要素参照を取り回す必要がなくなり、マークアップと CSS だけで関係が完結します。
② position-area / anchor() で配置
position-area で「アンカーの上・下・右下」といったざっくりした配置を、anchor() 関数で「アンカーの bottom に top を合わせる」といった精密な座標基準を指定できます。用途に応じて宣言的に書き分けられます。
.tooltip-trigger {
anchor-name: --trigger;
}
.tooltip {
position: absolute;
position-anchor: --trigger;
/* アンカーの下中央に配置 */
position-area: bottom center;
/* 画面端ではみ出したら上に回避 */
position-try-fallbacks: top center, bottom span-left;
}③ position-try-fallbacks で画面端の自動回避
position-try-fallbacks に候補となる配置を順番に列挙しておくと、ブラウザが「はみ出さない最初の候補」を自動で選びます。従来 JS の責務だった「画面端での反転・ずらし」が、CSS の宣言だけで成立するのが最大の転換点です。リサイズやスクロールでの再計算もブラウザ任せにできます。
受託で提供する「オーバーレイUI・脱JSライブラリ実装支援」5フェーズ
フェーズ 1: 棚卸し・診断（1 週間）
- 既存サイトのツールチップ / ポップオーバー / メニューの洗い出し
- 使用中の JS ライブラリと依存サイズの計測
- 対応ブラウザ要件・アクセシビリティ要件の確認
- 成果物: オーバーレイ UI 棚卸し表 + 依存・脱却可否レポート
フェーズ 2: 設計（1 週間）
- CSS Anchor Positioning に寄せる UI と残す UI の切り分け
- フォールバック方針（未対応ブラウザの挙動）の決定
popover/<dialog>との統合方針- 成果物: 実装方針書 + フォールバック設計書
フェーズ 3: 実装（1〜3 週間）
- アンカー結びつけ・配置・自動回避の実装
- フォーカス管理・キーボード操作・ARIA 属性の付与
- 未対応ブラウザ向けフォールバックの実装
- 成果物: 実装済みコンポーネント + 実装標準ドキュメント
フェーズ 4: 検証・引き渡し（1 週間）
- 主要ブラウザ・未対応ブラウザでの表示・挙動検証
- スクリーンリーダー・キーボードでのアクセシビリティ検証
- 成果物: 検証レポート + 保守手順書
フェーズ 5: 継続保守（継続）
- ブラウザ対応状況の定点観測
- フォールバックの段階的撤去判断
- 新規オーバーレイ UI の追加実装
受託向け実装標準セット
| 用途 | 推奨 | 避ける |
|---|---|---|
| 配置 | position-area / anchor() | JS での座標直書き |
| 画面端回避 | position-try-fallbacks | リサイズ監視の自前再計算 |
| 表示制御 | popover 属性 / <dialog> | 自前の表示トグル乱用 |
| フォーカス管理 | ネイティブのフォーカストラップ | 無管理のオーバーレイ |
| フォールバック | 機能検出 + 代替配置 | 未対応ブラウザ放置 |
| ライブラリ | 標準で足りれば不採用 | 配置のためだけに重い依存追加 |
どの案件に必要か / 不要か
| 必要な案件 | 優先度が低い案件 |
|---|---|
| ツールチップ・メニューを多用する管理画面 | オーバーレイがほぼないサイト |
| JS 依存を減らしたい長期運用サイト | 短命なキャンペーンページ |
| バンドルサイズを削りたい | 規模が小さく影響軽微 |
| アクセシビリティが要件 | 制約がほぼない |
| 既存ライブラリの保守に疲れている | 既存実装で問題が出ていない |
受託契約に書く6つの条項
| 条項 | 内容 | 顧客が確認すべきこと |
|---|---|---|
| 対象範囲 | 作り直す UI の種類 | ツールチップ/メニューの境界 |
| 対応ブラウザ | 保証する範囲 | フォールバックの程度 |
| フォールバック | 未対応時の挙動 | 劣化の許容度 |
| アクセシビリティ | フォーカス/ARIA 基準 | 検証範囲 |
| 引き渡し | 実装標準 / 保守手順 | 保守体制 |
| 継続保守 | 対応状況の監視 | 運用費用 |
価格モデル — オーバーレイUI実装パッケージ
| プラン | 金額 | 対象 | 内容 |
|---|---|---|---|
| 診断 | 20 万円〜 | 1 サイト | 棚卸し + 脱却可否レポート |
| 標準実装 | 80 万円〜 | 中規模 | 主要オーバーレイの実装 + フォールバック |
| 本格対応 | 160 万円〜 | 大規模 | + 全 UI の作り直し + アクセシビリティ検証 |
| Lite 保守 | 3 万円〜 / 月 | 小規模 | 対応状況監視 + 軽微修正 |
| Standard 保守 | 10 万円〜 / 月 | 中規模 | + フォールバック撤去判断 + 新規実装 |
顧客側 ROI 試算（オーバーレイ多用サイト想定）
| 項目 | JSライブラリ実装 | CSS 中心で実装 | 差分 |
|---|---|---|---|
| 依存ライブラリ | 複数を抱える | 削減 / 撤去 | 依存ツリーの縮小 |
| バンドルサイズ | 数十 KB 増 | ほぼゼロ | 表示速度の改善 |
| バグ対応 | バージョン追従で発生 | ブラウザ標準で減少 | 保守工数の削減 |
| 保守工数 | 継続的に発生 | 大幅圧縮 | 運用コストの低減 |
| 年間効果 | — | — | 依存削減 + 保守工数圧縮 |
診断（20 万円〜）だけでも、「いまのオーバーレイ UI が、どれだけ JS 依存を減らせるか」を可視化できること自体に価値があります。配置のためだけに抱えたライブラリの保守コストは、たいてい数年かけてじわじわ効いてきます。
ハマりやすい5つの落とし穴
落とし穴 1: フォールバックを設計しない
未対応ブラウザでオーバーレイが画面外に飛びます。機能検出と代替配置を先に用意します。
落とし穴 2: アクセシビリティを後回しにする
見た目は動いても支援技術で使えません。ARIA 属性と読み上げを最初から織り込みます。
落とし穴 3: フォーカス管理を忘れる
オーバーレイを開いてもキーボードで操作できません。popover / <dialog> のネイティブ管理を活用します。
落とし穴 4: 配置候補を詰め込みすぎる
position-try-fallbacks の候補が多すぎて挙動が読めなくなります。現実的な数に絞って検証します。
落とし穴 5: 検証ブラウザを絞りすぎる
最新ブラウザだけで確認し、現場で崩れます。対応要件のブラウザで必ず実機検証します。
90日アクションプラン
| 週 | アクション |
|---|---|
| Week 1 | オーバーレイ UI の棚卸し + 依存計測 |
| Week 2 | 脱却可否の判定 + フォールバック方針決定 |
| Week 3〜5 | 配置・自動回避・アクセシビリティの実装 |
| Week 6 | 主要 / 未対応ブラウザでの検証 + 手順整備 |
| Week 7〜13 | 対応状況ウォッチ + フォールバックの段階撤去 |
まとめ — 「ライブラリで配置する」から「依存を減らして引き渡す」へ
CSS Anchor Positioning が実用域に入ったことは、オーバーレイ UI の作り方を「JS ライブラリで座標計算する」から「CSS で宣言的に配置する」へと押し進めます。受託で Web 制作を支える立場では、配置を CSS に寄せ、フォールバックを設計し、アクセシブルな状態で引き渡す 「オーバーレイUI・脱JSライブラリ実装支援」が、依存と保守コストを減らした成果物を届ける主力サービスです。フォーム周りのオーバーレイまで含めて見直すなら 入力フォーム最適化（EFO）（GH Media） を併読してください。
弊社では診断 / 標準実装 / 本格対応 / Lite / Standard の各段階で本パッケージを提供しています。「配置のためだけのライブラリを外したい」「ツールチップやメニューの保守を楽にしたい」「アクセシブルなオーバーレイに作り直したい」というご相談は お問い合わせフォーム からお気軽にどうぞ。
