From 497f01fc724eb5849dc8d304c0355e30ce68a68d Mon Sep 17 00:00:00 2001 From: MDN Date: Mon, 8 Nov 2021 00:49:15 +0000 Subject: [CRON] sync translated content --- files/ja/_redirects.txt | 7 +- files/ja/_wikihistory.json | 20 +-- .../using_css_counters/index.html | 177 +++++++++++++++++++++ .../using_css_counters/index.html | 176 -------------------- 4 files changed, 191 insertions(+), 189 deletions(-) create mode 100644 files/ja/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/ja/web/css/css_lists_and_counters/using_css_counters/index.html (limited to 'files/ja') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index a8c358359f..596532827e 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -251,7 +251,7 @@ /ja/docs/CSS/Class_selectors /ja/docs/Web/CSS/Class_selectors /ja/docs/CSS/Class_selectors-redirect-1 /ja/docs/Web/CSS/Class_selectors /ja/docs/CSS/Comments /ja/docs/Web/CSS/Comments -/ja/docs/CSS/Counters /ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/ja/docs/CSS/Counters /ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ja/docs/CSS/Descendant_selectors /ja/docs/Web/CSS/Descendant_combinator /ja/docs/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator /ja/docs/CSS/Getting_Started /ja/docs/Learn/CSS @@ -3647,6 +3647,7 @@ /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox /ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained /ja/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ja/docs/Web/CSS/CSS_Masks /ja/docs/Web/CSS/CSS_Masking /ja/docs/Web/CSS/CSS_Reference /ja/docs/Web/CSS/Reference /ja/docs/Web/CSS/CSS_Reference/Mozilla_Extensions /ja/docs/Web/CSS/Mozilla_Extensions @@ -3860,7 +3861,7 @@ /ja/docs/Web/Guide/API/Vibration /ja/docs/Web/API/Vibration_API /ja/docs/Web/Guide/Audio_and_video_delivery/H.264_support_in_Firefox /ja/docs/Web/Guide/Audio_and_video_delivery /ja/docs/Web/Guide/CSS /ja/docs/Learn/CSS -/ja/docs/Web/Guide/CSS/Counters /ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/ja/docs/Web/Guide/CSS/Counters /ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ja/docs/Web/Guide/CSS/Flexible_boxes /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /ja/docs/Web/Guide/CSS/Getting_started /ja/docs/Learn/CSS /ja/docs/Web/Guide/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model @@ -4656,7 +4657,7 @@ /ja/docs/addons.mozilla.org_(AMO)_API_Developers'_Guide /ja/docs/Mozilla/Add-ons /ja/docs/ant_script_to_assemble_an_extension /ja/docs/orphaned/ant_script_to_assemble_an_extension /ja/docs/console /ja/docs/Web/API/console -/ja/docs/counters /ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/ja/docs/counters /ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ja/docs/data_URIs /ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs /ja/docs/dummySlug/Reference /ja/docs/Web/JavaScript/Reference /ja/docs/dummySlug/Reference/About /ja/docs/Web/JavaScript/Reference/About diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 4f501cb70e..b69f537f16 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -28287,6 +28287,16 @@ "mfuji09" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2020-08-18T01:07:42.151Z", + "contributors": [ + "mfuji09", + "LuckyWind_sck", + "ethertank", + "sosleepy", + "sii" + ] + }, "Web/CSS/CSS_Device_Adaptation": { "modified": "2020-10-15T22:06:16.617Z", "contributors": [ @@ -28540,16 +28550,6 @@ "mfuji09" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2020-08-18T01:07:42.151Z", - "contributors": [ - "mfuji09", - "LuckyWind_sck", - "ethertank", - "sosleepy", - "sii" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2020-08-06T03:13:13.668Z", "contributors": [ 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 new file mode 100644 index 0000000000..ba1051209e --- /dev/null +++ b/files/ja/web/css/css_counter_styles/using_css_counters/index.html @@ -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_Lists_and_Counters/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_lists_and_counters/using_css_counters/index.html b/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index dcbbae259b..0000000000 --- a/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: CSS カウンターの使用 -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - Advanced - - CSS - - CSS Counter Styles - - Guide - - Layout - - Reference - - Web -translation_of: 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