initial commit

2 files changed, 206 insertions, 0 deletions

diff --git a/files/ja/web/css/css_lists_and_counters/index.html b/files/ja/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..465a46e0a0
--- /dev/null
+++ b/files/ja/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS リスト
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS リスト
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS リスト</strong><rp> (</rp><rt>CSS List</rt><rp>) </rp></ruby>は CSS モジュールの一つで、リストのレイアウトとスタイル付け方法を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation">一貫したリストのインデント</a></dt>
+ <dd>異なるブラウザー同士でも一貫したリストのインデントを実現する方法を説明します。</dd>
+ <dt><a href="//docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンターの使用</a></dt>
+ <dd>リストのカウンターを制御するために CSS カウンタープロパティを使用する方法を説明します。</dd>
+</dl>
+
+<h2 id="Specifications" name="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')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
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
new file mode 100644
index 0000000000..aae2a7cc94
--- /dev/null
+++ b/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html
@@ -0,0 +1,147 @@
+---
+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
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS カウンター</strong>では、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。</p>
+
+<h2 id="Using_counters" name="Using_counters">カウンターの使用</h2>
+
+<h3 id="Manipulating_a_counters_value" name="Manipulating_a_counter's_value">カウンターの値の操作</h3>
+
+<p>カウンターを使用すると、最初に必ず {{cssxref("counter-reset")}} プロパティで値を初期化する必要があります (既定値は <code>0</code>)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は {{cssxref("counter-increment")}} で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。</p>
+
+<h3 id="Displaying_a_counter" name="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" name="Basic_example">基本的な例</h3>
+
+<p>この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  counter-reset: section;                     /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */
+}
+
+h3::before {
+  counter-increment: section;                 /* section カウンターの値に1を加算 */
+  content: counter(section);                  /* section カウンターの値を表示 */
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h3&gt;Introduction&lt;/h3&gt;
+&lt;h3&gt;Body&lt;/h3&gt;
+&lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example", "100%", 150)}}</p>
+
+<h2 id="Nesting_counters" name="Nesting_counters">カウンターの入れ子</h2>
+
+<p>CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 {{cssxref("counters()")}} 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。</p>
+
+<h3 id="Example_of_a_nested_counter" name="Example_of_a_nested_counter">入れ子になったカウンターの例</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">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 notranslate">&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}</p>
+
+<h2 id="Specifications" name="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" name="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>