ol要素とは

<ol>要素は、ordered listの略で番号順リストを表す要素です。項目の順序に意味がある箇条書きに使います。なお、箇条書きの各項目は、<li>要素を使って表します。

意味・役割

番号順リストを表す要素。

利用できるバージョン（HTML4.01以降）

全てのバージョン

コンテンツ・カテゴリ

フロー・コンテンツ。
子要素に1つ以上の <li>要素がある場合は、パルパブル・コンテンツ
（HTML5より前：ブロックレベル要素）

コンテンツ・モデル（梱包できる要素）

0個以上の<li>要素

この要素を配置できる親要素

フロー・コンテンツを配置できる要素

ol要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

compact属性 廃止

リストをコンパクトな表示にする属性です。HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの line-height プロパティで、"80%"または、"0.8"と指定しましょう。

属性値

"compact"： コンパクトに表示

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）

<ol compact="compact">

reversed属性 HTML5で追加

リストの順序を逆順にする属性です。HTML5から追加された属性です。

属性値

"reversed"： 逆順

利用できるバージョン（HTML4.01以降）

HTML5　〜

<ol reversed="reversed">

start属性 HTML5で再導入

リストを開始番号を指定する属性です。HTML4.01では非推奨ですが、HTML5で再導入されました。

属性値

整数値： 開始番号

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset） HTML5 〜

<ol start="3">

type属性 HTML5で再導入

箇条書きの行頭記号の種類を指定する属性です。<ol>要素においてのtype属性は視覚的な表現を行う目的ではない箇所でも使うことがあるので、HTML5で再導入されました。ただし、視覚的な表現を行う目的で使用する場合は、CSSの list-style-type プロパティで行うようにしましょう。

属性値

• "a"： 小文字のアルファベット （a, b, c, d, …）
• "A"： 大文字のアルファベット （A, B, C, D, …）
• "i"： 小文字のローマ数字 （i, ii, iii, iv, …）
• "I"： 大文字のローマ数字 （I, II, III, IV, …）
• "1"： 数字 （1, 2, 3, 4, …）

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）、HTML5 〜

<ol type="square">リスト項目</ol>

ol要素のサンプル

基本的な番号順リストの例

<ol>
  <li>鳥モモ肉を一口大に切る</li>
  <li>しょうが、にんにく、しょうゆを混ぜてタレを作る</li>
  <li>タッパーに鶏肉とタレを入れてよく揉み込む</li>
  <li>タッパーを2時間程度冷蔵庫に入れておく</li>
  <li>鶏肉に片栗粉をまぶして、余分な粉をはたく</li>
  <li>中温の揚げ油で揚げる</li>
</ol>

入れ子構造の番号順リストの例

<ol>
  <li>鳥モモ肉を一口大に切る</li>
  <li>鶏肉とタレを入れたタッパーを2時間程度冷蔵庫に入れておく
    <ol>
      <li>しょうが、にんにく、しょうゆを混ぜてタレを作る</li>
      <li>タッパーに鶏肉とタレを入れてよく揉み込む</li>
    </ol>
  </li>
  <li>鶏肉に片栗粉をまぶして、余分な粉をはたく</li>
  <li>中温の揚げ油で揚げる</li>
</ol>

reversed属性を使った例

<h1>好きなお弁当のおかずBEST5</h1>
<ol reversed="reversed">
  <li>たまご焼き</li>
  <li>ウインナー</li>
  <li>ミートボール</li>
  <li>スパゲッティ</li>
  <li>からあげ</li>
</ol>

start属性を使った例

<ol start="3">
  <li>タッパーに鶏肉とタレを入れてよく揉み込む</li>
  <li>タッパーを2時間程度冷蔵庫に入れておく</li>
  <li>鶏肉に片栗粉をまぶして、余分な粉をはたく</li>
  <li>中温の揚げ油で揚げる</li>
</ol>

RERUN

新しいウインドウで表示する

仕様

HTML5.1

4.4.5. The ol element

HTML5

4.4.5 The ol element

HTML4.01

10.2 Unordered lists (UL), ordered lists (OL), and list items (LI)

関連する要素

• <ul>要素
• <li>要素

関連するレッスン

箇条書きに関連する要素 HTML 入門#09

箇条書き表すli要素、ul要素、ol要素の使い方について見ていきましょう。