HTML5タグ虎の巻

liタグ

liは、リストの要素を作成するタグです。

解説

liタグは、ulタグや olタグの子要素として使用します。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
なし
コンテキスト
(親カテゴリ)
ulタグolタグ
コンテンツ・モデル
(子カテゴリ)
フロー・コンテンツ

属性

liタグには以下の属性が指定できます。

【属性】
属性説明
valueリスト項目の順序を指定する
(例)value="1"
 ※olタグ内で使用される場合のみ有効です。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

順序のないリスト(ul)を作成

<ul>
  <li>いぬ</li>
  <li>ねこ</li>
  <li>うさぎ</li>
</ul>
  • いぬ
  • ねこ
  • うさぎ

順序のあるリスト(ol)を作成

<ol>
  <li>水星</li>
  <li>金星</li>
  <li>地球</li>
  <li>火星</li>
  <li>木星</li>
</ol>
  1. 水星
  2. 金星
  3. 地球
  4. 火星
  5. 木星

順序のあるリスト(ol)を作成(番号を指定)

<ol>
  <li value="4">火星</li>
  <li value="1">水星</li>
  <li value="2">金星</li>
  <li value="5">木星</li>
  <li value="3">地球</li>
</ol>
  1. 火星
  2. 水星
  3. 金星
  4. 木星
  5. 地球

備考

  • liは「list item」の略です。

関連項目

  • ul:順序のないリストを作成する
  • ol:順序のあるリストを作成する