CSS Anchor Positioning サンプル集

CSS Anchor Positioning APIと関連仕様を使用したUIサンプル集です。

概要

このリポジトリには、CSS Anchor Positioning APIを活用した6つのサンプル（タブUI 4件、ツールチップ 2件）が含まれています。各サンプルでは、アンカー要素に基づいて要素を配置する機能を活用し、JavaScriptを最小限に抑えた実装を実現しています。

サンプル一覧

1. シンプルなタブUI

基本的なアンカーポジショニングを使用したシンプルなタブUIのサンプルです。

• アンカー要素（タブ）に基づいて背景要素（座布団）を配置
• シンプルなトランジションアニメーション
• 最小限のJavaScript実装

2. カスタムイージング付きタブUI

カスタムイージング関数を使用した、より完成度の高いタブUIのサンプルです。

• カスタムイージング関数（linear()）を使用したスムーズなアニメーション
• レスポンシブデザイン対応
• ホバー・アクティブ状態のスタイリング

3. スクロール駆動アニメーション付きタブUI

スクロール駆動アニメーション（Scroll-driven Animations）とアンカーポジショニングを組み合わせたタブUIのサンプルです。

• スクロール位置に応じてタブの背景が自動的に移動
• animation-timeline: scroll()を使用したスクロール連動アニメーション
• Vue.jsを使用したコンポーネント実装
• スワイプ可能なタブコンテンツ

4. :target-current を使ったタブUI

:target-current疑似クラスとアンカーポジショニングを組み合わせたタブUIのサンプルです。

• :target-current疑似クラスで現在表示中のパネルに対応するタブを検出
• scroll-target-group: autoを使用してスクロールマーカーグループを設定
• スクロール位置に応じてタブの背景（座布団）が自動的に移動
• Vue.jsを使用したコンポーネント実装
• スワイプ可能なタブコンテンツ

5. interestfor + popover のシンプルなツールチップ

interestfor属性とpopoverを使った最小構成のツールチップサンプルです。

• リンク要素とツールチップをinterestforで関連付け
• popoverでホバー時にヒント表示
• JavaScriptなしで実装

6. interestfor + Anchor Positioning の実践的なツールチップ

interestfor属性・Popover API・Anchor Positioning APIを組み合わせた、記事プレビュー付きツールチップのサンプルです。

• アンカー位置に追従するツールチップ配置
• position-tryによる表示位置フォールバック
• 画像付きカードUIと開閉アニメーション

技術スタック

• HTML5
• CSS（Anchor Positioning API、Scroll-driven Animations、:target-current、scroll-target-group、position-try）
• HTML Popover API（popover、interestfor）
• JavaScript
• Vue.js 3（scroll-area/animation-timeline.html、scroll-area/target-current.html）

使い方

1. リポジトリをクローンまたはダウンロード
2. index.htmlをブラウザで開く
3. 各サンプルへのリンクから詳細を確認

または、各HTMLファイルを直接ブラウザで開いて確認することもできます。

参考記事

• 階層メニューやトーストUIが簡単に作れる新技術！　JavaScriptで利用するポップオーバーAPI
• ツールチップの実装に役立つ！ HTMLのpopover属性の使い方
• CSSアンカーポジショニング入門〜anchor()・anchor-size()の使い方〜
• CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは