From 1063f7fe003a72c5c1508e1eaa3a80e86c38a269 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 16 Dec 2021 23:48:55 +0900 Subject: 2021/11/07 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css_counter_styles/using_css_counters/index.md | 220 ++++++++++----------- 1 file changed, 106 insertions(+), 114 deletions(-) (limited to 'files/ja/web') 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 index 365700d674..b02a8617a2 100644 --- 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 @@ -2,68 +2,73 @@ title: CSS カウンターの使用 slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters tags: - - Advanced + - 上級者 - CSS - - CSS Counter Styles - - Guide - - Layout - - Reference - - Web + - CSS カウンタースタイル + - ガイド + - レイアウト + - リファレンス + - ウェブ translation_of: Web/CSS/CSS_Counter_Styles/Using_CSS_counters original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

カウンターの使用

+## カウンターの使用 -

カウンターの値の操作

+### カウンターの値の操作 -

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

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

カウンターの表示

+### カウンターの表示 -

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

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

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

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

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

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

基本的な例

+### 基本的な例 -

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

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

CSS

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

HTML

+#### HTML -
<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
+```html +

導入

+

本文

+

結論

+``` -

結果

+#### 結果 -

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

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

より洗練された例

+### より洗練された例 -

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

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

CSS

+#### CSS -
:root {
+```css
+:root {
   counter-reset: link;
 }
 
@@ -73,27 +78,31 @@ a[href] {
 
 a[href]:empty::after {
   content: "[" counter(link) "]";
-}
+} +``` -

HTML

+#### 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>
+```html +

See

+

Do not forget to leave a message!

+

See also

+``` -

結果

+#### 結果 -

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

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

カウンターの入れ子

+## カウンターの入れ子 -

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

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

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

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

CSS

+#### CSS -
ol {
+```css
+ol {
   counter-reset: section;                /* それぞれの ol 要素に、 section
                                             カウンターの新しいインスタンスを
                                             生成 */
@@ -107,71 +116,54 @@ li::before {
                                             インスタンスの値を、ピリオドで区切って
                                             結合 */
 }
-
- -

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")}}初回定義
- -

関連情報

- - +``` + +#### HTML + +```html +
    +
  1. 項目
    2. +
  2. 項目 +
      +
    1. 項目
      2. +
    2. 項目
      3. +
    3. 項目 +
        +
      1. 項目
        2. +
      2. 項目
        3. +
      +
        +
      1. 項目
        2. +
      2. 項目
        3. +
      3. 項目
        4. +
      +
      4. +
    4. 項目
      5. +
    +
    3. +
  3. 項目
    4. +
  4. 項目
    5. +
+
    +
  1. 項目
    2. +
  2. 項目
    3. +
+``` + +#### 結果 + +{{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")}} | 初回定義 | + +## 関連情報 + +- {{cssxref("counter-reset")}} +- {{cssxref("counter-set")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} -- cgit v1.2.3-54-g00ecf