--- title: attr() slug: Web/CSS/attr() tags: - CSS - CSS 関数 - Reference - Web - attr - レイアウト translation_of: Web/CSS/attr() ---
attr()
関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。attr()
は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。
/* Simple usage */ attr(data-count); attr(title); /* 型付き */ attr(src url); attr(data-count number); attr(data-width px); /* 代替値付き */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default");
attribute-name
<type-or-unit>
{{Experimental_Inline}}<type-or-unit>
で与えると、 attr()
式も無効になります。省略すると既定値の string
になります。有効な値は以下の通りです。
キーワード | 関係する型 | コメント | 既定値 |
---|---|---|---|
string |
{{CSSxRef("<string>")}} | 属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。 | 空文字列 |
color {{Experimental_Inline}} |
{{CSSxRef("<color>")}} | 属性値はハッシュ (3値または6値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。 前後の空白は除去されます。 |
currentcolor |
url {{Experimental_Inline}} |
{{CSSxRef("<url>")}} | 属性値は、 CSS の url() 関数の中で使用される文字列として解析されます。相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。 前後の空白は除去されます。 |
一般的なエラーの状況で存在しない文書を指す about:invalid の URL。 |
integer {{Experimental_Inline}} |
{{CSSxRef("<integer>")}} | 属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。 |
0 、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。 |
number {{Experimental_Inline}} |
{{CSSxRef("<number>")}} | 属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 前後の空白は除去されます。 |
0 、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。 |
length {{Experimental_Inline}} |
{{CSSxRef("<length>")}} | 属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (12.5em など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。前後の空白は除去されます。 |
0 、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。 |
em , ex , px , rem , vw , vh , vmin , vmax , mm , cm , in , pt , or pc {{Experimental_Inline}} |
{{CSSxRef("<length>")}} | 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。前後の空白は除去されます。 |
0 、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。 |
angle {{Experimental_Inline}} |
{{CSSxRef("<angle>")}} | 属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (30.5deg など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。前後の空白は除去されます。 |
0deg 、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。 |
deg , grad , rad {{Experimental_Inline}} |
{{CSSxRef("<angle>")}} | 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。前後の空白は除去されます。 |
0deg 、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。 |
time {{Experimental_Inline}} |
{{CSSxRef("<time>")}} | 属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。前後の空白は除去されます。 |
0s 、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。 |
s , ms {{Experimental_Inline}} |
{{CSSxRef("<time>")}} | 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。前後の空白は除去されます。 |
0s 、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。 |
frequency {{Experimental_Inline}} |
{{CSSxRef("<frequency>")}} | 属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 |
0Hz 、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。 |
Hz , kHz {{Experimental_Inline}} |
{{CSSxRef("<frequency>")}} | 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。前後の空白は除去されます。 |
0Hz 、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。 |
% {{Experimental_Inline}} |
{{CSSxRef("<percentage>")}} | 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。指定された値が長さの場合は、 attr() は絶対的な値に変換して計算します。前後の空白は除去されます。 |
0% 、または 0% が妥当な値ではないプロパティでは、プロパティの最小値。 |
<fallback>
{{Experimental_Inline}}<type-or-unit>
で定義された既定値を使います。<p data-foo="hello">world</p>
[data-foo]::before { content: attr(data-foo) " "; }
{{EmbedLiveSample("content_property", "100%", 50)}}
{{SeeCompatTable}}
<div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div>
.background { height: 100vh; }
.background { background-color: red; } .background[data-background] { background-color: attr(data-background color, red); }
{{EmbedLiveSample("color-value", "100%", 50)}}
仕様書 | 状態 | 備考 |
---|---|---|
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}} | {{Spec2("CSS4 Values")}} | {{CSSxRef("var()")}} のように動作するように変更。 attr() を含むプロパティ値は解析時に有効となり、属性値の検証は計算値になるまで延期されます。 |
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}} | {{Spec2("CSS3 Values")}} |
2 つのオプション引数を追加 |
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}} | {{Spec2("CSS2.1")}} | {{CSSxRef("content")}} プロパティに限定 常に {{CSSxRef("<string>")}} を返す |
{{Compat("css.types.attr")}}