ol要素

最終更新日：2023-10-09
公開日：2016-01-20

順序リストを表します。順序は上から基本的に上から1、2、3...と上下関係がハッキリしている要素を並べる場合に使用します。Webページ上のパンくずリスト、作業手順&フロー、ランキング一覧などをマークアップする際に活躍する要素です。

HTML サンプルコード

<!-- パンくずリストのサンプルコード -->
<ol>
  <li><a href="/">トップ</a></li>
  <li><a href="/products">サービス一覧</a></li>
  <li><a href="/products/detail.html">サービス詳細</a></li>
</ol>

カテゴリー

フローコンテンツ、パルパブルコンテンツ（または1個以上のli要素を子要素として持つ場合はパルパブルコンテンツ）
コンテンツモデル

0個以上のli要素、スクリプトサポーティング要素
使用ケース

フローコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

reversed

並びを降順にします。最後から最初に向かった並び（3,2,1）としたい場合に指定します。reversed属性は論理属性なので、属性が書かれているだけで機能します。そのため、値の指定は必須ではありません。

start

スタートする番号を指定します。例えば「3」を指定した場合は「3、4、5...」となり、reversed属性が指定されていた場合は「3、2、1」となります。

type

li要素の左側に表示されるマーカーのタイプを指定します。次の中から選択することができます。ブラウザの表示例については「使用例」を参考にしてください。

type="1"

半角数字1（イチ）。
「1、2、3...」と数字を使うタイプ
type="a"

半角英小文字a（エー）。
「a、b、c」と英小文字を使うタイプ
type="A"

半角英大文字A（エー）。
「A、B、C」と英大文字を使うタイプ
type="i"

半角英小文字i（アイ）。
「i、ii、iii」と小文字のローマ数字を使うタイプ
type="I"

半角英大文字I（アイ）。
「I、II、III」と大文字のローマ数字を使うタイプ

使用例

様々なリストタイプ

type属性に様々な値を設定したサンプルコードです。

HTML コード例

<article>

  <!-- 指定しない（初期設定）、またはtype="1"を指定 -->
  <ol>
    <li>一つ目</li>
    <li>二つ目</li>
    <li>三つ目</li>
  </ol>

  <!-- type="a"を指定 -->
  <ol type="a">
    <li>一つ目</li>
    <li>二つ目</li>
    <li>三つ目</li>
  </ol>
  
  <!-- type="A"を指定 -->
  <ol type="A">
    <li>一つ目</li>
    <li>二つ目</li>
    <li>三つ目</li>
  </ol>

  <!-- type="i"を指定 -->
  <ol type="i">
    <li>一つ目</li>
    <li>二つ目</li>
    <li>三つ目</li>
  </ol>

  <!-- type="i"を指定 -->
  <ol type="I">
    <li>一つ目</li>
    <li>二つ目</li>
    <li>三つ目</li>
  </ol>
</article>

順序を逆にしたリスト

reversed属性を指定し、並び順を降順にした例です。
2つ目のol要素はstart属性の指定を追加しています。リストタイプが英字でも、start属性は数値で渡す必要があります。

HTML コード例

<ol reversed>
  <li>一つ目</li>
  <li>二つ目</li>
  <li>三つ目</li>
</ol>

<ol type="a" start="7" reversed>
  <li>一つ目</li>
  <li>二つ目</li>
  <li>三つ目</li>
</ol>

記事一覧