CSS の attr() 関数の使用例 サンプル
2025/12/24
HTMLの属性の値をCSSで使用できるようにする attr() 関数。とても便利なので勉強も兼ねてメモ。
attr() 関数の構文
attr(<attr-name> <attr-type> , <fallback-value>)
※属性とは
HTMLタグで「属性名="属性値"」という形式で記述されるものです。
下記の太字の箇所が属性。
上記でいうと、属性値の「red」や「220」を、attr() 関数で取得して、CSSで使用出来る。
HTMLタグで「属性名="属性値"」という形式で記述されるものです。
下記の太字の箇所が属性。
<div data-name="red">apple</div>
<div data-width="220"></div>
<div data-width="220"></div>
attr()の引数について
attr(<attr-name> <attr-type> , <fallback-value>)
【1】<attr-name>
属性名(任意の名前)。
【2】<attr-type>
- raw-string
テキスト。例） div::before {content: attr(data-name raw-string, "yellow");}See the Pen attr() sample02 - content by Akemi Oikawa (@akemiweb) on CodePen.
- type()
値と単位。例） attr(data-width px, 160px)See the Pen att() sample03 - width data-width by akemiweb (@akemiweb) on CodePen.
【3】<fallback-value>
指定した属性が無いか値が不正の時に、代わりに表示する値。
attr() 使用例 - content に使う
See the Pen Untitled by Akemi Oikawa (@akemiweb) on CodePen.
この例では「data-en」が属性名（属性名は任意）。
content に attr(data-en) を記述。前後に文字を付加できる（""と余白で）。
HTML内のタグの「data-en」属性の値を取得して表示する。
テキストを、CSSにではなく、HTMLに直接書き込めるのは直感的に分かりやすいし、便利。
content に attr(data-en) を記述。前後に文字を付加できる（""と余白で）。
HTML内のタグの「data-en」属性の値を取得して表示する。
テキストを、CSSにではなく、HTMLに直接書き込めるのは直感的に分かりやすいし、便利。
attr() 使用例 - 色を変える type()
See the Pen attr() sample04 - type(<color>) by akemiweb (@akemiweb) on CodePen.
HTML の「<div>このテキストは紺色です</div>」には、属性（data-color）が設定されていないので、文字色は CSS の attr() の <fallback-value>に設定した「darkblue」になっています。