<OL>順序があるリスト(数字付き)

<OL>タグでは、囲んだ範囲が番号付きのリストである事を示し、順番が重要なリスト(箇条書き)を作りたい際に利用します。

※olタグとは「ordered list(順序のあるリスト)」の略で、箇条書きの先頭に数字が付いたリストが作成されます。

リストの各項目については<li>~</li>タグで指定します。<li>~</li>内にはテキストだけでなく、spanなどのインライン要素、divなどのブロックレベル要素の両方を入れる事ができます。 また<li>の中に<UL>や<OL>、または<DL>などを入れる事も可能です。

※リストを入れ子にした場合、項目の先頭に付く番号や種類が変更される他、階層に応じてリストがさらにインデントされます。

なお<OL>タグでは各項目の先頭に数字が付き、一般的なブラウザではリスト全体がインデント(字下げ)して表示されます。

各項目に付く数字はtype属性を指定する事で、1.2.3などの10進数、a.b.cなどの英小文字、A.B.Cなどの英大文字、ⅰ.ⅱ.ⅲなどの小文字ローマ数字、Ⅰ.Ⅱ.Ⅲなどの大文字ローマ数字を指定することができます。 例えば、<OL>に指定するとリスト全体の形式が変更されます。<li>に指定すると、その項目のみ変更されます。 さらにstart属性を指定する事で、開始番号などの設定も可能です。

また順序が必要ないリストを作成したい場合は、<UL>タグを使うようにしましょう。 ちなみスタイルシートを使用すれば、ULでも項目に数字を付ける事ができます。

使用した時の例

<p>買い物の手順は次の通りです</p>
<ol type="1">
   <li>カゴに入れる</li>
   <li>レジへ進む</li>
   <li>購入者情報を入力</li>
   <li>確定ボタンをクリック</li>
</ol>

<ol type="a">
   <li>カゴに入れる</li>
   <li>レジへ進む</li>
   <li>購入者情報を入力</li>
   <li>確定ボタンをクリック</li>
</ol>

<ol type="A">
   <li>カゴに入れる</li>
   <li>レジへ進む</li>
   <li>購入者情報を入力</li>
   <li>確定ボタンをクリック</li>
</ol>

<ol type="i">
   <li>カゴに入れる</li>
   <li>レジへ進む</li>
   <li>購入者情報を入力</li>
   <li>確定ボタンをクリック</li>
</ol>

<ol type="I">
   <li>カゴに入れる</li>
   <li>レジへ進む</li>
   <li>購入者情報を入力</li>
   <li>確定ボタンをクリック</li>
</ol>

ブラウザ上の表示例

買い物の手順は次の通りです
  1. カゴに入れる
  2. レジへ進む
  3. 購入者情報を入力
  4. 確定ボタンをクリック
  1. カゴに入れる
  2. レジへ進む
  3. 購入者情報を入力
  4. 確定ボタンをクリック
  1. カゴに入れる
  2. レジへ進む
  3. 購入者情報を入力
  4. 確定ボタンをクリック
  1. カゴに入れる
  2. レジへ進む
  3. 購入者情報を入力
  4. 確定ボタンをクリック
  1. カゴに入れる
  2. レジへ進む
  3. 購入者情報を入力
  4. 確定ボタンをクリック

属性

type="1" 項目番号の設定
  • 1・・・・10進数(算用数字)
  • a・・・・英小文字
  • A・・・・英大文字
  • i・・・・ローマ数字小文字
  • I・・・・ローマ数字大文字
start="1" 指定した番号から項目番号を開始
reversed 項目番号を逆の順で表示
compact リストをコンパクトに表示

対応ブラウザなどのデータ

形式 <ol>~</ol> カテゴリ フローコンテンツ / パルパブルコンテンツ
親要素 子要素にフローコンテンツを含める要素 子要素 li / script / template
開始タグ 必須 終了タグ 必須
分類 ブロックレベル要素
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~