<ul></ul> <li></li>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

ul要素で、箇条書きのリストを作成することができます。リストの項目は、ul要素内に配置するli要素で示します。

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


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

リストの入れ子

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

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

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

</li>
<li>リスト項目C</li>
</ul>

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

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

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

</li>
<li>リスト項目C</li>
</ul>

リストのマーカー

通常は、リストの先頭に黒丸のマークが付きますが、入れ子にされたリストでは異なるマークが使用されます。

[入れ子の表示例]
(IE 7 の表示例)

使用例


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

表示例
  • リスト項目A
  • リスト項目B
  • リスト項目C
ul要素を入れ子にした例

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

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

</li>
<li>リスト項目C</li>
</ul>

表示例
  • リスト項目A
  • リスト項目B
    • リスト項目B-A
    • リスト項目B-B
    • リスト項目B-C
  • リスト項目C
ol要素を入れ子にした例

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

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

</li>
<li>リスト項目C</li>
</ul>

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