<ol> - 順序付きリスト

目次

概要

形式
<ol>～</ol>
サポート
https://caniuse.com/mdn-html_elements_ol
カテゴリ
フローコンテンツ
パルパブルコンテンツ (ひとつ以上の li要素を持つ場合)
親要素
フローコンテンツ を子要素に持てるもの
子要素
li, スクリプトサポート要素
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性
reserved
start
type

説明

ol は Ordered List(順序のあるリスト)の略です。<ul> は順序の無いリストを記述しますが、<ol> は順序のあるリストを記述します。リストの各項目は <li> で記述します。

属性

グローバル属性
詳細は グローバル属性 を参照してください。
type=type
LS/H5/H3-H4T/e2/Ch/Fx/Sa/Op/N2/i2
項目番号のタイプを指定します。

1 - 1, 2, 3, 4, 5, ...(H3/e2/N2/i2)
a - a, b, c, d, e, ...(H3/e2/N2/i2)
A - A, B, C, D, E, ...(H3/e2/N2/i2)
i - i, ii, iii, iv, v, ...(H3/e2/N2)
I - I, II, III, IV, V, ...(H3/e2/N2)
start=start
LS/H5/H3-H4T/e2/Ch/Fx/Sa/Op/N2/i2
項目番号の開始番号を指定します。type=a で b から始めたい時も start=b ではなく、start=2 とします。
reversed
LS/H5
項目番号を逆順で表示します。
compact
[非推奨] H2-H4T
リストを極力コンパクトな形式で表示します。IE や Netscape では表示上の差異は無いようです。

使用例

HTML
<ol>
 <li>Internet Explorer</li>
 <li>Google Chrome</li>
</ol>

<ol type=a>
 <li>Internet Explorer</li>
 <li>Google Chrome</li>
</ol>

<ol type=A>
 <li>Internet Explorer</li>
 <li>Google Chrome</li>
</ol>

<ol type=i>
 <li>Internet Explorer</li>
 <li>Google Chrome</li>
</ol>

<ol type=I start=3>
 <li>Internet Explorer</li>
 <li>Google Chrome</li>
</ol>
表示
  1. Internet Explorer
  2. Google Chrome
  1. Internet Explorer
  2. Google Chrome
  1. Internet Explorer
  2. Google Chrome
  1. Internet Explorer
  2. Google Chrome
  1. Internet Explorer
  2. Google Chrome

詳細

カウンタースタイル(@counter-style)

CSS の @counter-style を用いて独自のカウンタースタイルを定義することができます。

CSS
@counter-style my-style {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "(";
  suffix: ") ";
}
ol.my-counter-style {
  list-style-type: my-style;
}
HTML
<ol class="my-counter-style">
  <li>One
  <li>Two
  <li>Three
</ol>
表示
  1. One
  2. Two
  3. Three
Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
https://www.tohoho-web.com/html/ol.htm