From ef11c972fb144ac7a9cbe756769f49e36a3f48ea Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 16 Dec 2021 23:59:46 +0900 Subject: @counter-style 以下を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@counter-style/index.html | 168 ----------------------------- 1 file changed, 168 deletions(-) delete mode 100644 files/ja/web/css/@counter-style/index.html (limited to 'files/ja/web/css/@counter-style/index.html') diff --git a/files/ja/web/css/@counter-style/index.html b/files/ja/web/css/@counter-style/index.html deleted file mode 100644 index 7ccf513fda..0000000000 --- a/files/ja/web/css/@counter-style/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: '@counter-style' -slug: Web/CSS/@counter-style -tags: - - At-rule - - CSS - - CSS Counter - - CSS カウンター - - Reference - - counter -translation_of: Web/CSS/@counter-style ---- -

{{CSSRef}}

- -

@counter-style は CSS の @-規則で、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 @counter-style 規則はカウンターの値をどのように文字列表現に変換するかを定義します。

- -
@counter-style thumbs {
-  system: cyclic;
-  symbols: "\1F44D";
-  suffix: " ";
-}
-
-ul {
-  list-style: thumbs;
-}
- -

初期バージョンの CSS では、有用なカウンターのスタイルのセットを定義していました。しかし、年月が経つにつれて、あらかじめ定義されたセットに他のスタイルが追加され、世界中の記法のニーズを満たすにはこのシステムでは不十分になりました。 @counter-style @規則は、あらかじめ定義されたスタイルがニーズに合っていないときに独自のカウンタースタイルを定義できるようにすることで、この欠点を完全に解決します。

- -

構文

- -

記述子

- -

各 @counter-style は名前で識別され、記述子のセットを持ちます。

- -
-
{{cssxref("@counter-style/system", "system")}}
-
カウンターの整数値を文字列表現に変換するために使用するアルゴリズムを指定します。
-
- -
-
{{cssxref("@counter-style/negative", "negative")}}
-
値が負の数の時に、カウンター表現の前又は後に追加する記号を指定します。
-
- -
-
{{cssxref("@counter-style/prefix", "prefix")}}
-
マーカー表現の前に追加する記号を指定します。接頭辞は表現の最終段階で追加されるため、カウンターの最終的な表現では、負号の前に来ます。
-
- -
-
{{cssxref("@counter-style/suffix", "suffix")}}
-
prefix 記述子と同様に、マーカー表現に追加される記号を指定します。接尾辞はマーカー表現の後に来ます。
-
- -
-
{{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 規則では、文字の記号ではなく画像を使用しています。画像の値に記号を使用するのは現在のところ「リスクのある」機能で、実装されているブラウザーはありません。 - 
@counter-style winners-list {
-  system: fixed;
-  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
-  suffix: " ";
-}
-
-
- -
-
{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
-
symbols 記述子で指定された記号は、多くのアルゴリズムではマーカーを構築するために使用されますが、 'addaptive' などの一部のシステムではこの記述子の加算的タプルに依存します。それぞれの加算的タプルはカウンター記号と、非負の整数の重みによって成ります。加算的タプルは重みの降順で指定しなければなりません。
-
- -
-
{{cssxref("@counter-style/speak-as", "speak-as")}}
-
読み上げソフトのような音声シンセサイザーで、カウンタースタイルを読み上げる方法を記述します。例えば、マーカー記号の値はこの記述子の値に応じて、順序付きリストでは数値やアルファベットとして、順序なしリストでは合図として読み上げられることがあります。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

counter-style で記号を設定

- -
@counter-style circled-alpha {
-  system: fixed;
-  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
-  suffix: " ";
-}
- -

上記のカウンタースタイル規則は、このようにリストに適用されます。

- -
.items {
-  list-style: circled-alpha;
-}
-
- -

このようなリストを生み出します。

- -

Ⓐ One
- Ⓑ Two
- Ⓒ Three
- Ⓓ Four
- Ⓔ FIve
- ...
- ...
- Ⓨ Twenty Five
- Ⓩ Twenty Six
- 27 Twenty Seven
- 28 Twenty Eight
- 29 Twenty Nine
- 30 Thirty

- -

他の例はデモページをご覧ください。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状況備考
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.at-rules.counter-style")}}

- -

Quantum CSS のメモ

- - - -

関連情報

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