JSなしのグローバルナビのアニメーションを、Anchor Positioningで作る（非対応環境へのフォールバック付き）
ホバーした項目の下にインジケーターが滑らかに移動するナビを、CSSのAnchor Positioningだけで作る。非対応のブラウザ向けに代わりの表示も用意しておく。
どんな問題を解決するか / いつ使うか
グローバルナビやタブに、選択・ホバー位置を示す動きを付けたいとき。
やり方
- ホバー中・現在地の項目を、インジケーターの基準（アンカー）にする：
css
.nav a:is(:hover, :focus-visible, [aria-current="page"]) { anchor-name: --active; }
.nav .indicator {
position: absolute;
position-anchor: --active;
left: anchor(left); right: anchor(right); bottom: anchor(bottom);
transition: left .25s, right .25s;
}@supports not (anchor-name: --a)の中で、非対応ブラウザ向けに各リンクの下線表示などのフォールバックを書く（作者はSafari 18でも問題なく動くようにしている）。- コードの細かい解説はAIに聞けばよい、と作者。
注意点・対応状況
- CSSは仕組みの説明用に補った例。元のコードはリンク先を参照。
- 作者によると、FirefoxではAnchor Positioningの inset のアニメーションがまだ動かない（2026年2月時点）。
出典
- 投稿者: @tak_dcxi (TAK)
- 投稿: @tak_dcxi · 2026-02-17
- 投稿日: 2026-02-17（JST）
- 収集日: 2026-10-09（JST）