項目を番号付きで順番に羅列するときなどに便利なリストタグ。
概要
- <ol>~</ol>
-
ol は、ordered list の略。
-
順序リストの大枠。
-
<li>~</li>を入れる。
-
type属性[type=""]でリスト番号タイプを指定。(HTML 5 において、廃止。)
- <ol type="1">~</ol>
- アラビア数字。1 2 3 …
- <ol type="I">~</ol>
- 大文字のローマ数字。I II III …
- <ol type="i">~</ol>
- 小文字のローマ数字。i ii iii …
- <ol type="A">~</ol>
- 大文字のアルファベット。A B C …
- <ol type="a">~</ol>
- 小文字のアルファベット。a b c …
-
start属性で開始番号を指定できる。
- <ol start="3">~</ol>
-
3 4 5 …
- <li>~</li>
-
li は、list items の略。
-
項目を記述。
-
value属性で番号を途中で変更できる。
HTML4.01 と HTML 5の違い
HTML4.01 では、ol 要素の type 属性が使えたが、HTML 5 において、廃止された。HTML 5 では、リスト番号タイプの指定には、スタイルシートの list-style-type を使う必要がある。
順序リストの例
順序リストの基本例
HTMLソースコード
1 2 3 4 | <ol> <li>項目</li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
順序リストの番号タイプを指定する例
1
HTMLソースコード
1 2 3 4 | <ol type="1"> <li>項目</li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
I
HTMLソースコード
1 2 3 4 | <ol type="I"> <li>項目</li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
i
HTMLソースコード
1 2 3 4 | <ol type="i"> <li>項目</li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
A
HTMLソースコード
1 2 3 4 | <ol type="A"> <li>項目</li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
a
HTMLソースコード
1 2 3 4 | <ol type="a"> <li>項目</li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
start属性で開始番号を指定する例
start="3"
HTMLソースコード
1 2 3 4 | <ol start="3"> <li>項目</li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
type属性とstart属性を併用する例
type="A" start="3"
HTMLソースコード
1 2 3 4 | <ol type="A" start="3"> <li>項目</li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
順序リストの入れ子の例
HTMLソースコード
1 2 3 4 5 6 7 8 9 10 | <ol> <li>項目</li> <li>項目 <ol> <li>項目</li> <li>項目</li> </ol> </li> <li>項目</li> </ol> |
↓↓↓ ブラウザでの表示例 ↓↓↓
- 項目
- 項目
- 項目
- 項目
- 項目