記事検索
購読 する ログイン

任意のCSSプロパティで使用できるattr()関数 前編 CSSのattr()関数の基本

従来は疑似要素のcontentプロパティでのみ使用できたCSSのattr()関数の仕様が大きく変更され、任意のCSSプロパティで使用できるようになりました。まずは基本的なところを見ていきます。

カテゴリー
CSS >
CSSプロパティ

発行

著者 坂巻 翔大郎 フロントエンド・エンジニア
任意のCSSプロパティで使用できるattr()関数 シリーズの記事一覧

はじめに

CSSには、HTMLの属性値を参照できるattr()関数があります。従来は::beforeや::afterといった疑似要素のcontentプロパティでしか使えませんでした。

しかし、新しい仕様では、任意のCSSプロパティで使用できるようになり、属性値を「色」や「長さ」といった型として扱えるようになりました。

この記事では、機能拡張により新たに使えるようになったattr()関数の機能と、実践的な使用方法について解説していきます。

これまでのattr()関数とは

attr()関数は、HTMLの要素に設定された属性の値を、CSSの中で参照できる関数です。

次の例では<p>要素のdata-name属性の値（"Taro"）をattr()関数で取得し、::after疑似要素で「さん」を付けて表示しています。

<p data-name="Taro">こんにちは！</p>
 
p::after {
  content: attr(data-name) "さん";
}

結果として「こんにちは！Taroさん」と表示されます。

このように、attr()関数を使えば、HTMLの属性に設定した値をCSSで利用できます。idやtitleといった標準の属性だけでなく、data-*のようなカスタムデータ属性でも使用できます。

一見して便利そうに見えますが、::beforeや::after疑似要素のcontentプロパティのみでしか利用できず、属性値を文字として表示することしかできないため、これまでは使い所はあまりありませんでした。

CSS Values and Units Module Level 5による機能拡張

そんな使い所のなかったattr()関数でしたが、CSS Values and Units Module Level 5では、機能が大きく拡張されました。

任意のCSSプロパティで使用でき、属性値をさまざまなデータ型として解釈できるようになったのです。これにより、HTMLのカスタムデータ属性で渡した値を使って、CSSをいじらずに色やサイズを変えるといったことが可能になりました。

これまでのattr()関数と、新しい仕様のattr()関数の違いについて説明します。

従来のattr()関数には、次のような制限がありました。

  • 疑似要素のcontentプロパティでのみ使用可能
  • 属性値は文字列（<string>）としてのみ扱われる

CSS Values and Units Module Level 5で増えた機能は次のとおりです。

  • 任意のCSSプロパティで使用可能に
    • color、width、transformなど、content以外のプロパティでも使用できるようになった
  • 属性値を特定のデータ型にパースできる
    • <color>、<length>、<integer>、<custom-ident>など、さまざまな型を指定できるようになった
  • フォールバック値の指定が可能に
    • 属性が存在しない場合や、値が不正な場合の代替値を指定できるようになった

attr()関数のサポート状況の確認方法

新しいattr()関数の仕様は、執筆現在（2026年2月）では実験的な段階にあります。実際のプロジェクトで使用する際は、ブラウザのサポート状況を必ず確認してください。

新しい仕様のattr()関数に対応しているブラウザと、対応していないブラウザでは、@supportsルールを使って、次のようにCSS内で条件分岐ができます。

@supportsでの確認

@supports (x: attr(x type(*))) {
  /* ブラウザは新しい仕様の attr() に対応している */
}
@supports not (x: attr(x type(*))) {
  /* ブラウザは新しい仕様の attr() に対応していない */
}

基本的な構文

それでは新しいattr()関数について詳しく見てみましょう。まず、構文は、次のとおりです。

attr()関数の構文

attr(<属性名> <型指定>?, <フォールバック値>?)

型指定とフォールバック値は省略可能です。型指定を省略した場合は、文字列として扱われます。

属性名

属性名はこれまでのattr()関数と同様に、HTMLの要素の属性名を指定します。idのように標準の属性であったり、data-*のようにカスタムデータ属性でも使用できます。

カスタムデータ属性や標準属性での指定

<p data-name="Taro">こんにちは！</p>
<p id="Taro">私のid：</p>

attr()で属性値を参照

p[data-name]::after {
  content: attr(data-name) "さん";
}
p[id]::after {
  content: attr(id);
}

上記のコードのブラウザでの表示は、1つ目が「こんにちは！Taroさん」、2つ目が「私のid：Taro」となります。

単位や型指定

今回の変更で追加された、attr()関数の属性値を特定のデータ型にパースできる機能について説明します。

新しい仕様では、属性値を「ただの文字列」ではなく、「色」や長さの「数値」などとして扱えるようになりました。そのために、どの型として解釈するかを指定する必要があります。

型指定には、長さの単位を指定する方法や、type()を使って特定の型を指定する方法があります。

主な型と、その用途を見てみましょう。

指定方法 用途
px, em, rem, %など 長さの単位を指定
raw-string CSS文字列として扱う
type(<custom-ident>) 任意の識別子として扱う
type(<color>) 属性値を色として扱う
type(<integer>) 整数として扱う
type(<length> | <percentage>) 長さやパーセンテージとして扱う

単位や型についてはCodeGridの他の記事も参考にしてください。

使用例1：文字色を属性から指定する

それでは、実際にこの機能を使ってみましょう。要素の属性値を使って、テキストの色をHTMLから変更できるようにしてみます。

色を属性から指定する

<div data-color="blue">data-color属性に「blue」を指定したもの</div>
<div data-color="#ff00b3">data-color属性に「#ff00b3」を指定したもの</div>
<div data-color="あああ">data-color属性に「あああ」を指定したもの</div>
<div>data-color属性なし</div>

data-colorの値にそれぞれ、有効な色名（blue）、有効なカラーコード（#ff00b3）、無効な値（あああという文字列）、属性なし、を指定しています。

data-color属性を色として適用

div {
  color: attr(data-color type(<color>), red);
}

この例では、data-color属性の値を色として解釈します。無効な値や属性が存在しない場合は、フォールバック値として赤（red）が適用されます。

活用イメージ

テキストの色を動的に変更できることで、どのような活用が考えられるでしょうか。

たとえば、CodeGridの記事ヘッダのように、記事やカテゴリーごとに背景色が異なるようにしたいときが考えられます。現在のCodeGridではカテゴリーに合わせたたくさんのclassを用意し.cg-Article_Head.-Teal1のようにしています。たくさん用意しておけばよいのですが、用意されていないものは使えません。

そこで、カスタムデータ属性から任意の色を渡すようにします。HTMLから渡された色をそのまま使うのではなく、その色をグラデーションの開始色に使ったり、oklch()で使って渡された色を基準にちょっと明るくするといったこともできるでしょう。

使用例2：フォントサイズなどを属性から指定する

フォントサイズなどの数値も、属性から取得できます。

属性でサイズを指定

<div data-size="24">data-sizeに「24」を指定したもの</div>
<div data-size="１２">data-sizeに「１２」（全角の１と２）を指定したもの</div>
<div>指定なし</div>

data-sizeの値にそれぞれ、有効な値（24）、無効な値（１２という全角数字）、属性なし、を指定しています。

data-size属性を長さとして適用

div {
  font-size: attr(data-size px);
}

data-size属性の値「24」が、font-size: 24px;として解釈されます。

全角の「１２」は数値としては無効なので、font-sizeは適用されません。属性がない場合もfont-sizeは適用されません。

活用イメージ

文字色を指定する場合と同じく、CSSをいじらずにHTMLからフォントサイズの指定ができる点が便利です。

あらかじめフォントサイズごとにセレクタを用意しておく（.-xsとか.-lg）ことはよくありますが、例外的に任意のフォントサイズを指定したい場面があります。カスタムデータ属性で渡す方法であれば、style属性で直接style="font-size: 12px;"指定するのとは違い、渡した値をCSS側で調整（たとえばremに変換する、何かしらの係数をかける、など）したうえでフォントサイズに反映するということもできるでしょう。

durationを属性から指定する

pxだけでなく、ほかにもemやrem、時間に関する単位sなども使用できます。

属性でdurationを指定

<div data-duration="0.5">data-durationに「0.5」を指定したもの</div>
<div>指定なし（デフォルトの3s）</div>

data-duration属性を時間として適用

div {
  transition-duration: attr(data-duration s, 3s);
  &:hover {
    color: #fff;
    background-color: #000;
  }
}

data-duration属性の値「0.5」が、0.5sとして解釈され、ホバー時のトランジション時間が変更されます。属性がない場合は、フォールバック値の3sが適用されます。

デモでは要素にホバーしたときに、data-duration属性の値によってトランジションの時間が変わる様子を確認できます。

ここまでのまとめ

CSS Values and Units Module Level 5により、大幅に強化されたattr()関数について、基本的な使い方を解説しました。今回解説したことをおさらいしておきましょう。

  • contentプロパティだけでなく、任意のCSSプロパティで使用できる
  • 属性値を特定のデータ型にパースできる
    • 例：color: attr(data-color type(<color>));
  • フォールバック値の指定ができる
    • 例：color: attr(data-color type(<color>), red);

次回は、より実践的な使用例を紹介します。
X GitHub
運営会社