型付きCSS attr()ジェネレーターとは
型付きCSS attr()関数（Chrome 133以上）は、HTML属性値を読み取り、明示的な型キャストで任意のCSSプロパティで使用します。従来のattr()が疑似要素のcontentプロパティでのみ動作し常に文字列を返すのに対し、型付きバージョンは型パラメータを受け入れます：attr(data-value type(<type>), <fallback>)。サポートされる型には、string、number、px、rem、em、percentage、color、deg、s、ms、urlなどがあります。これにより、JavaScriptの補間なしでデータ属性駆動のスタイリングが可能になります。
クイックアンサー
型付きCSS attr(data-* type(<type>), <fallback>)を使用して、HTML属性値を型キャスト付きで任意のCSSプロパティに読み込みます。Chrome 133以上のみ対応。number、px、rem、em、percentage、color、deg、s、ms、urlの型をサポートします。常にフォールバック値を提供し、クロスブラウザ互換性のために最初にハードコードされたフォールバック宣言をレイヤーします。
Last updated: 2026-05-30
制限事項
- 型付きattr()にはChrome 133以上またはEdge 133以上が必要です。2026年5月現在、SafariとFirefoxはまだサポートしていません。この関数は事実上Chromium専用であり、非Chromiumブラウザはすべて初期値または先行するハードコードされた宣言にフォールバックします。
- 属性値は期待される型の形式に正確に一致する必要があります。type(px)属性は"300"を期待し、"300px"や"300 px"、非数値文字列では失敗します。組み込みのサニタイゼーションや寛容な解析はなく、型システムは厳密な値のフォーマットを強制します。
- 型変換の失敗と解析エラーは異なる動作をします。型の不一致はフォールバック値をトリガーしますが、完全に無効な型引数（type(foobar)など）はCSS解析エラーとなり、宣言全体が無効になります。スタイルの無効化を避けるために、文書化された型キーワードのみを使用してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 読み取るHTML属性を選択します。通常はdata-size、data-color、data-speedなどのdata-*属性です。
- 属性値を受け取るCSSプロパティを選択します。選択した型を受け付ける任意のCSSプロパティが使用できます。
- CSSプロパティと期待される値の形式に一致する型をattr()関数に選択します。
- 属性が欠落している場合、空の場合、または値を指定された型に解析できない場合のフォールバック値を設定します。
主な用途
- インラインスタイルの代わりにattr(data-percent type(%), 0%)を使用してdata-属性で幅を設定するデータ駆動プログレスバーを構築する。
- data-duration属性とdata-delay属性がattr(data-duration type(s), 300ms)でアニメーションタイミングを制御する設定可能なアニメーションシステムを作成する。
- data-accentがHTMLから16進カラーを読み取り、attr(data-accent type(color), #333)で背景、ボーダー、テキストカラーに適用するコンポーネントカラーシステムを設計する。