こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSSで「あと一歩」が足りないと感じたことはありませんか？
HTMLに data-width="80" のような値が入っている。
本当はそれをそのままCSSで数値として使いたい。
でも現実は、JavaScriptで取得してstyleを書き換える。
そんな実装を何度もしてきたと思います。
これまでのCSSの attr() 関数は、文字列としてしか使えませんでした。
そのため、幅や角丸、計算に使うことができなかったのです。
そこに登場したのが Typed attr() です。
Typed attr() を使えば、HTML属性を「数値」としてCSSに渡せます。
この記事では、Typed attr()の基本から、実務での使いどころまでをカタログ形式で整理します。
Typed attr()とは何か
Typed attr()は、HTML属性の値を型付きでCSSに取り込める仕組みです。
従来の attr() と違い、数値や長さとして扱えます。
width: attr(data-width number);このように書くことで、data-width の値を数値として解釈します。
なぜTyped attr()が必要なのか
これまでの attr() は、主に content 用途でした。
- content: attr(data-label)
- テキスト表示専用
- 数値計算には使えない
Typed attr()では、CSSだけで動的表現が可能になります。
JavaScriptを介さずに済む場面が一気に増えます。
基本構文カタログ
数値として取得する
width: attr(data-size number);長さとして取得する
padding: attr(data-padding length);フォールバック付き
width: attr(data-width number, 100);属性が無い場合は 100 が使われます。
使える型のカタログ
- number：純粋な数値
- length：px や em などの長さ
- percentage：% 値
- angle：deg などの角度
CSSの計算にそのまま使える点が最大の魅力です。
実務で使えるTyped attr()活用カタログ
プログレスバー
.bar { width: attr(data-progress percentage); }カードの角丸調整
border-radius: attr(data-radius length);回転アニメーション
transform: rotate(attr(data-rotate angle));CSS計算との組み合わせ
width: calc(attr(data-cols number) * 80px);JavaScript不要になる場面
- UIの微調整
- データ駆動のレイアウト
- 軽量なインタラクション
Typed attr()は、JSを減らすための強力な武器です。
注意点と制限
- ブラウザ対応が限定的
- すべてのプロパティで使えるわけではない
- 動的変更には再計算されない場合がある
従来手法との比較
- JS：柔軟だが重い
- CSS変数：定義が必要
- Typed attr()：HTMLから直接
HTMLがそのままスタイルの入力値になります。
まとめ
Typed attr()は、HTMLとCSSの役割分担を一段進める技術です。
属性に書いた値を、そのままCSSで数値として扱える。
これは「装飾はCSS、データはHTML」という設計をより自然にします。
まだ発展途上の機能ではありますが、
将来のCSS設計を見据えるなら必ず知っておくべき存在です。
今後のアップデートと対応拡大に注目しておきましょう。
satokotadesignキャンペーン実施中！
