【CSS Modules】anchor()関数の使い方
anchor()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
anchor()関数は、CSSにおいて、ある要素を基準点（アンカー）として、別の要素の位置を決定するために使用する関数です。この関数は、主にposition: absolute;やinsetなどの配置プロパティの値として利用されます。
具体的には、anchor()関数は、特定の要素を「アンカー要素」として指定し、そのアンカー要素の辺（例えば、上端、下端、左端、右端、または中央など）を参照して、別の要素を配置することを可能にします。これにより、例えばツールチップやポップオーバー、コンテキストメニューのようなUIコンポーネントを開発する際に、その基準となる要素が動的に位置を変更したり、サイズが変化したりした場合でも、常に正確な位置に追従して配置することができます。
従来の固定的な配置方法とは異なり、anchor()関数を使用することで、基準となる要素の位置が事前に不明な場合や、ビューポートのサイズ変更に応じて要素が動的に移動する場合でも、配置される要素が自動的に適切な位置に追従する、柔軟でレスポンシブなレイアウトを実現できます。システムはアンカー要素の位置をリアルタイムで計算し、それに従って配置対象の要素の位置を決定するため、より動的でインタラクティブなウェブアプリケーションの構築に貢献します。
公式リファレンス: anchor()
構文(syntax)
1anchor(bottom)
引数(parameters)
<anchor-name> | self | anchor-size, [ <side> || <length-percentage> ]
- <anchor-name>: アンカー要素の名前を指定します。
- self: 現在の要素自身をアンカーとして指定します。
- anchor-size: アンカー要素のサイズを指定します。
- <side>: サイドを指定します (例: top, right, bottom, left)。
- <length-percentage>: 長さまたはパーセンテージでサイズを指定します。
戻り値(return)
<length-percentage>
anchor()関数は、指定されたアンカー要素からの相対的な位置を示す長さまたはパーセンテージの値を返します。