li要素とは

<li>要素は、list itemの略で、箇条書きのリスト項目を表す要素です。この<li>要素は、順不同リストを表す<ul>要素、番号順リストを表す<ol>要素や、 右クリックなどで表示する コンテキストメニューを表す<menu>要素内で使います。 なお、すでに廃止されていますが <dir>要素内でも使用していました。

意味・役割
リスト項目を表す要素。
利用できるバージョン(HTML4.01以降)
全てのバージョン
コンテンツ・カテゴリ
なし
(HTML5より前:なし)
コンテンツ・モデル(梱包できる要素)
フロー・コンテンツ
(HTML5より前:ブロックレベル要素インライン要素
この要素を配置できる親要素
<ul>要素、<ol>要素、<menu>要素または、すでに廃止されている<dir>要素

li要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

value属性 HTML5で再導入

番号付きリストの行頭番号を指定する属性で、ol要素の内に配置されたときのみ有効です。HTML4.01で非推奨、XHTML1.1で廃止となりましたが、HTML5で視覚的表現が目的の属性ではないことから再導入されました。属性値は数値で指定します。

属性値
整数値
利用できるバージョン(HTML4.01以降) HTML4.01で非推奨
HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)、HTML5 〜
使用例
<li value="5">リスト項目</li>

type属性 XHTML1.1で廃止

箇条書きの行頭記号の種類を指定する属性です。<ul>要素内で使う場合と、<ol>要素内で使う場合とで、指定できる属性値が異なります。なお、この属性は視覚的な表現を行う属性でHTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの list-style-type プロパティで行うようにしましょう。

属性値

<ul>要素内で使える属性値】

  • "disc": 黒丸
  • "circle": 円
  • "square": 四角

<ol>要素内で使える属性値】

  • "a": 小文字のアルファベット (a, b, c, d, …)
  • "A": 大文字のアルファベット (A, B, C, D, …)
  • "i": 小文字のローマ数字 (i, ii, iii, iv, …)
  • "I": 大文字のローマ数字 (I, II, III, IV, …)
  • "1": 数字 (1, 2, 3, 4, …)
利用できるバージョン(HTML4.01以降) HTML4.01で非推奨
HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
使用例
<li type="I">リスト項目</li>

li要素のサンプル

順不同型リストの例

順不同型リストの例
<ul>
    <li>鳥モモ肉</li>
    <li>しょうが</li>
    <li>にんにく</li>
    <li>しょうゆ</li>
    <li>片栗粉</li>
    <li>揚げ油</li>
</ul>
ブラウザでの表示例

RERUN

番号順リストの例

番号順リストの例
<ol>
    <li>鳥モモ肉を一口大に切る</li>
    <li>しょうが、にんにく、しょうゆを混ぜてタレを作る</li>
    <li>タッパーに鶏肉とタレを入れてよく揉み込む</li>
    <li>タッパーを2時間程度冷蔵庫に入れておく</li>
    <li>鶏肉に片栗粉をまぶして、余分な粉をはたく</li>
    <li>中温の揚げ油で揚げる</li>
</ol>
ブラウザでの表示例

RERUN

value属性を使った例

value属性を使った例
<ol>
    <li value="3">タッパーに鶏肉とタレを入れてよく揉み込む</li>
    <li>タッパーを2時間程度冷蔵庫に入れておく</li>
    <li>鶏肉に片栗粉をまぶして、余分な粉をはたく</li>
    <li>中温の揚げ油で揚げる</li>
</ol>
ブラウザでの表示例

RERUN

仕様

HTML5.1
4.4.7. The li element
HTML5
4.4.7 The li element
HTML4.01
10.2 Unordered lists (UL), ordered lists (OL), and list items (LI)

関連する要素

関連するレッスン