【CSS Modules】anchor-size()関数の使い方
anchor-size()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
anchor-size()関数は、CSSのAnchor Positioning APIの一部として、ある要素（アンカー要素）の幅または高さを取得し、それを基に別の要素の配置やサイズを決定する関数です。この機能は、特にユーザーインターフェース（UI）コンポーネントの配置を柔軟かつ動的に行うために設計されています。
例えば、ボタンの横に表示されるツールチップや、入力フィールドの下に現れるドロップダウンリストなど、特定の要素に「アンカー」して表示される要素のレイアウトにおいて、そのアンカー要素の大きさに合わせて動的に調整することが求められます。従来のCSSでは、このような要素の配置やサイズをハードコードされた値ではなく、アンカー要素の実際の寸法に基づいて設定することは困難でしたが、anchor-size()関数を使用することで、この問題を解決できます。
この関数は、引数としてwidthまたはheightを受け取ります。これにより、アンカー要素のどちらの次元のサイズを参照するかを指定します。さらに、オプションとしてアンカー要素の名前を指定することも可能です。これは、複数のアンカー要素が存在する場合に、どの要素のサイズを参照するかを明確にするために使用されます。多くの場合、anchor()関数と組み合わせて使用され、アンカー要素からの相対的な位置指定とサイズの参照を同時に実現し、より複雑なレイアウト要件に対応します。
anchor-size()関数は、要素間の相対的なサイズに基づいた、堅牢でレスポンシブなWebデザインの実現を支援する強力なツールです。
構文(syntax)
1.my-element { 2 width: anchor-size(width); 3}
引数(parameters)
[ <custom-ident> || self ]? <dimension-keyword>
<custom-ident>orself: アンカー要素の識別子、またはselfを指定します。<dimension-keyword>: アンカー要素のサイズを指定するキーワードです。
戻り値(return)
anchor-size() 関数は、アンカー要素のサイズを返します。このサイズは、計算された幅または高さ、あるいは auto の値です。