From c159c68575e8f7440c98a35b9290f85021a1c9b2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 22 Dec 2021 00:58:47 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/--_star_/index.html | 93 ++++++++++++++++-------------------- 1 file changed, 41 insertions(+), 52 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/--_star_/index.html b/files/ja/web/css/--_star_/index.html index 166a08d175..1b8bcff3d6 100644 --- a/files/ja/web/css/--_star_/index.html +++ b/files/ja/web/css/--_star_/index.html @@ -4,48 +4,54 @@ slug: Web/CSS/--* tags: - CSS - CSS カスタムプロパティ - - Reference + - ガイド + - リファレンス +browser-compat: css.properties.custom-property translation_of: Web/CSS/--* --- -
{{CSSRef}}
+{{CSSRef}} -

--example-name のように、頭に -- 接頭辞がつけられたプロパティはカスタムプロパティを表し、 {{cssxref("var")}} 関数を使用して他の宣言の中で使用することができる値を持ちます。

+`--` の接頭辞が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。 -

カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。

+カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。 -

{{CSSInfo}}

+{{CSSInfo}} -

構文

+## 構文 -
--somekeyword: left;
+```css
+--somekeyword: left;
 --somecolor: #0000ff;
 --somecomplexvalue: 3px 6px rgb(20, 32, 54);
-
+``` -
-
<declaration-value>
-
シーケンスが許可されていないトークンを含んでいない限り、この値は 1 つ以上のトークンのシーケンスに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。
-
+- `` + - : この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。 -

形式文法

+> **Note:** カスタムプロパティ名は大文字・小文字の区別があります。 `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。 + +### 形式文法 {{CSSSyntax}} -

例

+## 例 -

HTML

+### HTM -
<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
-<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p>
-<div id="container">
-  <p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p>
-</div>
+```html +

この段落は青色の背景で黄色のテキストとなります。

+

この段落は黄色の背景で青色のテキストとなります。

+
+

この段落は緑色の背景で黄色のテキストとなります。

+
+``` -

CSS

+### CSS -
:root {
-  --first-color: #488cff;
-  --second-color: #ffff8c;
+```css
+:root {
+  --first-color: #16f;
+  --second-color: #ff7;
 }
 
 #firstParagraph {
@@ -59,45 +65,28 @@ translation_of: Web/CSS/--*
 }
 
 #container {
-  --first-color: #48ff32;
+  --first-color: #290;
 }
 
 #thirdParagraph {
   background-color: var(--first-color);
   color: var(--second-color);
 }
+```
 
-
- -

結果

+### 結果 -

{{EmbedLiveSample('Example', 500, 130)}}

+{{EmbedLiveSample('Example', 500, 130)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}{{Spec2("CSS3 Variables")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS 変数の使用](/ja/docs/Web/CSS/Using_CSS_custom_properties) +- {{cssxref("var()")}} 関数 -- cgit v1.2.3-54-g00ecf