HTML <li> タグ

定義と使用法

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

<li> タグは順序付きリスト用です（<ol>)、非順序リスト (<ul>)とメニューリスト (<menu>)内で。

<ul>と<menu>内では、リストアイテムは通常アイコンで表示されます。

<ol>内では、リストアイテムは通常数字やアルファベットで表示されます。

ヒント：CSSを使用して設定してください：リストスタイルの設定。

参照してください：

HTML 教程：HTML リスト

HTML DOM リファレンスマニュアル：Li オブジェクト

CSS 教程：リストのスタイルを設定します

インスタンス

例 1

順序付きリスト (<ol>) と非順序リスト (<ul>) の HTML リスト：

<ol>
  <li>コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
</ol>
<ul>
  <li>コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
</ul>

自分で試してみる

例 2

順序付きリストで value 属性を使用します：

<ol>
  <li value="100">コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
  <li>純水</li>
  <li>ジュース</li>
  <li>ビール</li>
</ol>

自分で試してみる

例 3

異なるリストスタイルタイプを設定します（CSSを使用して）：

<ol>
  <li>コーヒー</li>
  <li style="list-style-type:lower-alpha">茶</li>
  <li>ミルク</li>
</ol>
<ul>
  <li>コーヒー</li>
  <li style="list-style-type:square">茶</li>
  <li>ミルク</li>
</ul>

自分で試してみる

例 4

リスト内にリスト（ネストリスト）を作成します：

<ul>
  <li>コーヒー</li>
  <li>茶
    <ul>
      <li>普耳茶</li>
      <li>緑茶</li>
    </ul>
  </li>
  <li>ミルク</li>
</ul>

自分で試してみる

例 5

より複雑なネストリストを作成する方法：

<ul>
  <li>コーヒー</li>
  <li>茶
    <ul>
      <li>普耳茶</li>
      <li>緑茶
        <ul>
          <li>碧螺春</li>
          <li>龍井</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>ミルク</li>
</ul>

自分で試してみる

属性

属性 値 説明
value 数字 ただし <ol> リストにのみ適用されます。リスト項目の開始値を定義します。次のリスト項目はその数値から増分されます。

グローバル属性

<li> タグは以下のイベント属性もサポートしています HTML 中のグローバル属性。

イベント属性

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

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <li> 要素：

li {
  display: list-item;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート