From 35918176145e2f9de541ac623706cd3ced71612d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 17:30:52 +0900 Subject: CSS Values and Units の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/19 時点の英語版に同期 --- files/ja/web/css/attr()/index.md | 385 ++++++++++++++++++--------------------- 1 file changed, 175 insertions(+), 210 deletions(-) (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 index 28b71d18aa..e9f97a85f2 100644 --- a/files/ja/web/css/attr()/index.md +++ b/files/ja/web/css/attr()/index.md @@ -4,19 +4,22 @@ slug: Web/CSS/attr() tags: - CSS - CSS 関数 - - Reference - - Web - - attr + - 関数 - レイアウト + - リファレンス + - ウェブ + - attr +browser-compat: css.types.attr translation_of: Web/CSS/attr() --- -
{{CSSRef}}
+{{CSSRef}} -
メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。
+> **Note:** `attr()` 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。 -

attr() は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。

+**`attr()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。 -
/* Simple usage */
+```css
+/* 単純な使用法 */
 attr(data-count);
 attr(title);
 
@@ -30,226 +33,188 @@ 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> で定義された既定値を使います。
-
- -

形式文法

+``` + +## 構文 + +### 値 + +- `attribute-name` + - : CSS で参照する、 HTML 要素の属性名です。 +- `` {{Experimental_Inline}} + + - : 属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を `` で与えると、 `attr()` 式も無効になります。省略すると既定値の `string` になります。有効な値は以下の通りです。 + + - `string` + + - : 属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。 + + 既定値は空文字列です。 + + - `color` {{Experimental_Inline}} + + - : 属性値はハッシュ (3 値または 6 値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。前後の空白は除去されます。 + + 既定値は `currentcolor` です。 + + - `url` {{Experimental_Inline}} + + - : 属性値は、 CSS の `url()` 関数の中で使用される文字列として解析されます。 + 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。 + 前後の空白は除去されます。 + + 既定値は、一般的なエラーの状況で存在しない文書を指す `about:invalid` の URL です。 + + - `integer` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `number` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `length` {{Experimental_Inline}} + + - : 属性値は 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}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `angle` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (`30.5deg` など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `deg`, `grad`, `rad` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `time` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `s`, `ms` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `frequency` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + + 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `Hz`, `kHz` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `%` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が長さの場合は、 `attr()` は絶対的な値に変換して計算します。 + 前後の空白は除去されます。 + + 既定値は `0%`、または `0%` が妥当な値ではないプロパティでは、プロパティの最小値です。 + +- `` {{Experimental_Inline}} + - : 関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 `` で定義された既定値を使います。 + +### 形式文法 {{CSSSyntax}} -

例

+## 例 -

content プロパティ

+

content プロパティ

-

HTML

+#### HTML -
<p data-foo="hello">world</p>
+```html +

world

+``` -

CSS

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

結果

+#### 結果 -

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

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

<color> 値

+

<color> 値

-

{{SeeCompatTable}}

+{{SeeCompatTable}} -
-

HTML

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

CSS

+#### CSS - +```css hidden +.background { + height: 100vh; +} +``` -
.background {
-  background-color: red;
+```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")}}

- -

関連情報

- - + background-color: attr(data-background color, red); +} +``` + +#### 結果 + +{{EmbedLiveSample("color_value", "100%", 50)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) +- [HTML `data-*` 属性](/ja/docs/Web/HTML/Global_attributes/data-*) +- [SVG `data-*` 属性](/ja/docs/Web/SVG/Attribute/data-*) -- cgit v1.2.3-54-g00ecf