構文

<ol>
  <li>・・・</li>
   ：
</ol>

説明文

　<ol>タグは，順序のある項目をリスト上に記載するときに利用する。この際，各リストの行頭には1，2，3・・・のような数字が付加される。また，type属性により付加する数字をアルファベットやローマ数字にすることもできる。さらにstart属性で開始する数字を指定することも可能だ。

　<ol>タグで各項目を記述する際は，<li>タグを利用する。

　また，リストの中にさらに<ol>タグを挿入することでリストを階層化することも可能だ。

サンプル

HTMLソース

<ol>
  <li>はじめに</li>
  <li>概要</li>
</ol>
<ol type="i">
  <li>始めに</li>
  <li>概要</li>
</ol>
<ol style="list-style-type:upper-alpha;">
  <li>始めに</li>
  <li>概要</li>
</ol>
<ol>
  <li>始めに</li>
  <li>概要</li>
  <ol>
    <li>製品について</li>
    <li>製品の付属品について</li>
  </ol>
</ol>
<ol start="3">
  <li>第3章　ヒーロー誕生</li>
  <li>第4章　悪の手下達</li>
</ol>

ブラウザ表示例

  1. はじめに
  2. 概要
  1. 始めに
  2. 概要
  1. 始めに
  2. 概要
  1. 始めに
  2. 概要
    1. 製品について
    2. 製品の付属品について
  1. 第3章　ヒーロー誕生
  2. 第4章　悪の手下達

対応状況

HTML IE Firefox Opera
4 strict 4 Transitional 5 6 7 2 3 8 9
○ ○ ○ ○ ○ ○ ○ ○ ○

要素，タグ

タグ要素 ブロック要素
包括可能要素 <li>（必須）
タグ記述条件 開始タグ：必須　終了タグ：必須

属性

属性 意味 対応
HTML 4s HTML 4t その他
class=クラス名 このタグのクラス名。CSSでスタイルを指定する場合などに利用される ○ ○ 　
compact リストの表示を行う際，なるべく狭い範囲に表示しようとする。ただし，多くのブラウザではこの属性を指定しても表示に変化はない × ○  
dir=方向 タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する ○ ○ 　
id=ID タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する ○ ○ 　
lang=言語 タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する ○ ○ 　
start=開始番号> 開始する番号を指定する。番号にアルファベットを利用している場合は，アルファベットの順番を数値で指定する。例えば，cから始める場合は「start=3」と指定する × ○ 　
style=スタイル タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 ○ ○ 　
title=タイトル タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する ○ ○ 　
type=タイプ 各リストの行頭に表示する番号のタイプを指定する。「1」は数字（1，2・・・），「a」は小文字のアルファベット（a，b・・・），「A」は大文字のアルファベット（A，B・・・），「i」は小文字のローマ数字（i，ii・・・），「I」は大文字のローマ数字（I，II・・・）にて表示する。ただし，HTML 4 Strictからはスタイルシートにて設定を行うことが推奨されている × ○ 　

マウスやキーボードの状況変化に関わる属性

属性 意味 対応
HTML 4s HTML 4t その他
onclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する ○ ○  
ondblclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する ○ ○  
onmousedown=スクリプト このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する ○ ○  
onmouseup=スクリプト このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する ○ ○  
onmouseover=スクリプト このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する ○ ○  
onmousemove=スクリプト このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する ○ ○  
onmouseout=スクリプト このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する ○ ○  
onkeypress=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する ○ ○  
onkeydown=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する ○ ○  
onkeyup=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する ○ ○  

■ スタイルシートで数字の種類を指定する

　各リストの行頭に付ける数字の種類はtype属性で指定する。しかし，HTML 4 strictではtype属性を利用せずスタイルシートの「list-style-type」で指定する。例えば以下のように指定すると，ローマ数字（大文字）で数字が表記される。

<ol style="list-style-type:upper-roman;">

  <li>Internet Explorer</li>

  <li>Firefox</li>

</ol>

関連項目