initial commit

1 files changed, 224 insertions, 0 deletions

diff --git a/files/ja/web/html/element/ol/index.html b/files/ja/web/html/element/ol/index.html
new file mode 100644
index 0000000000..277a818ff9
--- /dev/null
+++ b/files/ja/web/html/element/ol/index.html
@@ -0,0 +1,224 @@
+---
+title: '<ol>: 順序付きリスト要素'
+slug: Web/HTML/Element/ol
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - 'HTML:Flow content'
+  - Reference
+translation_of: Web/HTML/Element/ol
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML の <code>&lt;ol&gt;</code> 要素</strong>は、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
+   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。また、<code>&lt;ol&gt;</code> 要素の子に少なくとも 1 個の {{HTMLElement("li")}} 要素を包含する場合は、<a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている内容</th>
+   <td>0個以上の {{HTMLElement("li")}}, {{HTMLElement("script")}}, {{HTMLElement("template")}} の各要素。</td>
+  </tr>
+  <tr>
+   <th scope="row">タグの省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている親要素</th>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている ARIA ロール</th>
+   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM インターフェイス</th>
+   <td>{{DOMxRef("HTMLOListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">属性</h2>
+
+<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>も受け付けます。</p>
+
+<dl>
+ <dt>{{HTMLAttrDef("reversed")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>論理属性で、リストの項目が逆順で指定されていることを指定します。項目は大きい方から小さい方へ番号付けされます。</dd>
+ <dt>{{HTMLAttrDef("start")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>整数値を持つ属性で、リスト項目の序数の開始値を指定します。この値は、番号付けの種類が文字やローマ数字であっても、常にアラビア数字 (1, 2, 3, など) で指定します。例えば、 "d" の文字や "iv" のローマ数字から始める場合は、 <code>start="4"</code> を使用してください。</dd>
+ <dt>{{HTMLAttrDef("type")}}</dt>
+ <dd>この属性は、番号付けの種類を設定します。
+ <ul>
+  <li><code>a</code> は、英小文字を示します</li>
+  <li><code>A</code> は、英大文字を示します</li>
+  <li><code>i</code> は、小文字のローマ数字を示します</li>
+  <li><code>I</code> は、大文字のローマ数字を示します</li>
+  <li><code>1</code> は、数字を示します (既定値)</li>
+ </ul>
+
+ <p>指定された種類は、内部の {{HTMLElement("li")}} 要素で異なる {{HTMLAttrxRef("type", "li")}} 属性が使用されない限り、リスト全体に使用されます。</p>
+
+ <div class="blockIndicator note">
+ <p><strong>注:</strong> (法律文書や技術文書の箇条書きなどのように) リスト番号の種類に重要性がない限り、代わりに CSS の {{CSSxRef("list-style-type")}} プロパティを使用してください。</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>ふつう、順序付きリストの項目は、先頭に数字や文字などの<a href="/ja/docs/Web/CSS/::marker">マーカー</a>が表示されます。</p>
+
+<p><code>&lt;ol&gt;</code> 要素と {{HTMLElement("ul")}} 要素は、必要なだけ深く入れ子にすることができ、 <code>&lt;ol&gt;</code> と <code>&lt;ul&gt;</code> を好きなだけ変更することもできます。</p>
+
+<p><code>&lt;ol&gt;</code> と {{HTMLElement("ul")}} は、どちらも項目のリストを表します。両者の違いは、 <code>&lt;ol&gt;</code> 要素では順序に意味があることです。例えば次のようなものです。</p>
+
+<ul>
+ <li>レシピの手順</li>
+ <li>道順</li>
+ <li>栄養成分表示ラベルにおける成分の降順の一覧</li>
+</ul>
+
+<p>どちらのリストを使用するか判断するには、リスト項目の順序を変更してみてください。意味が変わるようであれば <code>&lt;ol&gt;</code> 要素を使用し、そうでない場合は、 {{HTMLElement("ul")}} 要素を使用することができます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_example" name="Simple_example">単純な例</h3>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Fee&lt;/li&gt;
+  &lt;li&gt;Fi&lt;/li&gt;
+  &lt;li&gt;Fo&lt;/li&gt;
+  &lt;li&gt;Fum&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>上記の HTML は次のように出力されます。</p>
+
+<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p>
+
+<h3 id="Using_Roman_Numeral_type" name="Using_Roman_Numeral_type">ローマ数字の使用</h3>
+
+<pre class="brush: html notranslate">&lt;ol type="i"&gt;
+  &lt;li&gt;Introduction&lt;/li&gt;
+  &lt;li&gt;List of Greivances&lt;/li&gt;
+  &lt;li&gt;Conclusion&lt;/li&gt;
+&lt;/ol&gt; </pre>
+
+<p>上記の HTML は次のように出力されます。</p>
+
+<p>{{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}</p>
+
+<h3 id="Using_the_start_attribute" name="Using_the_start_attribute">start 属性の使用</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Finishing places of contestants not in the winners’ circle:&lt;/p&gt;
+
+&lt;ol start="4"&gt;
+  &lt;li&gt;Speedwalk Stu&lt;/li&gt;
+  &lt;li&gt;Saunterin’ Sam&lt;/li&gt;
+  &lt;li&gt;Slowpoke Rodriguez&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>上記の HTML は次のように出力されます。</p>
+
+<p>{{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}</p>
+
+<h3 id="Nesting_lists" name="Nesting_lists">入れ子のリスト</h3>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item  &lt;!-- ここに終了タグ &lt;/li&gt; はありません！ --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem&lt;/li&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;            &lt;!-- 終了タグ &lt;/li&gt; はここです --&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>上記の HTML は次のように出力されます。</p>
+
+<p>{{EmbedLiveSample("Nesting_lists", 400, 150)}}</p>
+
+<h3 id="Unordered_list_inside_ordered_list" name="Unordered_list_inside_ordered_list">順序付きリストの中の順序なしリスト</h3>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item  &lt;!-- ここに終了タグ &lt;/li&gt; はありません！ --&gt;
+    &lt;ul&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem&lt;/li&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;            &lt;!-- 終了タグ &lt;/li&gt; はここです --&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>上記の HTML は次のように出力されます。</p>
+
+<p>{{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}</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('HTML WHATWG', 'semantics.html#the-ol-element', '&lt;ol&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>最新の W3C スナップショットである {{SpecName('HTML5 W3C')}} から変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td><code>reversed</code> および <code>start</code> 属性を追加、<code>type</code> の非推奨を解除</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td><code>compact</code> および <code>type</code> を非推奨に指定</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("html.elements.ol")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他のリスト関連の HTML 要素: {{HTMLElement("ul")}}、 {{HTMLElement("li")}}、 {{HTMLElement("menu")}} および廃止された {{HTMLElement("dir")}}</li>
+ <li><code>&lt;ol&gt;</code> 要素のスタイル付けに役立つ CSS プロパティ:
+  <ul>
+   <li>{{CSSxRef("list-style")}} プロパティは、序数の表示方法を選ぶのに便利です。</li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンター</a>は、複雑な入れ子のリストを扱うのに便利です。</li>
+   <li>{{CSSxRef("line-height")}} プロパティは、非推奨の {{HTMLAttrxRef("compact", "ol")}} 属性をシミュレートするのに役立ちます。</li>
+   <li>{{CSSxRef("margin")}} プロパティは、リストの字下げを制御するのに役立ちます。</li>
+  </ul>
+ </li>
+</ul>