From 32193e51b99b5f01a61e65359d81648352cb408c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 16 Dec 2021 23:24:36 +0900 Subject: CSS Counter Styles 関係の文書の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_counter_styles/index.html | 91 ----------- files/ja/web/css/css_counter_styles/index.md | 91 +++++++++++ .../using_css_counters/index.html | 177 --------------------- .../css_counter_styles/using_css_counters/index.md | 177 +++++++++++++++++++++ 4 files changed, 268 insertions(+), 268 deletions(-) delete mode 100644 files/ja/web/css/css_counter_styles/index.html create mode 100644 files/ja/web/css/css_counter_styles/index.md delete mode 100644 files/ja/web/css/css_counter_styles/using_css_counters/index.html create mode 100644 files/ja/web/css/css_counter_styles/using_css_counters/index.md diff --git a/files/ja/web/css/css_counter_styles/index.html b/files/ja/web/css/css_counter_styles/index.html deleted file mode 100644 index b8618a0d33..0000000000 --- a/files/ja/web/css/css_counter_styles/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: CSS カウンタースタイル -slug: Web/CSS/CSS_Counter_Styles -tags: - - CSS - - CSS カウンタースタイル - - Reference - - 概要 -translation_of: Web/CSS/CSS_Counter_Styles ---- -
{{cssref}}
- -

CSS カウンタースタイル (CSS Counter Styles) は CSS のモジュールの一つで、独自のカウンタースタイルを定義することができます。

- -

リファレンス

- -

プロパティ

- -
- -
- -

@-規則

- -
-
{{cssxref("@counter-style")}}
-
-
-
    -
  • {{cssxref("@counter-style/system","system")}}
    • -
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • -
  • {{cssxref("@counter-style/negative", "negative")}}
    • -
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • -
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • -
  • {{cssxref("@counter-style/range", "range")}}
    • -
  • {{cssxref("@counter-style/pad", "pad")}}
    • -
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • -
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • -
-
-
-
- -

ガイド

- -
-
CSS カウンターの使用
-
カウンターを使用して HTML 要素に番号を振る方法や、複雑なカウンターを実行する方法を説明します。
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Counter Styles')}}{{Spec2('CSS3 Counter Styles')}}初回定義
- -

ブラウザーの対応

- -

@counter-style 規則

- -
-

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

- -

counter-increment プロパティ

- -
-

{{Compat("css.properties.counter-increment")}}

- -

counter-reset プロパティ

- -
-

{{Compat("css.properties.counter-reset")}}

-
-
-
diff --git a/files/ja/web/css/css_counter_styles/index.md b/files/ja/web/css/css_counter_styles/index.md new file mode 100644 index 0000000000..b8618a0d33 --- /dev/null +++ b/files/ja/web/css/css_counter_styles/index.md @@ -0,0 +1,91 @@ +--- +title: CSS カウンタースタイル +slug: Web/CSS/CSS_Counter_Styles +tags: + - CSS + - CSS カウンタースタイル + - Reference + - 概要 +translation_of: Web/CSS/CSS_Counter_Styles +--- +
{{cssref}}
+ +

CSS カウンタースタイル (CSS Counter Styles) は CSS のモジュールの一つで、独自のカウンタースタイルを定義することができます。

+ +

リファレンス

+ +

プロパティ

+ +
+ +
+ +

@-規則

+ +
+
{{cssxref("@counter-style")}}
+
+
+
    +
  • {{cssxref("@counter-style/system","system")}}
    • +
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • +
  • {{cssxref("@counter-style/negative", "negative")}}
    • +
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • +
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • +
  • {{cssxref("@counter-style/range", "range")}}
    • +
  • {{cssxref("@counter-style/pad", "pad")}}
    • +
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • +
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • +
+
+
+
+ +

ガイド

+ +
+
CSS カウンターの使用
+
カウンターを使用して HTML 要素に番号を振る方法や、複雑なカウンターを実行する方法を説明します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Counter Styles')}}{{Spec2('CSS3 Counter Styles')}}初回定義
+ +

ブラウザーの対応

+ +

@counter-style 規則

+ +
+

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

+ +

counter-increment プロパティ

+ +
+

{{Compat("css.properties.counter-increment")}}

+ +

counter-reset プロパティ

+ +
+

{{Compat("css.properties.counter-reset")}}

+
+
+
diff --git a/files/ja/web/css/css_counter_styles/using_css_counters/index.html b/files/ja/web/css/css_counter_styles/using_css_counters/index.html deleted file mode 100644 index 365700d674..0000000000 --- a/files/ja/web/css/css_counter_styles/using_css_counters/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: CSS カウンターの使用 -slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters -tags: - - Advanced - - CSS - - CSS Counter Styles - - Guide - - Layout - - Reference - - Web -translation_of: Web/CSS/CSS_Counter_Styles/Using_CSS_counters -original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -
{{CSSRef}}
- -

CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。

- -

カウンターの使用

- -

カウンターの値の操作

- -

カウンターを使用すると、最初に必ず {{cssxref("counter-reset")}} プロパティで値を初期化する必要があります (既定値は 0)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は {{cssxref("counter-increment")}} で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。

- -

カウンターの表示

- -

カウンターの値は、 {{cssxref("content")}} の中で {{cssxref("counter()", "counter()")}} または {{cssxref("counters()", "counters()")}} 関数を使用して表示することができます。

- -

counter() には 'counter(name)' または 'counter(name, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name の最も内側にあるカウンターの値です。これは指定されたスタイルで整形されます (既定値は decimal です)。

- -

counters() 関数にも、 'counters(name, string)' または 'counters(name, string, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name のすべてのカウンターの値が、外側から内側に向けて、指定された string で区切られたものになります。カウンターは指定されたスタイルで表示されます (既定値は decimal です)。

- -

基本的な例

- -

この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。

- -

CSS

- -
body {
-  counter-reset: section;                       /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */
-}
-
-h3::before {
-  counter-increment: section;                   /* section カウンターの値に1を加算 */
-  content: "Section " counter(section) ": ";    /* 'Section ' という語、 section カウンターの値、
-                                                   コロンをそれぞれの h3 の内容の前にを表示 */
-}
-
- -

HTML

- -
<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
- -

結果

- -

{{EmbedLiveSample("Basic_example", "100%", 150)}}

- -

より洗練された例

- -

カウンターは増加するたびに表示する必要はありません。この例では、すべてのリンクを数えますが、カウンターはリンクにテキストがない場合の便利な代替手段として表示されます。

- -

CSS

- -
:root {
-  counter-reset: link;
-}
-
-a[href] {
-  counter-increment: link;
-}
-
-a[href]:empty::after {
-  content: "[" counter(link) "]";
-}
- -

HTML

- -
<p>See <a href="https://www.mozilla.org/"></a></p>
-<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
-<p>See also <a href="https://developer.mozilla.org/"></a></p>
- -

結果

- -

{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}

- -

カウンターの入れ子

- -

CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 {{cssxref("counters()")}} 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。

- -

入れ子になったカウンターの例

- -

CSS

- -
ol {
-  counter-reset: section;                /* それぞれの ol 要素に、 section
-                                            カウンターの新しいインスタンスを
-                                            生成 */
-  list-style-type: none;
-}
-
-li::before {
-  counter-increment: section;            /* section カウンターのこのインスタンス
-                                            のみを加算 */
-  content: counters(section, ".") " ";   /* section カウンターのすべての
-                                            インスタンスの値を、ピリオドで区切って
-                                            結合 */
-}
-
- -

HTML

- -
<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item               <!-- 2     -->
-    <ol>
-      <li>item</li>      <!-- 2.1   -->
-      <li>item</li>      <!-- 2.2   -->
-      <li>item           <!-- 2.3   -->
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-        </ol>
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-          <li>item</li>  <!-- 2.3.3 -->
-        </ol>
-      </li>
-      <li>item</li>      <!-- 2.4   -->
-    </ol>
-  </li>
-  <li>item</li>          <!-- 3     -->
-  <li>item</li>          <!-- 4     -->
-</ol>
-<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item</li>          <!-- 2     -->
-</ol>
- -

結果

- -

{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/css_counter_styles/using_css_counters/index.md b/files/ja/web/css/css_counter_styles/using_css_counters/index.md new file mode 100644 index 0000000000..365700d674 --- /dev/null +++ b/files/ja/web/css/css_counter_styles/using_css_counters/index.md @@ -0,0 +1,177 @@ +--- +title: CSS カウンターの使用 +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - Advanced + - CSS + - CSS Counter Styles + - Guide + - Layout + - Reference + - Web +translation_of: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。

+ +

カウンターの使用

+ +

カウンターの値の操作

+ +

カウンターを使用すると、最初に必ず {{cssxref("counter-reset")}} プロパティで値を初期化する必要があります (既定値は 0)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は {{cssxref("counter-increment")}} で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。

+ +

カウンターの表示

+ +

カウンターの値は、 {{cssxref("content")}} の中で {{cssxref("counter()", "counter()")}} または {{cssxref("counters()", "counters()")}} 関数を使用して表示することができます。

+ +

counter() には 'counter(name)' または 'counter(name, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name の最も内側にあるカウンターの値です。これは指定されたスタイルで整形されます (既定値は decimal です)。

+ +

counters() 関数にも、 'counters(name, string)' または 'counters(name, string, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name のすべてのカウンターの値が、外側から内側に向けて、指定された string で区切られたものになります。カウンターは指定されたスタイルで表示されます (既定値は decimal です)。

+ +

基本的な例

+ +

この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。

+ +

CSS

+ +
body {
+  counter-reset: section;                       /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */
+}
+
+h3::before {
+  counter-increment: section;                   /* section カウンターの値に1を加算 */
+  content: "Section " counter(section) ": ";    /* 'Section ' という語、 section カウンターの値、
+                                                   コロンをそれぞれの h3 の内容の前にを表示 */
+}
+
+ +

HTML

+ +
<h3>Introduction</h3>
+<h3>Body</h3>
+<h3>Conclusion</h3>
+ +

結果

+ +

{{EmbedLiveSample("Basic_example", "100%", 150)}}

+ +

より洗練された例

+ +

カウンターは増加するたびに表示する必要はありません。この例では、すべてのリンクを数えますが、カウンターはリンクにテキストがない場合の便利な代替手段として表示されます。

+ +

CSS

+ +
:root {
+  counter-reset: link;
+}
+
+a[href] {
+  counter-increment: link;
+}
+
+a[href]:empty::after {
+  content: "[" counter(link) "]";
+}
+ +

HTML

+ +
<p>See <a href="https://www.mozilla.org/"></a></p>
+<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
+<p>See also <a href="https://developer.mozilla.org/"></a></p>
+ +

結果

+ +

{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}

+ +

カウンターの入れ子

+ +

CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 {{cssxref("counters()")}} 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。

+ +

入れ子になったカウンターの例

+ +

CSS

+ +
ol {
+  counter-reset: section;                /* それぞれの ol 要素に、 section
+                                            カウンターの新しいインスタンスを
+                                            生成 */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* section カウンターのこのインスタンス
+                                            のみを加算 */
+  content: counters(section, ".") " ";   /* section カウンターのすべての
+                                            インスタンスの値を、ピリオドで区切って
+                                            結合 */
+}
+
+ +

HTML

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+ +

結果

+ +

{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

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