CSS Anchor Positioningは人気No.1なのに、まだ実務で使えない理由

海外のWeb制作者向けアンケート調査「State of CSS 2026」(回答者4,902人)を見ていたら、意外な結果が出ていました。「今年使い始めたお気に入りのCSS新機能」の1位に選ばれたのが、Anchor Positioning(アンカーポジショニング)という機能でした。

意外だったのは、同じ調査の別の質問で「使いたいのにブラウザ対応の関係で避けている機能」でも、このAnchor Positioningが1位だったことです。人気No.1でありながら、同時に「まだ使えない」No.1でもある。この矛盾した状況が気になって、実際どういう機能なのか、今の実案件で使えるレベルなのか調べてみました。

💡 Tips: Anchor Positioningとは

ある要素(アンカー)を基準にして、別の要素の位置を指定できるCSSの新機能です。「このボタンの下にツールチップを出す」のような配置を、JavaScriptのライブラリを使わずCSSだけで実現できます。

何ができるのか
なぜ「使いたいのに使えない」のか
今の実案件で使うべきか
まとめ

何ができるのか

仕組みは3行で説明できます。基準にしたい要素にanchor-name: --my-anchorのように名前を付け、位置を合わせたい要素側でposition-anchor: --my-anchorと紐付け、anchor(bottom)のようなanchor()関数で「基準要素の下端に合わせる」といった具体的な位置を指定します。

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

.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
}

このコードだけで、.trigger要素の真下中央に.tooltipが追従します。今までツールチップやドロップダウンメニューの位置合わせは、JavaScriptで座標を計算するライブラリ(Popper.jsなど)に頼るのが定番でした。ボタンにマウスを乗せたら説明を出す、セレクトボックスを開いたら選択肢を表示する、といった「要素同士の位置関係を管理する」処理が、CSSだけで完結するとなれば、人気が出るのも納得です。

同じ調査では、CSSで困っている話題を集計した「トップペインポイント」でも、Positioning(配置)関連が全体1位でした。多くの人が配置まわりで苦労している中、それを解決してくれそうな機能が出てきた、というのが人気の背景にありそうです。

なぜ「使いたいのに使えない」のか

原因はシンプルで、ブラウザの対応状況にばらつきがあるためです。Can I useで確認したところ、Chrome・Edgeは早くから対応している一方、Safariは執筆時点で未対応でした。全世界での対応率は約86%(部分対応込み)ですが、この「約14%」の中にSafariが丸ごと入っている状態です。

💡 Tips: Can I useとは

CSS・JavaScriptの各機能について、ブラウザごとの対応状況を一覧できる海外の定番サイトです。新機能を実案件で使えるか判断する際、まず確認する情報源のひとつです。

日本のWeb制作の現場では、これは海外の統計以上に効いてくる話だと感じました。日本はiPhoneのシェアが海外と比べてかなり高く、Safariでの表示確認を省略できない案件がほとんどだからです。「Chromeでは綺麗に動くのに、Safariのユーザーだけツールチップの位置がズレる」という状態は、普通に事故になります。

今の実案件で使うべきか

今のところ、本番で無条件に使うのはまだ早いという判断になりました。ただし、CSSの仕様には@supportsという「対応してないブラウザ向けの代替スタイルを用意する」書き方があるので、Safariでは従来通りJavaScriptで位置調整し、対応ブラウザだけAnchor Positioningに任せる、という段階的な導入は現実的です。

@supports (anchor-name: --a) {
  /* Anchor Positioning対応ブラウザ向けのスタイル */
}

「知らなかった」では済まされない機能になりつつあるのは間違いないので、Safariの対応が進むまでの間は、こういう調査データで動向を追いかけておく価値はありそうです。各ブラウザベンダーが足並みを揃えて対応を進める「Interop」という取り組みもあり、今回のような人気機能ほど優先的に対応が進む傾向があるので、来年には状況が変わっている可能性も十分にあります。

まとめ

「人気No.1」と「まだ使えないNo.1」が同じ機能を指しているという事実は、CSSの新機能を評価するとき、機能そのものの魅力だけでなく、ブラウザ対応という土台まで見ないと判断を誤る、という当たり前だけど忘れがちなことを思い出させてくれました。海外の一次情報を見ていると、こういう「盛り上がってるけど、実務にはまだ早い」という温度差に気づけるのは面白い発見です。このシリーズでは、こんな風に海外発のデータを定期的に覗いて、日本のWeb制作者目線でかみくだいていく予定です。