From 9762c9cd89c5854c50871be39fb6d56b3f528a13 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 27 Jan 2022 10:19:08 +0900 Subject: 20220127-counter-reset --- files/ja/web/css/counter-reset/index.md | 108 +++++++++++++++++++------------- 1 file changed, 64 insertions(+), 44 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/counter-reset/index.md b/files/ja/web/css/counter-reset/index.md index 2d3aafeb68..0932b08fdd 100644 --- a/files/ja/web/css/counter-reset/index.md +++ b/files/ja/web/css/counter-reset/index.md @@ -3,33 +3,47 @@ title: counter-reset slug: Web/CSS/counter-reset tags: - CSS - - CSS プロパティ + - CSS カウンター - CSS リスト - - リファレンス + - CSS プロパティ + - recipe:css-property +browser-compat: css.properties.counter-reset translation_of: Web/CSS/counter-reset --- -
{{CSSRef}}
+{{CSSRef}} + +**`counter-reset`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 [CSS カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)を指定された値で初期化します。 +このプロパティは新しいカウンターや逆行カウンターを、指定された要素の指定された名前で生成します。 -CSS の **`counter-reset`** プロパティは、 CSS カウンターを、与えられた値に初期化します。 +通常のカウンターは、初期値が 0 になっています。 +逆行カウンターはカウントダウンのためのものであり、既定の初期値は現在のレベルでの要素の数に設定されます。 +既定の初期値により、 2 つの最も一般的な数値のパターン、 1 から要素の数までのカウントアップと、要素の数から 1 までのカウントダウンを簡単に実装することができます。 -
{{EmbedInteractiveExample("pages/css/counter-reset.html")}}
+カウンターの値は CSS の {{cssxref("counter-increment")}} プロパティを使用して増加または減少させ、既存のカウンターの値は {{cssxref("counter-set")}} を使用して設定することができます。 - +{{EmbedInteractiveExample("pages/css/counter-reset.html")}} -
-**メモ:** カウンターの値は CSS の {{cssxref("counter-increment")}} プロパティを使用して増加させたり減少させたりすることができます。 -
+独自に作成したカウンターに加え、このプロパティは（{{HTMLElement("ol")}} 要素で作成される）順序付きリストで使用される `list-item` カウンターもリセットすることができます。 +これらは独自に作成したカウンタと同じ動作をしますが、それぞれのリスト要素で自動的に 1 ずつ増加または減少する点が異なります。 +この動作は {{cssxref("counter-increment")}} で上書きすることができます。 ## 構文 -
/* "my-counter" を 0 に設定 */
+```css
+/* "my-counter" を 0 に設定 */
 counter-reset: my-counter;
 
 /* "my-counter" を -1 に設定 */
-counter-reset: my-counter -1;
+counter-reset: my-counter -3;
+
+/* 逆行の "my-counter" を counter1" を 1 に、 "counter2" を 4 に設定 */
+counter-reset: reversed(my-counter);
+
+/* 逆行の "my-counter" を -1 に設定 */
+counter-reset: reversed(my-counter) -1;
 
-/* "counter1" を 1 に、 "counter2" を 4 に設定 */
-counter-reset: counter1 1 counter2 4;
+/* counter2 を 9 に、逆行の "counter1" と "counter3" をそれぞれ 1 と 4 に設定*/
+counter-reset: reversed(counter1) 1 counter2 9 reversed(counter3) 4;
 
 /* より詳細度が低い規則による値の初期化をキャンセル */
 counter-reset: none;
@@ -37,14 +51,19 @@ counter-reset: none;
 /* グローバル値 */
 counter-reset: inherit;
 counter-reset: initial;
+counter-reset: revert;
 counter-reset: unset;
-
+``` `counter-reset` プロパティは、以下のうちの一つで指定します。 -- カウンターの名前を指定する `<custom-ident>` と、その後に任意で `<integer>`。名前又は名前と数値の組み合わせを空白で区切ることで、初期化させるカウンターを好きなだけ指定することができます。 +- `` または `reversed()` でカウンターに名前を付けます。 `` を続けることもできます。 + なお、 `reversed()` メソッドは「逆行」カウンターを生成するために使用することができます。 + 初期化するカウンターや逆行カウンターはいくつでも指定することができ、それぞれのカウンターとカウンター値の組は空白で区切ります。 - キーワード値 `none`。 +`list-item` という名前の「暗黙的な」カウンターを使用すると、 {{HTMLElement("ol")}} を使用して生成される順序付きリストの番号付けを制御に使用することができます。 + ### 値 - {{cssxref("custom-ident", "<custom-ident>")}} @@ -54,53 +73,54 @@ counter-reset: unset; - `none` - : カウンターの初期化は行われません。これはより詳細度の低い規則によって定義された `counter-reset` を上書きするために使用することができます。 +## 公式定義 + +{{cssinfo}} + ## 形式文法 {{csssyntax}} ## 例 -
h1 {
+以下の例はカウンターの初期化方法を紹介していますが、増加、減少、表示の方法は示していません。
+
+もっと完全な例は、 [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)を参照してください。
+
+### 名前付きカウンターの初期化
+
+```css
+h1 {
   counter-reset: chapter section 1 page;
   /* chapter と page カウンターを 0 に、
      section カウンターを 1 に設定します。 */
 }
-
+``` -## 仕様書 +### 逆行カウンター - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}{{Spec2('CSS3 Lists')}}変更なし
{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}{{Spec2('CSS2.1')}}初回定義
+```css +h1 { + counter-reset: reversed(chapter) reversed(section) 1 page; + /* chapter カウンターと section カウンターに逆行フラグを設定します。 + chapter カウンターと page カウンターを 0 に、section カウンターを + 1 に設定します */ +} +``` -{{cssinfo}} +## 仕様書 + +{{Specifications}} ## ブラウザーの互換性 -
-{{Compat("css.properties.counter-reset")}} -
+{{Compat}} ## 関連情報 -- CSS カウンターの利用 +- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) - {{cssxref("counter-increment")}} +- {{cssxref("counter-set")}} - {{cssxref("@counter-style")}} +- {{cssxref("counter()")}} および {{cssxref("counters()")}} 関数 +- {{cssxref("content")}} プロパティ -- cgit v1.2.3-54-g00ecf