まるで変数スタイルを身軽にコーディング

Top›labo›

Just Like Variables: Agile and Lightweight CSS Coding

この記事はWEB遺跡の聖櫃発掘で甦る古代WEB魔法の続きになります。先にそちらをご覧ください。

Attr()関数を使ってHTMLの属性値を利用！身軽に自在にスタイル設計。

| 2026/07/28

Attr()
概要

最も初期の古代聖遺物 attr()の説明と概要

とても1998年に公開されたとは思えない先進的な古代魔法の秘密に迫る
どうも、この発掘調査の責任者、ジェミパラ・トラッセンダー、古代魔法専門の魔導士だ。今回も引き続き、古代遺跡発掘の報告・解説を続けたい。
今回は第一次遺跡発掘で見つかったAttr()関数について紹介したいと思う。
まず何といっても、この魔法陣、ほぼ30年近く前にすでに魔道省CSS庁で仕様が公開されていたというんだから、驚きだ。
属性値を変数のように扱う関数
まず、attr()はCSS神聖魔法の関数だ。役割は、HTMLエレメンツに記載されている属性値を取得し、CSS疑似属性のcontentプロパティ値で使用すること。

とはいっても最初の勧告は1998年なのでほぼWEBの歴史そのものを歩んできたCSS関数といえる。そんな長い歴史をもつ関数なので、前回の報告書にならい3つの時代に分けて解説したいと思う。

古代魔法attr()関数の歩み

第一期：attr()関数の勧告（1998～2013）
attr()関数が初めて公開された年。この時代はまだHTML4術式の時代。まだdata属性術式は存在してなかった。
HTML属性の値＝単なる文字列（href、title、alt、srcといった原始的な属性の文字列）としてCSSに渡すことしか考慮されていなかった。
CSS側でも疑似要素（::before, ::after）のcontentプロパティで表示させることのみの機能だった。
第二期：data属性の登場（2014~2023）
2014年にHTML5が登場し、初めてdata属性術式が実装された。この自在に属性を生成できる機能の登場により、一気に変数術式のような扱いが可能になった。data-test=”脚注だよ”が可能になったわけだ。

つまりそれまで”href、title、alt、src”といった原始的なHTML属性の文字列だけだったのが、文字列であれば自由にCSSへ渡せるようになったのだから一回目の革命といえる。
ただし、それでもCSSで利用できるのは疑似要素のcontentプロパティのみだったのは変わらない。
第三期：型指定付き attr()（Typed attr()）への進化（2024～現代）
2024年のCSS4（通称・正式名称はCSS Values and Units Module Level 4）で策定が進み、型指定付き attr()（Typed attr()）へ仕様が進化。
HTMLから取得できるデータが、これまでの文字列のみから数値を含むあらゆるプロパティ値となった。
CSS側での使用も、これまでの疑似要素のcontentプロパティだけでなくほぼすべてのプロパティで利用できるようになった。
これが二回目の革命といえる。
ただし、注意点も。
この最新仕様が実装されているブラウザ魔法具はまだ、Googleギルドのクロミウムやマイクロギルド魔道商会の英知など一部のみ。
Firefoxium、Safariumでは現在まだ未対応。なので扱いには注意が必要だ。

第二期
attr()
実践

第二期attr()関数の実践とデモ

まずは2014年代のattr()関数・第二期の性能を見てみよう。
data属性をHTMLから取得し疑似属性のcontentプロパティで利用するというのが大きな流れ。
使い道としては脚注などがピッタリと思われる。

そのためデモは脚注を表示する術式となっている。
attr()関数を使わない脚注と使った脚注を比較し、attr()関数の特性・優秀さを解説する。

では、まずはattr()関数を使わない脚注のデモから。

脚注のサンプル　疑似属性を必要な数だけ作成するデモ：https://labo.studio-happyvalley.com/zindex/noattr/

解説

まずはattr()関数を使わない脚注のデモの解説。
マウスを下線付きの青色文字(クラス.simplenote)に重ねると脚注が表示される。このパレット部分はbefore疑似要素で作る。

<!-- HTML -->
<span class="simplenote cnt1">革命</span>

<!-- CSS -->
.simplenote:hover{
	&::before/* 脚注のパレット */
	{
		content :'';
		position: absolute;
		left: var(--popup-left, 0);
		right: var(--popup-right, auto);
		left: 50%;
		bottom: 2rem;
		z-index: 5;
.....｝｝

重要なのはcontentプロパティを空にしておくこと。
実際に表示したい内容は個別にクラスを設定し、その疑似属性のcontentプロパティに設定する。
つまり脚注の数だけクラスと疑似属性を作る必要があるわけだ。

&.cnt1:hover:before{ content :'まあ、ChatGPT以降がほぼ革命といってもいいんですが';}
&.cnt2:hover:before{ content :'厳密にはCSS Selectors Level 4 仕様以降のCSS、いわゆるモダンCSSということなんだけど…。';}
&.cnt3:hover:before{ content :'そもそも子要素が親要素を制御できる事がもはや革命なんですが。';}
&.cnt4:hover:before{ content :'『ハピバリアント / HapyVariant』は、 この世界ハッピィバリーのパラレルワールド。魔法が存在する。';}

attr()を使って一個のスタイルだけで変数のように使うデモ
attr()を使って一個のスタイルだけで変数のように使うデモ：https://labo.studio-happyvalley.com/attr/flexible/

解説

attr()関数はHTMLのdata属性を読み込める。なので下記のように脚注に表示したい内容を記述する。

<!-- HTML -->
<span data-text="まあ、ChatGPT以降がほぼ革命といってもいいんですが" class="simplenote">革命</span>

<!-- CSS -->
.simplenote:hover{
	&::before/* 脚注のパレット */
	{
		content :attr(data-text);
		position: absolute;
		left: var(--popup-left, 0);
		right: var(--popup-right, auto);
		left: 50%;
		bottom: 2rem;
		z-index: 5;
.....}

content :attr(data-text);これでHTMLのデータ属性を読み込みそのまま表示できる。
つまり、attr()関数を使わないデモでは幾つもクラスを作り、疑似要素を同じ数だけ作る必要があったのが、attr()関数を使うとたった一つのスタイル設計だけで済んだことになる。
非常に身軽なスタイル設計というわけだ。

身軽なのはコーディングだけではない

CSSが一個で済むということも素晴らしいが、真価はCSSにデータを分散させなくて済むということ。
ここで重要なのは、たった一つのCSS設計で済むので身軽・軽快。というだけではない。
もっと重要なのはafter疑似属性などのCSSにHTML文書の情報を分散しなくてもよくなったということ。分離してないので、追加で脚注を増やす必要がある場合も、HTMLを修正するだけで済んでしまう。
HTMLで一元管理できることが最も大事。
CSSにはこれを記述、HTMLにはあれを・・・と、あれこれ気にせずシンプルに身軽に設計できるというわけだ。
この考え方はCMS術式や珈琲魔道術式とも非常に相性がいい。

この概念がすでに2010年代に実装されていたということも驚き。（というよりたまたま時流に乗せられたようにも見受けられる・・・私も気を付けないと）
そこで疑問になるのは、なぜ普及しなかったのか、ということ。

封印の
理由を
考察

なぜ革命的な古代魔法attr()は20年近くもの長い眠りについていたのか

実は普及しているという話も・・・。
まず、前提として、ホントに普及しなかったのか？ここはちょっと異論があるようだ。ただ、これまで私が知らないということは、いわゆる『知ってる人は知ってる』っていう位置づけと思われる。
とまあこれじゃあ封印の原因究明にならないのでもちょっと真面目に。
attr()関数が『一般的に』普及しなかった理由だが、前章でも紹介した3期に分割した時代で考えると理解しやすいように思う。

第一期では、ref、title、alt、srcといった原始的な属性の文字列のみを、疑似要素のcontentプロパティで流用できるだけの単純な機能だった。しかも、このcontentプロパティ、使い勝手が悪すぎるのも問題だった。
そのため、紙に刻印するとか、魔道学術論文のプロパティ表示など一部の学術系魔導士のみの限定的な使用に限られた。
ようするに一般的な魔導士にとってはほぼ使い道がなかったということ。

第二期に入ってdata属性が使えるようになった。
```

<div data-string=”わお！文字だったら何でも送れるぞ”>


content: attr(data-string);
```
とはいうものの、CSSでの利用はcontentプロパティに限定されていた。
contentプロパティの使い勝手の悪さも改善されなかった。

しかも当時はすでにJQuery術式などがかなり普及していて、普通の魔導士でもJQuery術式などを使えば、テキストだけじゃなく、他のスタイルも操作できてしまった。
JSで一括してデータを扱えるのに、あえて、attr()関数を使って、それもテキストだけを操作する意味がなかった。
そもそも、管理が複数個所に増えて逆に不便になる。つまりメリットを感じられず、使い道がないと判断された。

以上のいくつかの理由で長い眠りについたというわけだ

ふーっ、私もちょっと長い眠り・・じゃない休憩させてもらうよ。
次はいよいよ拡張版の解説、聖遺物の本番。諸君も紅茶でも飲みながらご覧いただきたい。

拡張版
attr()

拡張版
attr()
実践

覚醒したattr()関数の実践

拡張版attr()のデモ（firefox,safari非対応）
さて、それでは拡張版attr()関数のデモをご覧にいれよう。
ただし、繰り返しになるが、Firefox、Safariではまだ未対応なので確認はGoogleクロムでお願いする。

拡張版attr()のデモ（firefox,safari非対応）：https://labo.studio-happyvalley.com/attr/advanced/
解説
このデモでやりたいことは、それぞれのem要素の透明度を変更したい。
やり方は、em要素それぞれの透明度をdata属性に記載しそれを読み込みCSSのopacityプロパティに設定する。
こういう場合、通常は透明度が10段階あるとすると、クラスも10個必要だが、それを一個のみで身軽にスタイルを設定しようというデモ。

・HTMLでは個別に透明度を数値で指定する
・CSSではattr()関数で読み込み、型指定しそのまま透明度のプロパティ値とする。

こうすることで一つのスタイル設計ですべてのcolorBoxの個別の透明度を設定することができる。
```

<em class="colorBox" data-op=.1>data-op=.1</em>
<em class="colorBox" data-op=.3>data-op=.3</em>
<em class="colorBox" data-op=.5>data-op=.5</em>
<em class="colorBox" sdata-op=1>data-op=1</em>


em.colorBox{
	padding: 2px 4px;
	color: #fff;
	background: #a00;
	opacity: attr(data-op type(<number>), 1);
}
```
身軽なスタイル設計
クラスで設定する場合、それぞれ透明度に合わせてクラスを作る必要があるが、拡張版attr()関数を使えば、CSSは一つだけで簡潔に身軽にスタイルを設定できることがわかる。
面倒なようでも型を指定する方が正確な設計が可能になる
デモを通してみると、常に明示的に型を指定する方が混乱がなく簡潔で無駄がないということがわかる。
それに何も指定しない場合は単純なテキストとして読み込まれるのでうっかり書き忘れてもそれほど大きな不具合になることは少ない。
なるほどよく納得である。
取得したテキスト、型付データの利用先
シンプルな文字列の利用先は content プロパティであり、実質的には ::before、::after、::marker などの生成コンテンツが中心となる。
::markerはあんまり使い道がないので、現状、二つだけとなる。
もっとbefore、afterのほかにも疑似要素が欲しい気もする。たとえば、::mid(1), ::mid(2)~とかあると便利そうなんだがなあ。
一方、拡張された attr() の真価は <number> や <length>、<color> などのデータ値を、型付きで他のCSSプロパティへ受け渡せるようになった点にある。

柔軟な設計思想

型指定の方法は柔軟
例えばこういう書き方もできる。

attr(data-size type(<length> | <percentage>)

これは長さかパーセントのどちらかで指定しろって意味。
つまりHTMLには下記のように書く。

・長さ
<div data-size="60px"></div>
あるいは
・パーセント
<div data-percentage="60%"></div>

逆に<div data-size="60"></div>とするとエラーになる。
数値だけで指定したい場合はattr()の方を下記の様に書く必要がある。

attr(data-size px)
attr(data-percentage %)

どちらの方法を使うかはWEBサイトをJS、CMSなど作る方法に合わせて選ぶのがいいかもしれない。
初期値も設定できる
さらに初期値も設定できる。

font-size: attr(data-fz px, 14px);
JSの let font-size= data-size || 14; みたいなものだね。
まさにかゆいとこに手が届く設計。
HTMLはデータ、CSSはスタイルの設定という役割分担
拡張されたattr() 関数の調査を終えて思うのは、これまでの『スタイル固定値をCSS魔導書へ刻印する』時代から、『スタイルの設計はCSS神聖魔法、スタイルの値はHTMLエレメンツから読み込む』という、CSS、HTMLの役割分担をより精密・明確にする時代へ変化しているという事。
これは設計思想の進化ともいえる。

何か既視感が・・・・。HTML4時代に逆戻り？

つぎつぎにプロパティ値をHTMLに記述していくと、それはまるで30年前のWEB。
さて、attr()関数でCSSのプロパティ値を何でも読みこめるぞ！っと何も考えずにHTMLにスタイルのプロパティ値を追加していくと、
```

 <div data-color="red" data-fz=14   data-padding="20" data-margin="30"  data-width="300"  data-height="150" .....></div>
```

のようになんでもかんでもHTMLに記述してしまうことにもなりそうだ。
でも、ちょっと待て、これってなんか、遠い昔のデジャブ―のような
ほらこれ！

<!-- HTML -->
<p align="center">
  <font color="red" size="+1">なんかどっかでみたコード</font><br>
  文字の大きさを変えるには <font size="-1">小さく</font> や <font size="+2">大きく</font> 
</p>

まさに30年前のコーディング？、まるでHTML原始時代に戻ったかのようなコードになってしまう。爆！

もちろん、これはattr()関数の進むべき道ではない。
どの属性がattr()に最適で、どの属性が不適切か、見極めないとこんなダークワールドにはまってしまう。
せっかくの革新的な機能なんだから、より身軽で賢い使い方を考えたい。

真価を
極める

attr()関数が真価を発揮する属性値の一覧

attr()関数に最適な属性値をまとめてみた
attr()で読み込むために単純にプロパティ値を書き綴るのはせっかくの機能がもったいない。
いくら身軽とはいっても、あれもこれも着込んでいったら、他部署の連中と一緒だからね

そこでこの機能にふさわしいと思われる属性値の一覧をまとめた。
賢い使い方、最適な使い方を探っていこう。
特に相性が良いのは
商品価格
色番号
アイコン番号
評価（★★★★★）
アニメーション時間：遅延時間など
横幅・高さ：アスペクト比なども含む
透明度
Gridのspan数：個別に指定する必要がある

など、「HTMLが元々持っている情報」を活かすこと、それを上手く活用するスタイル設計が賢い使い方に繋がる。
それでも万能ではない
もちろん、万能の魔法ではない。
JavaScriptがリアルタイムに何百回も値を書き換えるようなサイトでは、JSON魔道書式を利用する方が多分便利だと思う。CMS術式でデータを更新する方法がJSON魔道書式ではなく、HTMLの場合は便利かもしれない。ケースバイケースかな？
ちなみにこのサイトは初期表示以外の更新データはJSON魔道書式で読み込んで更新している。
attr()術式はこれから徐々に使い道を模索していこうと思う。

強力な魔法だからこそ、使いどころを見極めることも魔導士の腕。
というかその前に、そもそも、Firefox、safariではまだ拡張版attr()に対応していないため、CSS変数を利用したフォールバックが重要になる。

ふーっ。いよいよフォールバックまで来た。
紅茶のお変わりは十分かな？
この報告書もあと少しだから、もうしばらくお付き合いいただくよ。

非対応
ブラウザ
対策

非対応のブラウザ魔法具でも同じコンセプトのスタイル術式を実現する

CSS変数術式を利用すると、ほぼ同等の使い勝手が可能
firefoxなどはattr()には対応していないが、CSS変数には対応している。これを使うと同等以上の機能を利用できる。
firefoxでも利用可能な方法
CSS変数を使うことで、単一のスタイル設計だけでHTML要素の属性を利用することが可能だ。
下記はCSS変数を利用し、同じことを実装したデモ

単一のスタイル設計で個々のHTML要素の属性を読み込むCSS変数のデモ：https://labo.studio-happyvalley.com/attr/variable/
解説
attr()関数は使わない。代わりにCSS変数を使う。
ちょっと奇妙にみえるが、--color-opがCSS変数。ここに透明度を設定。あとでcalc()関数で1/10に演算するので数値のみをいれる。
ちなみに演算できるのもCSS変数の強み。
```

  <em class="colorBox" style="--color-op:1">test</em>
  <em class="colorBox" style="--color-op:3">test3</em>
  <em class="colorBox" style="--color-op:5">test5</em>
  <em class="colorBox" style="--color-op:10">test10</em>
```
CSSは一行のみ。CSS変数--color-opで取得した数値を1/10にする。
```

em.colorBox{
	opacity: calc(var(--color-op)*0.1);
}
```
こうすることでattr()関数を使わなくとも、まったく同じことが可能になる。

ブラウザの対応別振り分け方法

将来のバージョンアップを見越した対応をする。
対応していないブラウザに対しては代替手段で記述できても、そのうち対応するかもしれない、その場合、また、修正する必要がでてくる。
そいうことを見越してattr()関数に対応しているかいないかで処理を判別するような振り分け方法をとる。

現在未対応でも、将来対応してくる事を見越した振り分けデモ：https://labo.studio-happyvalley.com/attr/supports/
解説
振り分けるCSSは下記。
対応していればattr()関数向けの記述を、いなければCSS変数を使った方法を記述する。

※わかりやすい様に、attr()に対応していないfirefoxでは上が一番濃く段々薄くなる。
　対応しているgoogleクロムでは逆に上が一番薄く段々濃くなる。

これで将来firefoxが対応しても修正する必要がなくなる。
```


@supports (x: attr(x type(*))) {
  /* ブラウザ－は現行の attr() に対応している */
  #textBox{
    em.colorBox{
      opacity: attr(data-op type(<number>), 1);
    }
  }
}

@supports not (x: attr(x type(*))) {
  /* ブラウザーは現行の attr() に対応していない */
  #textBox{
    em.colorBox{
      opacity: calc(var(--color-op)*0.1);
    }
  }
}
```

HTMLは2種類の方法を記述するので、ちょっと面倒だが、10文字程度なので許容範囲。

<!-- HTML -->
<em class="colorBox" style="--color-op:10" data-op=.1>test</em>
<em class="colorBox" style="--color-op:5" data-op=.3>test3</em>
<em class="colorBox" style="--color-op:3" data-op=.5>test5</em>
<em class="colorBox" style="--color-op:1" sdata-op=1>test10</em>

attr()を
使う
メリット

CSS変数でも全く同じことが可能ということがわかった、それでもattr()関数を使うメリットは？

まさに「スタイル制御」という目的だけならCSS変数が完全に上位互換。
style="--color-op: 1" のようにインラインCSS変数を使えば、数値の計算も自由自在だし、どのプロパティにも効く。
それでもなお CSS変数には真似できない attr() だけのメリット を絞り出すと、次の4つが挙げられる。
1. 「セマンティック（文脈）なHTML属性」をそのままデザインに転用できる
CSS変数は「デザインのためのデータ」だが、HTMLには「文書構造や意味としてのデータ」が最初から存在する。
attr() はそれらを二重管理せずにデザインへ流用できる。
つまり、CSS変数だと style="--step: 3; --total: 5" を別途書く必要があるが、attr() なら「既存のHTML属性」をそのままデザインのソースにできる。
2. CMSやMarkdownなどの「HTML生成制限」を回避できる
WordPressの標準エディタやMarkdown、外部のWeb APIから生成されるHTMLなど、「style="..." 属性の直接記述がセキュリティ上禁止（あるいは自動削除）されている環境」はよくある。

CSS変数の場合: style="--op: 1" を差し込もうとしても、サニタイズ（自動除去）されて消えてしまうことがある。
attr() の場合: data-op="1" や title="注釈" のような通常のHTML属性であれば削除されにくく、安全にCSSへ渡せる。
3. JavaScript側の記述が圧倒的にシンプル（データ操作の分離）
JavaScriptでHTML要素の属性を変更する際、dataset を操作する方が他の方法よりコードが素直になり、
「JSは状態（HTML属性）だけを管理し、CSSがそれを読み取って表示を担う」という役割分担が自然にできる。
4. 拡張版 attr() が普及した将来の「短縮表記（コードの簡潔さ）」
近年ブラウザ対応が進んでいる拡張版 attr() が完全に普及すると、型指定が存在するおかげで、数値と単位の変換が直感的に書け、より「人間が読みやすいコード」になる。
```



<div style="--w: 200;"></div>
<style>
.box { width: calc(var(--w) * 1px); }
</style>


<div data-width="200"></div>
<style>
.box { width: attr(data-width px); }
</style>
```

attr()関数のメリット

CSS変数が最適なケース:
数値の計算（calc）、カラーコードの制御、動的なスタイル調整全般（圧倒的にCSS変数が有利）。
attr() が最適なケース:
「すでにHTMLが持っている属性値（href / title / data属性）をそのままテキスト表示したい時」や、「style 属性が書けない制約がある環境」。

途中の章でも話したが、今後はサイトの仕組みや使っている言語、目的によって使い分けるという事になりそうだ。
選択肢が増えるのは、サイト制作の楽しみも増えることになる。
非対応ブラウザ魔道具の完全普及が望まれる。

発掘
調査報告

WEBの歩みと共に進化してきたCSS神聖魔法

策定当初はlevelの低い術式であったattr()関数が時代の進歩とともに驚異のレベルアップを果たし、ついには革命的な術式にまで上り詰めた
今回発掘されたattr()は、決して新しい魔法ではない。
二十年以上前から存在しながら、誰にも使いこなされなかった古代魔法。（異論はありそうだが）

しかし長い年月を経て、型という術式を得たことと対応するギルドの魔法具のおかげで、ようやく本来の姿を現した。
古代の聖櫃に埋もれていた術式が、現代のブラウザ魔法具で再び発動できるようになったわけだ。
今後の未対応魔法具の実装が進み、完全普及となるのが待ち遠しい。

『古代WEB魔法覚醒プロジェクト』の目的は、こうした「忘れられた術式」と「最新仕様」を一本の線で結び直すことにある。
attr()関数は、その象徴と言ってもよい魔法かもしれない。

やったーっ。おわったぞー。
調査を終えて
単なる「脚注用の地味な古代魔法」だと思って発掘調査を始めたのだが、蓋を開けてみれば現代のコンポーネント術式やCSS神聖魔法体系の根底を揺るがすほどの潜在能力。それと解積項目の増大。比例して私の睡眠時間の縮小。
過去に戻れる召喚術さえあれば、あの時の自分に教えてやるんだが....。

あまりの作業の多さに、私の召喚精霊も魔素切れを起こしそうだ（あと純粋に眠い）。ふーっ、そんなわけで今回の調査報告は以上だ。 1998年に蒔かれた種が、2020年代の「CSS革命」の中でどう芽吹いたか……古代のWeb魔導士の知恵にはいつも驚かされる。

さて、次回はさらに怪しい第一次遺跡の聖遺物解析か、はたまた現代神聖魔法の闇を照らすか。
それでは、良き魔道ライフを！