From e160f04ecb5945c3dcf028e9d836be665dbf0ddc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 20 Nov 2021 23:56:35 +0900 Subject: CSS Values and Units のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/attr()/index.md | 255 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 files/ja/web/css/attr()/index.md (limited to 'files/ja/web/css/attr()/index.md') diff --git a/files/ja/web/css/attr()/index.md b/files/ja/web/css/attr()/index.md new file mode 100644 index 0000000000..28b71d18aa --- /dev/null +++ b/files/ja/web/css/attr()/index.md @@ -0,0 +1,255 @@ +--- +title: attr() +slug: Web/CSS/attr() +tags: + - CSS + - CSS 関数 + - Reference + - Web + - attr + - レイアウト +translation_of: Web/CSS/attr() +--- +
{{CSSRef}}
+ +
メモ: 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
+
CSS で参照する、 HTML 要素の属性名です。
+
<type-or-unit> {{Experimental_Inline}}
+
属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を <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}}
+
関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 <type-or-unit> で定義された既定値を使います。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

content プロパティ

+ +

HTML

+ +
<p data-foo="hello">world</p>
+ +

CSS

+ +
[data-foo]::before {
+  content: attr(data-foo) " ";
+}
+ +

結果

+ +

{{EmbedLiveSample("content_property", "100%", 50)}}

+ +

<color> 値

+ +

{{SeeCompatTable}}

+ +
+

HTML

+ +
<div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div>
+ +

CSS

+ + + +
.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 つのオプション引数を追加
+ 全プロパティで使用可能
+ {{CSSxRef("<string>")}} 以外の値が返せるようになった。

+ これらの変更は実験的であり、ブラウザーの互換性が少なすぎると CR 段階で外される可能性がある
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}{{CSSxRef("content")}} プロパティに限定
+ 常に {{CSSxRef("<string>")}} を返す
+ +

ブラウザーの互換性

+ +

{{Compat("css.types.attr")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf