CSS - anchor-size()

• トップ
• CSSリファレンス
• anchor-size()

概要

説明

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

<anchor-name>

anchor-name で指定したアンカー名を指定します。

width, height

アンカーの横幅、高さを参照します。

block, inline

配置ボックス外部の文字方向に応じて、block は改行方向、inline は文字の進む方向を示します。縦書きか横書きかによって異なります。

self-block, self-inline

配置ボックス自身の文字方向に応じて、block は改行方向、inline は文字の進む方向を示します。縦書きか横書きかによって異なります。

<length-percentage>

アンカーを特定できなかった場合に、アンカーサイズの代わりに返却されるサイズです。

width, height などのサイズを示すプロパティで使用可能でしたが、Chrome 133 で margin, inset でも使用可能となりました。

使用例

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

.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;
}

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

リンク

• https://drafts.csswg.org/css-anchor-position-1/#anchor-size-fn
• https://developer.mozilla.org/en-US/docs/Web/CSS/anchor-size