はじめに
この記事は、2024年5月10日に開催されたmeguro.cssで発表した資料を噛み砕いで紹介した記事です。
内容
導入
こんにちは、私はQiita株式会社の出口 裕貴です。
普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信しているので、よかったらXのフォローしていただけると嬉しいです。
早速ですが、みなさん CSS Anchor Positioning はご存知ですか？
CSS Anchor Positioning は、ある要素(Anchor)を基準に表示位置を固定できる機能です。
この機能は、まだDraftで実験的な機能ですが、だいぶ便利な機能です！
今日は、そんなCSS Anchor Positioningの使い方と実装方法について紹介しようと思います。
今日の話を聞いて、皆さんが、CSS Anchor Positioning について理解して、興味を持っていただけると嬉しいです。
CSS Anchor Positioningの使い方
まずは、HTMLを記述します！
Anchorとなる要素には class="anchor"、
位置を固定したい要素には、class="boat" として記述します！
それ以外にも、Anchorとなる要素のidを固定したい要素のAnchor属性に定義してもOKです！
次に、CSS で Anchorを定義します。
Anchorを定義するには、Anchorとなる要素に anchor-name というプロパティに --name (dashed-ident形式)で指定します。
最後に位置を固定します!
位置を固定したい要素に、anchor() 関数を使い、このような形で位置を固定します。
See the Pen Anchor/meguro.css - sample1 by でぐぅー | Qiita (@sp_degu) on CodePen.
CSS Anchor Positioningのすごいところ
これだと、Wrapするdivが少ないくなるくらいで、わざわざCSS Anchor Positioningを使わずに、position: absolute; を使う感じでいいのでは？ と感じる方が多いかもしれません。
CSS Anchor Positioning のすごいところは、ここからです！
CSS Anchor Positioningを使うと、アンカーの位置に合わせて、位置を固定したい要素 を 画面に収まるように自動で調整してくれます！
See the Pen Anchor/meguro.css - sample2 by でぐぅー | Qiita (@sp_degu) on CodePen.
固定要素を画面内に収めるようにする方法
まずは、HTMLを記述します！
Anchorとなる要素には class="anchor" 、
位置を固定したい要素には、class="boat" として記述します！
次に、CSS で Anchorを定義します。
Anchorを定義するには、Anchorとなる要素に anchor-name というプロパティに --name (dashed-ident形式)で指定します。
そして、アンカーの位置によって、表示する場所を変えるようにしていきます。
position-try-options プロパティに --〇〇の形でフォールバックを使用する @position-try を決めます。
そして、@position-tryにアンカーの位置によって、表示したい場所指定すると、変わるようにできます。
まとめ
CSS Anchor Positioning を使うとTooltipなど画面にポップアップするコンポーネントがより簡単に実装できるようになります。
まだ、CSS Anchor Positioningを対応しているブラウザはChrome 125以上のみになります
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。