diff options
| -rw-r--r-- | files/ja/web/css/--_star_/index.html | 93 |
1 files changed, 41 insertions, 52 deletions
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/--* --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary"><span class="seoSummary"><code>--example-name</code> のように、頭に <code>--</code> 接頭辞がつけられたプロパティは<em>カスタムプロパティ</em>を表し、 {{cssxref("var")}} 関数を使用して他の宣言の中で使用することができる値を持ちます。</span></p> +`--` の接頭辞が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。 -<p>カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。</p> +カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="syntaxbox">--somekeyword: left; +```css +--somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); -</pre> +``` -<dl> - <dt><code><declaration-value></code></dt> - <dd>シーケンスが許可されていないトークンを含んでいない限り、この値は 1 つ以上のトークンのシーケンスに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。</dd> -</dl> +- `<declaration-value>` + - : この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +> **Note:** カスタムプロパティ名は大文字・小文字の区別があります。 `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。 + +### 形式文法 {{CSSSyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +### HTM -<pre class="brush: html"><p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p> -<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p> -<div id="container"> - <p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p> -</div></pre> +```html +<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p> +<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p> +<div id="container"> + <p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p> +</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css highlight[2,3]">: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); } +``` -</pre> - -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample('Example', 500, 130)}}</p> +{{EmbedLiveSample('Example', 500, 130)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}</td> - <td>{{Spec2("CSS3 Variables")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.custom-property")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数の利用</a></li> -</ul> +- [CSS 変数の使用](/ja/docs/Web/CSS/Using_CSS_custom_properties) +- {{cssxref("var()")}} 関数 |