From 7605dba8f60814ea22423a818028e86d598c4a85 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 26 Apr 2021 01:59:22 +0900 Subject: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters を更新 (#495) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/03/31 時点の英語版に同期 --- .../using_css_counters/index.html | 65 ++++++++++++++++------ 1 file changed, 47 insertions(+), 18 deletions(-) (limited to 'files/ja/web') 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 index aae2a7cc94..dcbbae259b 100644 --- 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 @@ -15,55 +15,84 @@ translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

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

-

カウンターの使用

+

カウンターの使用

-

カウンターの値の操作

+

カウンターの値の操作

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

-

カウンターの表示

+

カウンターの表示

-

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

+

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

 
 
HTML

 
-
<h3>Introduction</h3>
+
<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 {
+
ol {
   counter-reset: section;                /* それぞれの ol 要素に、 section
                                             カウンターの新しいインスタンスを
                                             生成 */
@@ -81,7 +110,7 @@ li::before {
 
 
HTML

 
-
<ol>
+
<ol>
   <li>item</li>          <!-- 1     -->
   <li>item               <!-- 2     -->
     <ol>
@@ -109,11 +138,11 @@ li::before {
   <li>item</li>          <!-- 2     -->
 </ol>

 
-
結果

+
結果

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

 
-
仕様書

+
仕様書

 
 
@@ -137,7 +166,7 @@ li::before {
  

  
 

 
-
関連情報

+
関連情報

 
 
    
  
  • {{cssxref("counter-reset")}}
    • 
-- 
cgit v1.2.3-54-g00ecf