path: root/files/ja/web/html/element/ol/index.html

---
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="/ja/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="/ja/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>

<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>