CSS anchor-size() 関数

構文

/* 引数なし */
anchor-size()

/* アンカーサイズ引数 */
anchor-size(width);
anchor-size(block);
anchor-size(self-inline);

/* anchor-name および anchor-side */
width: anchor-size(--my-anchor width);
block-size: anchor-size(--my-anchor block);

/* 指定されたアンカーの側に対する相対サイズ設定（代替値つき） */
width: anchor-size(--my-anchor width, 50%);
block-size: anchor-size(--my-anchor block, 200px);

/* アンカー側に対する位置指定 */
left: anchor-size(width);
inset-inline-end: anchor-size(--my-anchor height, 100px);

/* アンカー端から見たマージンの設定 */
margin-left: calc(anchor-size(width) / 4);
margin-block-start: anchor-size(--my-anchor self-block, 20px);

引数

anchor-size() 関数の構文は次の通りです。

anchor-size(<anchor-name> <anchor-size>, <length-percentage>)

引数は次の通りです。

<anchor-name> 省略可

要素のサイズ、位置、またはマージンを相対的に設定したいアンカー要素の anchor-name プロパティ値。これは <dashed-ident> 値です。省略された場合、要素のデフォルトアンカーが使用されます。

メモ: <anchor-name> を anchor-size() 関数内で指定しても、要素をアンカーに関連付けたり固定したりするわけではありません。これは単に、要素のプロパティ値をどのアンカーを基準に設定すべきかを定義するだけです。

<anchor-size> 省略可

指定された要素のプロパティ値が相対的に設定されるアンカー要素の側面を指定します。有効な値は以下の通りです。

width

アンカー要素の幅です。

height

アンカー要素の高さです。

block

アンカー要素の包含ブロックのブロック方向における長さ。

inline

アンカー要素のインライン方向における包含ブロックの長さ。

self-block

アンカー要素のブロック方向の長さ。

self-inline

アンカー要素のインライン方向の長さ。

メモ: この引数が省略された場合、軸の寸法はデフォルトで、関数が含まれるプロパティの軸に対応する <anchor-size> キーワードに設定されます。例えば、width: anchor-size(); は width: anchor-size(width); と同等です。

<length-percentage> 省略可

要素が絶対指定または固定位置指定でない場合、またはアンカー要素が存在しない場合に代替値として使用するサイズを指定します。代替値が使用されるべき状況でこの引数が省略された場合、宣言は無効となります。

返値

<length> 値を返します。

解説

anchor-size() 関数は、位置指定された要素のサイズ、位置、マージン値をアンカー要素の寸法で表現することを可能にします。この関数は、位置指定された要素のプロパティ値が相対的に設定される特定のアンカー要素の寸法を表す <length> 値を返します。アンカー位置指定された要素に設定されるサイズ、インセット、マージンプロパティの有効な値となります。

返される長さは、アンカー要素またはその包含ブロックの垂直方向または水平方向のサイズです。使用される寸法は<anchor-size>引数によって定義されます。この引数が省略された場合、使用される寸法は、サイズ、位置、またはマージンプロパティが設定されている軸に一致します。

• width: anchor-size() は width: anchor-size(width) と同等です。
• top: anchor-size() は top: anchor-size(height) と同等です。
• margin-inline-end: anchor-size() は margin-inline-end: anchor-size(self-inline) と同等です。また、margin-inline-end: anchor-size() は横書き時には margin-inline-end: anchor-size(width) と同等であり、縦書き時には margin-inline-end: anchor-size(height) と同等です。

寸法の長さの基準となるアンカー要素は、<anchor-name> 引数で指定された anchor-name を持つ要素です。複数の要素が同じアンカー名を持つ場合、DOM 順序でそのアンカー名を持つ最後の要素が使用されます。

関数呼び出しに <anchor-name> 引数が含まれていない場合、要素のデフォルトアンカーが使用されます。これは、そのposition-anchorプロパティで参照されるか、anchor HTML属性によって要素に関連付けられたものです。

<anchor-name> 引数が含まれており、そのアンカー名に一致する要素が存在しない場合、代替値が使用されます。代替値が含まれていない場合、宣言は無視されます。例えば、配置された要素に width: anchor-size(--foo width, 50px); height: anchor-size(--foo width); が指定されているが、DOM 内に --foo という名前のアンカーが存在しない場合、width は 50px となり、height 宣言は効果がありません。

要素に anchor-size() 値が設定されたサイズ、位置、マージンプロパティがある場合でも、その要素がアンカー配置要素でない場合（position プロパティが absolute または fixed に設定されていない、あるいは position-anchor プロパティを介して関連付けられたアンカーを持たない場合）、利用可能な代替値が使用されます。代替値が存在しない場合、宣言は無視されます。

例えば、位置指定された要素に width: anchor-size(width, 50px); が指定されているが、アンカーが関連付けられていない場合、代替値が使用されるため、width の計算値は 50px となります。

アンカー機能の詳細と使用方法については、CSS アンカー位置指定モジュールおよび CSS アンカー位置指定の使用方法ガイドを参照してください。

anchor-size() 関数値を受け入れるプロパティ

anchor-size() 関数を値として受け入れるプロパティには、以下のものがあります。

• サイズ指定プロパティ:
  • width
  • height
  • min-width
  • min-height
  • max-width
  • max-height
  • block-size
  • inline-size
  • min-block-size
  • min-inline-size
  • max-block-size
  • max-inline-size
• インセットプロパティ:
  • bottom
  • left
  • right
  • top
  • inset 一括指定
  • inset-block 一括指定
  • inset-block-end
  • inset-block-start
  • inset-inline 一括指定
  • inset-inline-end
  • inset-inline-start
• マージンプロパティ:
  • margin 一括指定
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-block 一括指定
  • margin-block-end
  • margin-block-start
  • margin-inline 一括指定
  • margin-inline-end
  • margin-inline-start

calc() 内での anchor-size() の使用

anchor-size() 関数の中で最もよく使われる用途は、デフォルトのアンカーのサイズを参照することです。他にも、anchor-size() 関数を calc() 関数内で使用することで、位置指定要素に適用されるサイズを変更できます。

例えば、次のルールは位置指定要素の幅を、デフォルトのアンカー要素の幅と同じサイズにします。

.positionedElem {
  width: anchor-size(width);
}

次のルールは、位置指定要素のインラインサイズをアンカー要素のインラインサイズの 4 倍に設定します。乗算は calc() 関数内で実行されます。

.positionedElem {
  inline-size: calc(anchor-size(self-inline) * 4);
}

形式文法

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<length-percentage> = 
  <length>      |
  <percentage>  

例

基本的な anchor-size() の使い方

この例では、2 つの要素をアンカーを基準に位置指定し、anchor-size() 関数を使用してサイズを設定しています。

HTML

3 つの <div> 要素、1 つの anchor 要素、およびアンカー要素に対して相対配置する 2 つの infobox 要素を指定します。また、<body> の高さをスクロールが必要になる程度にするため、埋め込みテキストをしていますが、これは簡潔さを考慮して非表示にしています。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox" id="infobox1">
  <p>This is the first infobox.</p>
</div>

<div class="infobox" id="infobox2">
  <p>This is the second infobox.</p>
</div>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

anchor の <div> をアンカー要素として宣言するには、anchor-name を付与します。position プロパティを fixed に設定した位置指定要素は、position-anchor プロパティを介してアンカー要素に関連付けられます。また、アンカーには絶対的な height と width を設定し、ブラウザー開発者ツールなどで位置指定要素のサイズを確認する際の基準点とします。

.anchor {
  font-size: 2rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  text-align: center;
  align-content: center;
  outline: 1px solid black;
}

body {
  width: 80%;
  margin: 0 auto;
}

.infobox {
  align-content: center;
  color: darkblue;
  background-color: azure;
  outline: 1px solid #dddddd;
  font-size: 1rem;
  text-align: center;
}

.anchor {
  anchor-name: --my-anchor;
  width: 100px;
  height: 50px;
}

.infobox {
  position-anchor: --my-anchor;
  position: fixed;
}

位置指定要素に対して、いくつかの明確なプロパティ値を設定します。

• 位置指定要素はアンカーに固定され、異なる position-area 値によってアンカー要素の周囲の異なる場所に配置されます。
• 最初の情報ボックスの height はアンカー要素と同じ高さに設定されていますので、anchor-size(height) はアンカー要素の高さを返します。要素の width は、anchor-size() 関数を calc() 関数内で使用し、アンカー要素の幅の 2 倍に設定されます。anchor-size(width) でアンカー要素の幅を取得し、それを 2 倍します。
• 2 つ目の情報ボックスの height は、アンカー要素の高さの80%に設定されており、同様の手法が用いられています。
• マージン値は、アンカー要素から指定された距離を確保するために記載されています。

#infobox1 {
  position-area: right;
  height: anchor-size(height);
  width: calc(anchor-size(width) * 2);
  margin-left: 5px;
}

#infobox2 {
  position-area: top span-right;
  height: calc(anchor-size(height) / 1.25);
  margin-bottom: 5px;
}

結果

ブラウザーのツールを使用して、位置指定された要素を検査してください。最初の情報ボックスは高さ 50px、幅 200pxで、2 つ目の情報ボックスは高さ 40px、幅はデフォルトで max-content となります。

位置指定とマージンの例

anchor-size() の位置とマージンの例を参照してください。

仕様書

ブラウザーの互換性

関連情報

• anchor-name
• position-anchor
• anchor() 関数
• CSS アンカー位置指定の使用
• CSS アンカー位置指定モジュール