1. Home
  2. HTMLタグ
  3. リストタグ
  4. 順序付きのリストを作る

順序付きのリストを作る


<ol></ol> <li></li>

ブラウザ
IE
Fx
Sf
Cr
O
分類
ブロックレベル要素
要素
ol要素
li要素

ol要素で、番号付きのリストを作成することができます。リストの項目は、ol要素内に配置するli要素で示します。

一般的なブラウザでは、リストの左側がインデントされて表示されます。



<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>


【リストの入れ子】

リストに階層を持たせたい場合は、次のようにli要素の中に別のol要素を配置します。

<ol>
<li>リスト項目1</li>
<li>リスト項目2

<ol>
<li>リスト項目2-1</li>
<li>リスト項目2-2</li>
<li>リスト項目2-3</li>
</ol>

</li>
<li>リスト項目3</li>
</ol>

次のように、ul要素(順不同のリスト)を入れ子にすることもできます。

<ol>
<li>リスト項目1</li>
<li>リスト項目2

<ul>
<li>リスト項目2-A</li>
<li>リスト項目2-B</li>
<li>リスト項目2-C</li>
</ul>

</li>
<li>リスト項目3</li>
</ol>

メモ

インデントの大きさは、スタイルシートで調整することができます。指定方法の詳細は「関連ページ」をご覧ください。


使用例


<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>

表示例

  1. リスト項目1
  2. リスト項目2
  3. リスト項目3

■ol要素を入れ子にした例


<ol>
<li>リスト項目1</li>
<li>リスト項目2

<ol>
<li>リスト項目2-1</li>
<li>リスト項目2-2</li>
<li>リスト項目2-3</li>
</ol>

</li>
<li>リスト項目3</li>
</ol>

表示例

  1. リスト項目1
  2. リスト項目2
    1. リスト項目2-1
    2. リスト項目2-2
    3. リスト項目2-3
  3. リスト項目3

■ul要素を入れ子にした例


<ol>
<li>リスト項目1</li>
<li>リスト項目2

<ul>
<li>リスト項目2-A</li>
<li>リスト項目2-B</li>
<li>リスト項目2-C</li>
</ul>

</li>
<li>リスト項目3</li>
</ol>

表示例

  1. リスト項目1
  2. リスト項目2
    • リスト項目2-A
    • リスト項目2-B
    • リスト項目2-C
  3. リスト項目3

リストタグ

ページの先頭へ


inserted by FC2 system