最終更新日

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」外部リンク
HOME