CSS Anchor Positioning のきほん！

## はじめに
この記事は、2024年5月10日に開催された[meguro.css](https://megurocss.connpass.com/event/316265/)で発表した資料を噛み砕いで紹介した記事です。

<script defer class="speakerdeck-embed" data-id="ccbb425ab522439facc7fec7ce7aefc9" data-ratio="1.7771855010660982" src="//speakerdeck.com/assets/embed.js"></script>

## 内容
### 導入
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/be7329ea-31d7-40d0-828b-e954fbb5ffe2.png)

こんにちは、私はQiita株式会社の出口 裕貴です。
普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信しているので、よかったらXのフォローしていただけると嬉しいです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0ab1f0b7-cb9e-f3d2-bcc0-5289fbd94590.png)

早速ですが、みなさん CSS Anchor Positioning はご存知ですか？

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b6b8ea02-7185-8296-74e5-631c2625a230.png)

CSS Anchor Positioning は、ある要素(Anchor)を基準に表示位置を固定できる機能です。
この機能は、まだDraftで実験的な機能ですが、だいぶ便利な機能です！

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e3cf68e2-3f48-0a18-3352-2fc81f39e689.png)

今日は、そんなCSS Anchor Positioningの使い方と実装方法について紹介しようと思います。
今日の話を聞いて、皆さんが、CSS Anchor Positioning について理解して、興味を持っていただけると嬉しいです。

### CSS Anchor Positioningの使い方

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8604932f-fa2b-bd77-b505-f49e8abc9a36.png)

まずは、HTMLを記述します！
Anchorとなる要素には `class="anchor"`、
位置を固定したい要素には、`class="boat"` として記述します！

それ以外にも、Anchorとなる要素のidを固定したい要素のAnchor属性に定義してもOKです！

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a80f6adf-dfec-782f-7720-c8a748ebd2a0.png)

次に、CSS で Anchorを定義します。
Anchorを定義するには、Anchorとなる要素に `anchor-name` というプロパティに `--name` (dashed-ident形式)で指定します。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ebacd781-54a0-a082-dedb-7f818af23d0f.png)

最後に位置を固定します!
位置を固定したい要素に、`anchor()` 関数を使い、このような形で位置を固定します。

---

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="MWdWJXq" data-pen-title="Anchor/meguro.css - sample1" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWdWJXq">
  Anchor/meguro.css - sample1</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### CSS Anchor Positioningのすごいところ

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5bc1cba1-4dcc-c7a4-c007-260d19986db0.png)

これだと、Wrapするdivが少ないくなるくらいで、わざわざCSS Anchor Positioningを使わずに、position: absolute; を使う感じでいいのでは？ と感じる方が多いかもしれません。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a7b4848c-2fb7-b3ed-a6f9-6441a95d49fe.png)

CSS Anchor Positioning のすごいところは、ここからです！
CSS Anchor Positioningを使うと、アンカーの位置に合わせて、位置を固定したい要素 を 画面に収まるように自動で調整してくれます！

---

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="QWRWpEZ" data-pen-title="Anchor/meguro.css - sample2" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/QWRWpEZ">
  Anchor/meguro.css - sample2</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 固定要素を画面内に収めるようにする方法

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/94a20c9f-fd57-893e-2db8-7a24d9bb7eaf.png)

まずは、HTMLを記述します！
Anchorとなる要素には `class="anchor"` 、
位置を固定したい要素には、`class="boat"` として記述します！

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5fd22c48-783b-6d56-7905-8f17dee740a3.png)

次に、CSS で Anchorを定義します。
Anchorを定義するには、Anchorとなる要素に `anchor-name` というプロパティに `--name` (dashed-ident形式)で指定します。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/dddb5332-202a-79e4-e272-11eb91c73994.png)

そして、アンカーの位置によって、表示する場所を変えるようにしていきます。

`position-try-options` プロパティに --〇〇の形でフォールバックを使用する `@position-try` を決めます。 
そして、`@position-try`にアンカーの位置によって、表示したい場所指定すると、変わるようにできます。


## まとめ

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/78f69f47-d057-1fad-6830-f88c07ec48ac.png)

CSS Anchor Positioning を使うとTooltipなど画面にポップアップするコンポーネントがより簡単に実装できるようになります。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/94b3deae-8580-03ee-3ae1-c1053e5ab573.png)

まだ、CSS Anchor Positioningを対応しているブラウザはChrome 125以上のみになります

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510