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属性を使った例
<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
