diff options
| -rw-r--r-- | files/ja/web/css/@counter-style/index.md | 235 |
1 files changed, 112 insertions, 123 deletions
diff --git a/files/ja/web/css/@counter-style/index.md b/files/ja/web/css/@counter-style/index.md index 7ccf513fda..9450a05df0 100644 --- a/files/ja/web/css/@counter-style/index.md +++ b/files/ja/web/css/@counter-style/index.md @@ -2,19 +2,20 @@ title: '@counter-style' slug: Web/CSS/@counter-style tags: - - At-rule + - アットルール - CSS - - CSS Counter - CSS カウンター - - Reference + - リファレンス - counter +browser-compat: css.at-rules.counter-style translation_of: Web/CSS/@counter-style --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>@counter-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 <code>@counter-style</code> 規則はカウンターの値をどのように文字列表現に変換するかを定義します。</p> +**`@counter-style`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 `@counter-style` ルールはカウンターの値をどのように文字列表現に変換するかを定義します。 -<pre class="brush: css no-line-numbers notranslate">@counter-style thumbs { +```css +@counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " "; @@ -22,147 +23,135 @@ translation_of: Web/CSS/@counter-style ul { list-style: thumbs; -}</pre> +} +``` -<p>初期バージョンの CSS では、有用なカウンターのスタイルのセットを定義していました。しかし、年月が経つにつれて、あらかじめ定義されたセットに他のスタイルが追加され、世界中の記法のニーズを満たすにはこのシステムでは不十分になりました。 <code>@counter-style</code> @規則は、あらかじめ定義されたスタイルがニーズに合っていないときに独自のカウンタースタイルを定義できるようにすることで、この欠点を完全に解決します。</p> +初期バージョンの CSS では、有用なカウンターのスタイルのセットを定義していました。しかし、年月が経つにつれて、あらかじめ定義されたセットに他のスタイルが追加され、世界中の記法のニーズを満たすにはこのシステムでは不十分になりました。 `@counter-style` アットルールは、あらかじめ定義されたスタイルがニーズに合っていないときに独自のカウンタースタイルを定義できるようにすることで、この欠点を完全に解決します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Descriptors" name="Descriptors">記述子</h3> +### 記述子 -<p>各 <code>@counter-style</code> は名前で識別され、記述子のセットを持ちます。</p> +それぞれの `@counter-style` は名前で識別され、記述子のセットを持ちます。 -<dl> - <dt>{{cssxref("@counter-style/system", "system")}}</dt> - <dd>カウンターの整数値を文字列表現に変換するために使用するアルゴリズムを指定します。</dd> -</dl> +- {{cssxref("@counter-style/system", "system")}} + - : カウンターの整数値を文字列表現に変換するために使用するアルゴリズムを指定します。 -<dl> - <dt>{{cssxref("@counter-style/negative", "negative")}}</dt> - <dd>値が負の数の時に、カウンター表現の前又は後に追加する記号を指定します。</dd> -</dl> +<!----> -<dl> - <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt> - <dd>マーカー表現の前に追加する記号を指定します。接頭辞は表現の最終段階で追加されるため、カウンターの最終的な表現では、負号の前に来ます。</dd> -</dl> +- {{cssxref("@counter-style/negative", "negative")}} + - : 値が負の数の時に、カウンター表現の前または後に追加する記号を指定します。 -<dl> - <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt> - <dd>prefix 記述子と同様に、マーカー表現に追加される記号を指定します。接尾辞はマーカー表現の後に来ます。</dd> -</dl> +<!----> -<dl> - <dt>{{cssxref("@counter-style/range", "range")}}</dt> - <dd>カウンタースタイルが適用される値の範囲を定義します。カウンタースタイルが範囲を外れたカウンター値を表現するために使用されると、カウンタースタイルにはフォールバックスタイルが代用されます。</dd> -</dl> +- {{cssxref("@counter-style/prefix", "prefix")}} + - : マーカー表現の前に追加する記号を指定します。接頭辞は表現の最終段階で追加されるため、カウンターの最終的な表現では、負号の前に来ます。 -<dl> - <dt>{{cssxref("@counter-style/pad", "pad")}}</dt> - <dd>マーカー表現に最少文字数を適用する必要がある場合に使用されます。例えば、カウンターが 01 から始まって 02、03、04 のように進む場合は、パッド文字が使用されます。指定されたパッド値よりも長い文字数の場合は、マーカーは通常通りに構築されます。</dd> -</dl> +<!----> -<dl> - <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt> - <dd>指定したシステムでカウンター値の表現を構築できない場合や、カウンター値が指定された範囲の外にあった場合に、代わりに使用されるシステムを指定します。指定されたフォールバックも値の表現に失敗した場合は、フォールバックスタイルのフォールバックがあれば、それが使用されます。フォールバックシステムが記述されていない場合や、フォールバックシステムのチェーンがカウンター値を表現できなかった場合は、最終的に decimal スタイルにフォールバックされます。</dd> -</dl> +- {{cssxref("@counter-style/suffix", "suffix")}} + - : prefix 記述子と同様に、マーカー表現に追加される記号を指定します。接尾辞はマーカー表現の後に来ます。 -<dl> - <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt> - <dd>マーカー表現に使用される記号を指定します。記号は文字列、画像、カスタム識別子を含むことができます。記号がマーカー表現を構築するためにどのように使用されるかは、 system 記述子で指定されたアルゴリズムによります。例えば、 system が fixed に指定されていた場合は、この記述子で N 個の記号が指定されていると、カウンターの最初の N 個の記号を表すために使用されます。記号のセットを使い切ると、リストの残りにはフォールバックスタイルが使用されます。<br> - <br> - 以下の <code>@counter-style</code> 規則では、文字の記号ではなく画像を使用しています。画像の値に記号を使用するのは現在のところ「リスクのある」機能で、実装されているブラウザーはありません。 - <pre class="brush: css notranslate">@counter-style winners-list { - system: fixed; - symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); - suffix: " "; -}</pre> - </dd> -</dl> +<!----> + +- {{cssxref("@counter-style/range", "range")}} + - : カウンタースタイルが適用される値の範囲を定義します。カウンタースタイルが範囲を外れたカウンター値を表現するために使用されると、カウンタースタイルは代替スタイルで代用されます。 + +<!----> + +- {{cssxref("@counter-style/pad", "pad")}} + - : マーカー表現に最小文字数を適用する必要がある場合に使用されます。例えば、カウンターが 01 から始まって 02、03、04 のように進む場合は、パッド文字が使用されます。指定されたパッド値よりも長い文字数の場合は、マーカーは通常通りに構築されます。 + +<!----> + +- {{cssxref("@counter-style/fallback", "fallback")}} + - : 指定したシステムでカウンター値の表現を構築できない場合や、カウンター値が指定された範囲の外にあった場合に、代わりに使用されるシステムを指定します。指定された代替スタイルも値の表現に失敗した場合は、代替スタイルの代替があれば、それが使用されます。代替システムが記述されていない場合や、代替システムのチェーンがカウンター値を表現できなかった場合は、最終的に decimal スタイルに代替されます。 + +<!----> + +- {{cssxref("@counter-style/symbols", "symbols")}} + + - : マーカー表現に使用される記号を指定します。記号は文字列、画像、カスタム識別子を含むことができます。記号がマーカー表現を構築するためにどのように使用されるかは、 system 記述子で指定されたアルゴリズムによります。例えば、 system が fixed に指定されていた場合は、この記述子で N 個の記号が指定されていると、カウンターの最初の N 個の記号を表すために使用されます。記号のセットを使い切ると、リストの残りには代替スタイルが使用されます。 + + 以下の `@counter-style` ルールでは、文字の記号ではなく画像を使用しています。記号に画像の値を使用するのは現在のところ「リスクのある」機能で、実装されているブラウザーはありません。 + + ```css + @counter-style winners-list { + system: fixed; + symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); + suffix: " "; + } + ``` + +<!----> -<dl> - <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt> - <dd>symbols 記述子で指定された記号は、多くのアルゴリズムではマーカーを構築するために使用されますが、 'addaptive' などの一部のシステムではこの記述子の<em>加算的タプル</em>に依存します。それぞれの加算的タプルはカウンター記号と、非負の整数の重みによって成ります。加算的タプルは重みの降順で指定しなければなりません。</dd> -</dl> +- {{cssxref("@counter-style/additive-symbols", "additive-symbols")}} + - : symbols 記述子で指定された記号は、多くのアルゴリズムではマーカーを構築するために使用されますが、 'addaptive' などの一部のシステムではこの記述子の*加算的タプル*に依存します。それぞれの加算的タプルはカウンター記号と、非負の整数の重みによって成ります。加算的タプルは重みの降順で指定しなければなりません。 -<dl> - <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt> - <dd>読み上げソフトのような音声シンセサイザーで、カウンタースタイルを読み上げる方法を記述します。例えば、マーカー記号の値はこの記述子の値に応じて、順序付きリストでは数値やアルファベットとして、順序なしリストでは合図として読み上げられることがあります。</dd> -</dl> +<!----> -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +- {{cssxref("@counter-style/speak-as", "speak-as")}} + - : 読み上げソフトのような音声合成で、カウンタースタイルを読み上げる方法を記述します。例えば、マーカー記号の値はこの記述子の値に応じて、順序付きリストでは数値やアルファベットとして、順序なしリストでは合図として読み上げられることがあります。 + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Specifying_symbols_with_counter-style" name="Specifying_symbols_with_counter-style">counter-style で記号を設定</h3> +### counter-style で記号を設定 -<pre class="brush: css notranslate">@counter-style circled-alpha { +```css +@counter-style circled-alpha { system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; suffix: " "; -}</pre> +} +``` -<p>上記のカウンタースタイル規則は、このようにリストに適用されます。</p> +上記のカウンタースタイルルールは、このようにリストに適用されます。 -<pre class="brush: css notranslate">.items { +```css +.items { list-style: circled-alpha; } -</pre> - -<p>このようなリストを生み出します。</p> - -<p>Ⓐ One<br> - Ⓑ Two<br> - Ⓒ Three<br> - Ⓓ Four<br> - Ⓔ FIve<br> - ...<br> - ...<br> - Ⓨ Twenty Five<br> - Ⓩ Twenty Six<br> - 27 Twenty Seven<br> - 28 Twenty Eight<br> - 29 Twenty Nine<br> - 30 Thirty</p> - -<p>他の例は<a href="https://mdn.github.io/css-examples/counter-style-demo/">デモページ</a>をご覧ください。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状況</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td> - <td>{{Spec2('CSS3 Counter Styles')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.counter-style")}}</p> - -<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3> - -<ul> - <li>Gecko は <code>@counter-style</code> の <code>system</code> および <code>fallback</code> 記述子の値として <code>none</code> を許容していましたが、これは仕様書が無効な @ 規則として扱うべきとしています。 Firefox の新しいパラレル CSS エンジン (<a class="external external-icon" href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリース済み) ではこれを修正されました ({{bug(1377414)}})。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}, {{Cssxref("list-style-type")}}</li> - <li>無名のカウンタースタイルを作成する関数表記である {{cssxref("symbols", "symbols()")}}</li> - <li>CSS の {{Cssxref("counter")}} および {{Cssxref("counters")}} 関数</li> - <li><a href="https://mdn.github.io/css-examples/counter-style-demo/">カウンタースタイルのデモ</a> (<a href="https://github.com/mdn/css-examples/tree/master/counter-style-demo">コード</a>)</li> -</ul> +``` + +このようなリストを生み出します。 + +Ⓐ One +Ⓑ Two +Ⓒ Three +Ⓓ Four +Ⓔ FIve +... +... +Ⓨ Twenty Five +Ⓩ Twenty Six +27 Twenty Seven +28 Twenty Eight +29 Twenty Nine +30 Thirty + +他の例は[デモページ](https://mdn.github.io/css-examples/counter-style-demo/)をご覧ください。 + +### 既成のカウンタースタイル + +100 以上の `counter-style` のコードスニペットを集めた [Ready-made Counter Styles](https://www.w3.org/TR/predefined-counter-styles/) の文書をご覧ください。この文書では、世界中の言語と文化のニーズを満たすカウンタースタイルを提供しています。 + +[カウンタースタイル変換ツール](https://r12a.github.io/app-counters/) は、このリストから、カウンタースタイルのコピー＆ペーストコードをテストし、作成するために使用されます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}, {{Cssxref("list-style-type")}} +- 無名のカウンタースタイルを作成する関数表記である {{cssxref("symbols()", "symbols()")}} +- CSS の {{Cssxref("counter()")}} および {{Cssxref("counters()")}} 関数 +- [カウンタースタイルのデモ](https://mdn.github.io/css-examples/counter-style-demo/) ([コード](https://github.com/mdn/css-examples/tree/master/counter-style-demo)) |