初心者エンジニア向け 業務に役立つデザインソフトの使い方!
![](https://images.microcms-assets.io/assets/a825b67e3494487eb265986360c81314/11410d002199476086449e60607057b6/blog_thumb-uchida1.png)
CSS Anchor Positioning とは特定の要素(アンカー)を基準にして、その要素から別の要素の位置を指定できる API です。
絶対位置に配置された要素をページ上の1つ以上の要素(アンカー)に結びつける場合、今まではJavaScriptを使用しないとできませんでしたが、この機能を使うことで、CSSだけでできるようになりました。
Chrome 125でサポートされた実験的な機能で、執筆時点ではサポートブラウザはChromeのみとなっています。
記事内のデモもChromeでのみ動かすことができますのでご了承ください。
基準となる要素(アンカー)を定義する方法は2種類あります。
anchor-name
プロパティを使って定義する<button class="anchor">Anchor</button>
<style>
.anchor {
anchor-name: --anchor;
}
</style>
id
属性を追加し、その値を固定要素の anchor
属性に指定する。<button id="anchor">Anchor</button>
<div anchor="anchor">Element</div>
次に、cssのanchor
関数を使って、アンカー要素を基準にした位置を指定します。
calc()を組み合わせると余白を作ることができます。
.element {
/* アンカー要素を基準にした位置を指定 */
bottom: calc(anchor(--anchor top) + 10px);
left: anchor(--anchor center);
transform: translateX(-50%);
}
上記では、element の bottom
はアンカー要素のtop
から10px上に位置するように指定しています。element の left
はアンカー要素の center
にくるよう指定しています。
CSS Anchor Positioningを使うことで、固定要素の位置が画面外になった場合に別の位置を指定できます。
固定要素にposition-try-options
プロパティを指定し、フォールバックを使用する@position-try
を渡します。
フォールバックの適用順序はposition-try-order
プロパティによって決定され、初期値はnormal(左から指定された順に試行)となります。
.element {
position-anchor: --anchor;
position: absolute;
position-try-options: --default, --fallback-1, --fallback-2, --fallback-3;
}
続いて、@position-try
ルールの中で、固定要素をどの位置に配置したいのかを定義します。
@position-try --default {
bottom: calc(anchor(top) + 10px);
right: anchor(left);
}
@position-try --fallback-1 {
top: calc(anchor(bottom) + 10px);
right: anchor(left);
}
/* 以下省略 */
これによって、画面内に表示される配置が適用されます。
ツールチップとは対象にマウスオーバーした際に表示される注釈や補足情報のことです。
今回はアイコンをホバーした時に説明文を表示する機能を実装します。
CSS Anchor Positioningを使用し、アンカー要素となるアイコンを基準にツールチップの位置を指定します。
アイコン要素をicon
、ツールチップの要素をtooltip
とします。
<button class="icon">?</button>
<div class="tooltip">ツールチップの説明文です。</div>
アイコン要素にanchor-name
を指定し、ツールチップ要素にposition-anchor
とposition-try-options
を指定します。
ツールチップは初期状態で非表示にします。
.icon {
/* スタイル省略 */
anchor-name: --anchor;
}
.tooltip {
/* スタイル省略 */
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
position-anchor: --anchor;
position: absolute;
position-try-options: --default, --fallback-1;
}
スクロールした際にもツールチップが画面内に収まるよう、@position-try
ルールを追加します。
デフォルトではアイコン上部に表示し、アイコンの位置が画面の上部になった際にアイコン下部に表示されるようにします。
@position-try --default {
bottom: calc(anchor(top) + 10px);
left: anchor(center);
}
@position-try --fallback-1 {
top: calc(anchor(bottom) + 10px);
left: anchor(center);
}
隣接セレクタを使い、アイコンをホバーした際にツールチップが表示されるようにします。
.icon:hover + .tooltip {
opacity: 1;
visibility: visible;
}
以上でツールチップの実装が完了です!
CSS Anchor Positioningを使うことで、JavaScriptを使わずに要素の位置を結びつけられるようになり、ツールチップやポップアップといったコンポーネントを簡単に実装できるようになります。
執筆時点ではChromeでのみサポートされている実験的な機能ですが、今後、主要なブラウザで実装されることを期待しましょう!
https://developer.chrome.com/blog/anchor-positioning-api
https://zenn.dev/cybozu_frontend/articles/css-anchor-positioning