HTML <li>タグ

❮前へ完全なHTMLリファレンス次へ❯

例

1つの順序付けされた（<ol>）および1つの順序付けられていない（<ul>）HTMLリスト：

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

<li>タグはリストアイテムを定義します。

この<li>タグは、順序付きリスト（<ol>）、順序なしリスト（<ul>）、およびメニューリスト（<menu>）で使用されます。

<ul>および<menu>では、リスト項目は通常、箇条書きで表示されます。

<ol>では、リスト項目は通常、数字または文字で表示されます。

ヒント： CSSを使用してリストのスタイルを設定します。

ブラウザのサポート

Element
<li>	Yes	Yes	Yes	Yes	Yes

属性

Attribute	Value	Description
value	number	Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number

グローバル属性

この<li>タグは、HTMLのグローバル属性もサポートしています。

イベント属性

この<li>タグは、HTMLのイベント属性もサポートしています。

その他の例

例

順序付きリストでのvalue属性の使用：

<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>

例

さまざまなリストスタイルタイプを設定します（CSSを使用）。

<ol>
<li>Coffee</li>
<li style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>

例

リスト（ネストされたリスト）内にリストを作成します。

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

例

より複雑なネストされたリストを作成します。

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
</li>
<li>Milk</li>
</ul>

デフォルトのCSS設定

ほとんどのブラウザは<li>、次のデフォルト値で要素を表示します。

li {
display: list-item;
}