最終更新日 2021年4月7日

ol要素

ol要素は、順序付きの項目リストを示します。手順や順位など、項目を並べる順番に意味がある場合に使用します。ol要素内のリストの各項目は、li要素で指定します。

ol要素では、リストの各項目の行頭に順番を示す番号が表示されます。

reversed属性は論理属性です。リストの行頭番号を降順にする場合に指定します。指定しない場合は昇順です。

start属性では、最初の項目の開始番号を変更できます。指定しない場合は1から始まります。

type属性は、行頭番号を数字にするか、アルファベットやローマ数字にするかを指定できます。値は「1」、「a」、「A」、「i」、「I」のいずれかで指定可能です。この場合、大文字小文字は区別されます。

ol要素は、Flowコンテンツの記述箇所で使用できます。

HTML5での変更点

・ol要素のcompact属性は廃止されました。代わりにCSSを使います。
・HTML5ではreversed属性を指定できます。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ	省略不可	Flowコンテンツを子にできる要素	li

属性	値	説明
reversed	reversed	論理属性。指定した場合は、番号が降順で表示されます。
start	整数	項目の開始番号を指定します。
type	1｜a｜A｜i｜I	行頭に表示する番号の種類を指定します。省略時の初期値は「1」。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <p>マクドエイドの人気メニューBEST3です。</p>
    <ol>
      <li>ベーコンレタスバーガー</li>
      <li>ダブルチーズバーガー</li>
      <li>えびフィレオ</li>
    </ol>
    <p>4位以降のメニューです。</p>
    <ol start="4">
      <li>フィレオフィッシュ</li>
      <li>てりやきバーガー</li>
      <li>チキンクリスプ</li>
      <li>チーズバーガー</li>
      <li>ハンバーガー</li>
    </ol>
  </body>
</html>

参考文献：W3C HTML5「4.5.5 The ol element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。