From d7dbc87c2223828bfc8f5b93c838c2bcf8453ac7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 23:23:42 +0900 Subject: Web/CSS/var() を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/var()/index.html | 100 -------------------------------------- files/ja/web/css/var()/index.md | 100 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+), 100 deletions(-) delete mode 100644 files/ja/web/css/var()/index.html create mode 100644 files/ja/web/css/var()/index.md diff --git a/files/ja/web/css/var()/index.html b/files/ja/web/css/var()/index.html deleted file mode 100644 index 577e96a860..0000000000 --- a/files/ja/web/css/var()/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS カスタムプロパティ - - CSS 変数 - - CSS 関数 - - Experimental - - Reference - - var - - var() - - 変数 -translation_of: Web/CSS/var() ---- -
{{CSSRef}}
- -

CSS の var() 関数は、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。

- -
{{EmbedInteractiveExample("pages/css/var.html")}}
- - - -

var() 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。)

- -

構文

- -

関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの2番目の引数は、フォールバック値として機能します。 最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。

- -{{csssyntax}} - -
-

メモ: フォールバックの構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば var(--foo, red, blue) では、 red, blue をフォールバックとして定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、フォールバック値と見なされます。

-
- -

値

- -
-
<custom-property-name>
-
カスタムプロパティの名前で、二つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。
-
<declaration-value>
-
カスタムプロパティのフォールバック値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり ), ], }, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。
-
- -

例

- -
:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
- -
/* フォールバック */
-/* コンポーネント内のスタイル: */
-.component .header {
-  color: var(--header-color, blue); /* header-color という変数は設定されていないため、フォールバック値である blue がセットされます */
-}
-
-.component .text {
-  color: var(--text-color, black);
-}
-
-/* より規模の大きなアプリケーションのスタイルでは */
-.component {
-  --text-color: #080;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.custom-property.var")}}

- -

関連情報

- - diff --git a/files/ja/web/css/var()/index.md b/files/ja/web/css/var()/index.md new file mode 100644 index 0000000000..577e96a860 --- /dev/null +++ b/files/ja/web/css/var()/index.md @@ -0,0 +1,100 @@ +--- +title: var() +slug: Web/CSS/var() +tags: + - CSS + - CSS カスタムプロパティ + - CSS 変数 + - CSS 関数 + - Experimental + - Reference + - var + - var() + - 変数 +translation_of: Web/CSS/var() +--- +
{{CSSRef}}
+ +

CSS の var() 関数は、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。

+ +
{{EmbedInteractiveExample("pages/css/var.html")}}
+ + + +

var() 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。)

+ +

構文

+ +

関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの2番目の引数は、フォールバック値として機能します。 最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。

+ +{{csssyntax}} + +
+

メモ: フォールバックの構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば var(--foo, red, blue) では、 red, blue をフォールバックとして定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、フォールバック値と見なされます。

+
+ +

値

+ +
+
<custom-property-name>
+
カスタムプロパティの名前で、二つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。
+
<declaration-value>
+
カスタムプロパティのフォールバック値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり ), ], }, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。
+
+ +

例

+ +
:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
+ +
/* フォールバック */
+/* コンポーネント内のスタイル: */
+.component .header {
+  color: var(--header-color, blue); /* header-color という変数は設定されていないため、フォールバック値である blue がセットされます */
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* より規模の大きなアプリケーションのスタイルでは */
+.component {
+  --text-color: #080;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.custom-property.var")}}

+ +

関連情報

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