とほほのアンカーポジショニング入門
- アンカーポジショニングとは
- 基本的なサンプル
- アンカーに名前を付ける(anchor-name)
- 配置ボックスからアンカーを参照する(position-anchor)
- 配置ボックスの表示位置を決める(position-area)
- 画面からはみ出す場合の位置補正(position-try-fallbacks)
- 位置補正の優先順位(position-try-order)
- ショートハンド(position-try)
- アンカースコープ(anchor-scope)
- 非表示制御(position-visibility)
- anchor()関数
- anchor-size()関数
- anchor-center 値
- リンク
アンカーポジショニングとは
- CSS でボタンやメニュークリック時にツールチップやポップアップをボタンやメニューに対する相対位置で表示するための機能です。
- ボタンやメニューのことを「アンカー(anchor)」と呼びます。
- ツールチップやポップアップのことを「配置ボックス(positioned box)」と呼びます。
- 配置ボックスが画面からはみ出す場合に表示位置を補正することもできます。
- 下記のプロパティ、ルール、関数、値から構成されます。
- anchor-name プロパティ
- position-anchor プロパティ
- position-area プロパティ
- position-try-fallbacks プロパティ
- position-try-order プロパティ
- position-try プロパティ
- anchor-scope プロパティ
- position-visibility プロパティ
- @position-try ルール
- anchor() 関数
- anchor-size() 関数
- anchor-center 値
- Chrome 125 でサポートされましたが、Chrome 131 では下記の様に名称が変更されています。
- inset-area → position-area
- position-try-options → position-try-fallbacks
基本的なサンプル
.my-anchor { position: relative; top: 6rem; left: 20rem; background-color: #339; color: #fff; padding: .2rem; width: 5rem; text-align: center; anchor-name: --my-anchor; } .my-positioned-box { background-color: #eee; border: 1px solid #ccc; width: 10rem; padding: .2rem; position-anchor: --my-anchor; position: absolute; position-area: bottom span-right; position-try-fallbacks: top span-left; }
<div class="my-anchor">Anchor</div> <div class="my-positioned-box"> <div>Menu1</div> <div>Menu2</div> <div>Menu3</div> </div>
枠のサイズを変更してメニューが隠れるようにすると、メニューが左上に移動します。
アンカーに名前を付ける(anchor-name)
anchor-name
でポジショニングの対象となるアンカーにアンカー名をつけます。アンカー名は --
で始まる名前を指定します。
.my-anchor { : anchor-name: --my-anchor; }
配置ボックスからアンカーを参照する(position-anchor)
配置ボックスには、position-anchor
で対象とするアンカーを指定します。
.my-positioned-box { : position-anchor: --my-anchor; }
配置ボックスの表示位置を決める(position-area)
position-area
は配置ボックスの位置を指定します。配置ボックスには position: absolute
も指定する必要があります。
.my-positioned-box { : position-anchor: --my-anchor; position: absolute; position-area: bottom span-right; }
bottom span-right
などの位置は下記の ①~⑧ のどの位置に表示するかを指定しています。
① | ② | ③ |
④ | Anchor | ⑤ |
⑥ | ⑦ | ⑧ |
- top left : ①
- top : ②
- top right : ③
- top span-left : ①②
- top span-right : ②③
- top span-all : ①②③
- bottom left : ⑥
- bottom : ⑦
- bottom right : ⑧
- bottom span-left : ⑥⑦
- bottom span-right : ⑦⑧
- bottom span-all : ⑥⑦⑧
- left : ④
- right : ⑤
- span-top left : ①④
- span-top right : ③⑤
- span-bottom left : ④⑥
- span-bottom right : ⑤⑧
- span-all left : ①④⑥
- span-all right : ③⑤⑧
画面からはみ出す場合の位置補正(position-try-fallbacks)
位置指定(top, ...)
position-try-fallbacks
には、配置ボックスが画面からはみだした場合に移動させる位置を指定します。下記の例では、通常は bottom span-right
の位置に表示しますが、画面からはみ出す場合は bottom span-left
、それでもはみ出す場合は top span-right
、それでもはみ出す場合は top span-left
の位置に表示します。
.my-positioned-box { : position-area: bottom span-right; position-try-fallbacks: bottom span-left, top span-right, top span-left; }
フリップ指定(flip-...)
position-try-fallbacks
には下記の値を指定することもできます。
- flip-inline : 画面からはみ出す場合にインライン方向(横方向)に反転させます。
- flip-block : 画面からはみ出す場合にブロック方向(縦方向)に反転させます。
- flip-start : 画面からはみ出す場合に左上から右下の対角線を中心に反転させます。縦横比も変わるようです。
下記の例では、横方向にはみ出す場合は左側に反転し、縦方向にはみ出す場合は上側に反転します。
.my-positioned-box { : position-area: bottom span-right; position-try-fallbacks: flip-inline, flip-block; }
名前指定(@position-try)
position-try-fallbacks
には @position-try
で定義した名前を指定することもできます。下記の例では配置ボックスがはみ出す場合、--bottom-left
の位置に、それでもはみ出す場合は --top-right
の位置に、それでもはみ出す場合は --top-left
の位置に表示します。
@position-try --bottom-left { position-area: bottom span-left; } @position-try --top-right { position-area: top span-right; } @position-try --top-left { position-area: top span-left; } .my-positioned-box { position-area: bottom span-right; position-try-fallbacks: --bottom-left, --top-right, --top-left; }
位置補正の優先順位(position-try-order)
position-try-order
には、position-try-fallbacks
で指定した補正位置の優先度を指定します。
- most-width : 横幅を最大限確保できる位置に補正します。
- most-height : 高さを最大限確保できる位置に補正します。
- most-block-size : ブロックサイズ方向(横書きの場合は縦方向)に最大限確保できる位置に補正します。
- most-inline-size : インラインサイズ方向(横書きの場合は横方向)に最大限確保できる位置に補正します。
下記の例では通常時は右上(top span-right
)に表示します。横幅が狭くなり表示しきれなくなると、左下(bottom span-left
) と右下(bottom span-right
) の内、横幅を最大限に確保できる方に位置補正します。
.my-positioned-box { : position-area: top span-right; position-try-fallbacks: bottom span-left, bottom span-right; position-try-order: most-width; }
<div class="my-anchor">Anchor</div> <div class="my-positioned-box">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
ショートハンド(position-try)
position-try
は、position-try-fallbacks
と position-try-order
をまとめて指定することができるショートハンドです。
.my-positioned-box { /* position-try-order: most-width; */ /* position-try-fallbacks: bottom span-right, top-span-left; */ position-try: most-width bottom span-right, top-span-left; }
アンカースコープ(anchor-scope)
anchor-scope
で指定したアンカー名はこの要素の子孫要素からのみ参照可能な名前となります。ひとつのページにアンカーと配置ボックスのペアを複数記述する場合、個々に別々のアンカー名を指定する必要がありますが、anchor-scope
でアンカー名の参照可能スコープを指定することにより、同じ名前を使用できるようになります。Chrome 131 からサポートされます。
.my-anchor-and-positioned-box { anchor-scope: --my-anchor; .my-anchor { anchor-name: --my-anchor; } .my-positioned-box { position-anchor: --my-anchor; } }
<div class="my-anchor-and-positioned-box"> <div class="my-anchor">Anchor</div> <div class="my-positioned-box"> <div>Menu1</div> <div>Menu2</div> <div>Menu3</div> </div> </div> <div class="my-anchor-and-positioned-box"> <div class="my-anchor">Anchor</div> <div class="my-positioned-box"> <div>Menu1</div> <div>Menu2</div> <div>Menu3</div> </div> </div>
非表示制御(position-visibility)
position-visibility
はアンカーや配置ボックスの状態によって配置ボックスの表示・非表示を制御します。no-overflow
を指定すると配置ボックスの一部でもスクロールアウトすると配置ボックス全体が非表示になります。他の値については position-visibility
を参照してください。
.my-positioned-box { : position-visibility: no-overflow; }
anchor()関数
position-area
の代わりに anchor()
関数を用いて配置ボックスの位置を指定することもできます。下記の例では配置ボックスの上端(top)をアンカーの下部(bottom)に、配置ボックスの左端(left)をアンカーの左端(left)に位置づけます。
.my-positioned-box {
position-anchor: --my-anchor;
/* position-area: bottom span-right; */
top: anchor(bottom);
left: anchor(left);
}
position-anchor
でアンカー名を指定する代わりに anchor()
の第1引数でアンカー名を指定することもできます。
.my-positioned-box {
/* position-anchor: --my-anchor; */
top: anchor(--my-anchor bottom);
left: anchor(--my-anchor left);
}
引数には top
, bottom
, left
, right
, start
, end
, self-start
, self-end
, inside
, outside
, center
, <percentage>
を指定することができます。詳細は anchor()
を参照してください。
anchor-size()関数
anchor-size()
関数はアンカーの横幅や高さを計算します。下記の例では、配置ボックスの高さをアンカーの2倍、横幅もアンカーの2倍の大きさに指定しています。
.my-positioned-box { height: calc(anchor-size(height) * 2); width: calc(anchor-size(width) * 2); }
anchor-center 値
配置ボックスをアンカーの中央に表示するために、justify-self
, align-self
, justify-items
, align-items
プロパティに新しい値 anchor-center
が追加されました。通常 justify-
は横方向、align-
は縦方向を意味します。-self
はアイテム自身に、-items
はアイテムを含むコンテナに指定します。
.my-positioned-box { justify-self: anchor-center; align-self: anchor-center; }
リンク
- https://drafts.csswg.org/css-anchor-position-1/
- https://developer.mozilla.org/ja/docs/Web/CSS/CSS_anchor_positioning