順序リスト<ol><li></li></ol> | HTML タグ

項目を番号付きで順番に羅列するときなどに便利なリストタグ。

概要

<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. 項目
  2. 項目

順序リストの番号タイプを指定する例

1

HTMLソースコード

1
2
3
4
<ol type="1">
    <li>項目</li>
    <li>項目</li>
</ol>

↓↓↓ ブラウザでの表示例 ↓↓↓

  1. 項目
  2. 項目

I

HTMLソースコード

1
2
3
4
<ol type="I">
    <li>項目</li>
    <li>項目</li>
</ol>

↓↓↓ ブラウザでの表示例 ↓↓↓

  1. 項目
  2. 項目

i

HTMLソースコード

1
2
3
4
<ol type="i">
    <li>項目</li>
    <li>項目</li>
</ol>

↓↓↓ ブラウザでの表示例 ↓↓↓

  1. 項目
  2. 項目

A

HTMLソースコード

1
2
3
4
<ol type="A">
    <li>項目</li>
    <li>項目</li>
</ol>

↓↓↓ ブラウザでの表示例 ↓↓↓

  1. 項目
  2. 項目

a

HTMLソースコード

1
2
3
4
<ol type="a">
    <li>項目</li>
    <li>項目</li>
</ol>

↓↓↓ ブラウザでの表示例 ↓↓↓

  1. 項目
  2. 項目

start属性で開始番号を指定する例

start="3"

HTMLソースコード

1
2
3
4
<ol start="3">
    <li>項目</li>
    <li>項目</li>
</ol>

↓↓↓ ブラウザでの表示例 ↓↓↓

  1. 項目
  2. 項目

type属性とstart属性を併用する例

type="A" start="3"

HTMLソースコード

1
2
3
4
<ol type="A" start="3">
    <li>項目</li>
    <li>項目</li>
</ol>

↓↓↓ ブラウザでの表示例 ↓↓↓

  1. 項目
  2. 項目

順序リストの入れ子の例

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>

↓↓↓ ブラウザでの表示例 ↓↓↓

  1. 項目
  2. 項目
    1. 項目
    2. 項目
  3. 項目

スポンサード リンク

カテゴリー: HTML, リストタグ パーマリンク