CSS - anchor-size()

概要

形式	anchor-size([ <anchor-name> \|\| <anchor-size> ]? , <length-percentage>)
値の詳細	<anchor-name> = <dashed-ident> <anchor-size> = width \| height \| block \| inline \| self-block \| self-inline
サポート	https://caniuse.com/mdn-css_types_anchor-size

説明

アンカーポジショニングにおいて配置ボックスの大きさを決める際にアンカーの大きさを参照します。アンカーポジショニングに関する詳細は「とほほのアンカーポジショニング入門」を参照してください。

<anchor-name>: anchor-name で指定したアンカー名を指定します。
width, height: アンカーの横幅、高さを参照します。
block, inline: 配置ボックス外部の文字方向に応じて、block は改行方向、inline は文字の進む方向を示します。縦書きか横書きかによって異なります。
self-block, self-inline: 配置ボックス自身の文字方向に応じて、block は改行方向、inline は文字の進む方向を示します。縦書きか横書きかによって異なります。
<length-percentage>: アンカーを特定できなかった場合に、アンカーサイズの代わりに返却されるサイズです。

使用例

下記の例では配置ボックスの横幅をアンカーの3倍、高さをアンカーの2倍に設定しています。

CSS

.my-anchor {
  anchor-name: --my-anchor;
  position: relative;
  top: 20px;
  left: 100px;
  height: 24px;
  line-height: 24px;
  width: 120px;
  background-color: #339;
  color: #fff;
  text-align: center;
}
.my-positioned-box {
  position-anchor: --my-anchor;
  position: absolute;
  width: calc(anchor-size(width) * 3);
  height: calc(anchor-size(height) * 2);
  background-color: #eee;
  border: 1px solid #ccc;
  padding: .2rem;
  position-area: bottom span-right;
}

HTML

<div class="my-anchor">Anchor</div>
<div class="my-positioned-box">Positioned Box</div>

表示

Anchor

Positioned Box

リンク

初版：2024年12月22日、最終更新：2024年12月22日

https://www.tohoho-web.com/css/value/anchor.htm