この記事で分かること
画像のように、吹き出しまわりのテキストが動的や可変になる UI において、吹き出しの ▼ の位置を特定の要素に追従させる方法が分かります。
デモ
テキストと吹き出しの内容を変更できるよう、それぞれの項目に対応した input を設置しています。
input の値を書き換えたとき、それが長くなっても短くなっても、 ▼ の矢印の位置が ？ のアイコンの位置に追従するようになっています。
解説
今までの技術では実現が難しかったこと
デモの HTML 構造を見ると、吹き出しとアイコン部分はそれぞれ別個の要素として存在していることが分かります。
アイコンに position: relative; を、吹き出しに position: absolute; を用いればアイコンに対する絶対位置指定が出来そうに思えますが、アイコンが吹き出しを内包している構造ではないため、これらのプロパティの組み合わせでは実現することができません。
そのため、デモのように ▼ の位置を可変にしようとするときは、 JS によってアイコンの位置を取得し、それを ▼ の left や right に指定するという手法が取られてきました。
Anchor Positioning と今回の実装をざっくり説明する
MDN の該当ページはこちらです。（2024年9月2日現在は日本語版がありません）
また、 Chrome の開発者向けページでも分かりやすく解説されています。
アンカーと呼ばれる他の要素に対してネイティブに要素を配置できる
が、 Anchor Positioning の仕様をざっくり説明する上での肝になっています。つまりは、親子・子孫関係にない他の要素であっても、それをさながら position: relative; のように配置の基準点にできるということです。基準点を設定する際に必要になるのが anchor-name プロパティです。
デモでは基準点となるアイコン部分に対して、 anchor-name: --icon; という名前をつけています。（名前には接頭に必ず -- をつける決まりがあります。）これによって、ブラウザに --icon というアンカー名が登録されます。
そして、吹き出しの ▼ 部分はアイコンに対しての絶対位置指定で配置したいため、 position: absolute; と、 アンカーである --icon を基準点にした位置 を指定します。
抜粋したコードがこちらです。
.icon {
anchor-name: --icon;
}
.fukidashi {
&::after {
position: absolute;
right: calc(anchor(--icon right) + 5px); /* calc は微調整のため追加 */
}
}
ただこれだけです。とても簡単ですね。
感想
主要ブラウザのうち Safari や Firefox がサポートしていない時点で、まだまだ実戦投入は時期尚早かなと思います。
しかし、 Chrome の開発者向けページでも述べられているとおり、この API を使うことで CSS での実装や表現の幅が大きく広がります。
JS を使わないと実現できなかったことが、こうして CSS だけで実装できるようになると、全世界の CSS 愛好家のみなさまはニヤニヤが止まらなくなりますね！
Anchor Positioning の使い方はとても簡単で直感的なので、「こんな便利なものがあるんだな」と覚えておくだけでも、きっと将来役に立つことがあるでしょう！
Discussion