【CSS Modules】attr()関数の使い方
attr()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
attr()関数は、HTML要素の特定の属性値を取得し、CSSプロパティの値として利用できるように実行する関数です。この関数を用いることで、HTMLに記述された情報をCSSのスタイルに動的に反映させ、柔軟なスタイリングを実現します。
主に::beforeや::afterといった擬似要素のcontentプロパティで用いられます。例えば、アンカータグ（<a>）のhref属性からURLを取得し、リンクテキストの後に表示する、といった活用ができます。
基本的な記述形式はattr(attribute-name)で、attribute-nameには参照したいHTML属性名を指定します。さらに、オプションとしてattr(attribute-name <type> <fallback>)のように、取得する値の型と代替値を指定することもできます。<type>にはstring、url、number、lengthなどのCSSデータ型を指定し、属性値がその型として解釈され、より多様なCSSプロパティで利用しやすくなります。型を指定しない場合、値は既定でstring型として扱われます。<fallback>は、属性が存在しない場合や型変換に失敗した場合に適用される値で、予期せぬスタイルの崩れを防ぐのに役立ちます。
ただし、attr()関数をcontentプロパティ以外で使用する場合、その利用はまだ実験的な段階にあり、すべてのブラウザで完全にサポートされているわけではない点にご留意ください。
構文(syntax)
1.element::before { 2 content: attr(data-label); 3}
引数(parameters)
attr-name, type-or-unit, attr-fallback
- attr-name: 取得したい属性の名前を指定します
- type-or-unit: 属性の型または単位を指定します（省略可能）
- attr-fallback: 属性が存在しない場合のフォールバック値を指定します（省略可能）
戻り値(return)
<string> | <color> | <url> | <integer> | <number> | <length> | <percentage> | <angle> | <time> | <frequency> | <resolution>
attr() 関数は、HTML要素のカスタムデータ属性（data-* 属性など）や、一部の標準属性の値を返します。返される値の型は、属性によって <string>、<color>、<url>、<integer>、<number>、<length>、<percentage>、<angle>、<time>、<frequency>、<resolution> のいずれかになります。