diff options
Diffstat (limited to 'files/ja/web/css/css_counter_styles')
| -rw-r--r-- | files/ja/web/css/css_counter_styles/using_css_counters/index.html | 177 |
1 files changed, 177 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS カウンター</strong>では、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。</p> + +<h2 id="Using_counters">カウンターの使用</h2> + +<h3 id="Manipulating_a_counters_value">カウンターの値の操作</h3> + +<p>カウンターを使用すると、最初に必ず {{cssxref("counter-reset")}} プロパティで値を初期化する必要があります (既定値は <code>0</code>)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は {{cssxref("counter-increment")}} で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。</p> + +<h3 id="Displaying_a_counter">カウンターの表示</h3> + +<p>カウンターの値は、 {{cssxref("content")}} の中で {{cssxref("counter()", "counter()")}} または {{cssxref("counters()", "counters()")}} 関数を使用して表示することができます。</p> + +<p><code>counter()</code> には 'counter(<var>name</var>)' または 'counter(<var>name</var>, <var>style</var>)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name の最も内側にあるカウンターの値です。これは指定されたスタイルで整形されます (既定値は <code>decimal</code> です)。</p> + +<p><code>counters()</code> 関数にも、 'counters(<var>name</var>, <var>string</var>)' または 'counters(<var>name</var>, <var>string</var>, <var>style</var>)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name のすべてのカウンターの値が、外側から内側に向けて、指定された string で区切られたものになります。カウンターは指定されたスタイルで表示されます (既定値は <code>decimal</code> です)。</p> + +<h3 id="Basic_example">基本的な例</h3> + +<p>この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + counter-reset: section; /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */ +} + +h3::before { + counter-increment: section; /* section カウンターの値に1を加算 */ + content: "Section " counter(section) ": "; /* 'Section ' という語、 section カウンターの値、 + コロンをそれぞれの h3 の内容の前にを表示 */ +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h3>Introduction</h3> +<h3>Body</h3> +<h3>Conclusion</h3></pre> + +<h4 id="Result">結果</h4> + +<p>{{EmbedLiveSample("Basic_example", "100%", 150)}}</p> + +<h3 id="A_more_sophisticated_example">より洗練された例</h3> + +<p>カウンターは増加するたびに表示する必要はありません。この例では、すべてのリンクを数えますが、カウンターはリンクにテキストがない場合の便利な代替手段として表示されます。</p> + +<h4 id="CSS2">CSS</h4> + +<pre class="brush: css">:root { + counter-reset: link; +} + +a[href] { + counter-increment: link; +} + +a[href]:empty::after { + content: "[" counter(link) "]"; +}</pre> + +<h4 id="HTML2">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="Result2">結果</h4> + +<p>{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}</p> + +<h2 id="Nesting_counters">カウンターの入れ子</h2> + +<p>CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 {{cssxref("counters()")}} 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。</p> + +<h3 id="Example_of_a_nested_counter">入れ子になったカウンターの例</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">ol { + counter-reset: section; /* それぞれの ol 要素に、 section + カウンターの新しいインスタンスを + 生成 */ + list-style-type: none; +} + +li::before { + counter-increment: section; /* section カウンターのこのインスタンス + のみを加算 */ + content: counters(section, ".") " "; /* section カウンターのすべての + インスタンスの値を、ピリオドで区切って + 結合 */ +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}</p> + +<h2 id="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td> + <td>{{Spec2("CSS3 Lists")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("counter-reset")}}</li> + <li>{{cssxref("counter-set")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("@counter-style")}}</li> +</ul> |