<li>タグ《リスト項目を作る》-HTML-

liタグ

liタグはul、ol要素の中にリスト項目(箇条書き)を作成します。

エルアイ

li

リスト項目を作る

liタグは<li>(開始タグ)と</li>(終了タグ)の中に文章を記述し1つのリスト項目となります。

</li>(終了タグ)は、次にli要素が続く場合、li要素が親要素内の最後の場合に省略することも可能ですが、後々どの部分が終了なのか分からなくりますので基本的に省略しないほうがよいです。

ul、ol要素はリスト行頭の表示方法を指定し、li要素でリストの内容(テキストなど)を指定します。
ul:中点(・)は順不同、ol:番号(1,2・・・)は順序のあるリストを作ります

liタグの要素

<li>~</li>までをli要素といいます。

属性は開始タグに半角スペースで区切った後に設定します。

詳記(読み方) list item(リストアイテム)
コンテンツモデル フローコンテンツ
カテゴリ グループ化
属性 グローバル属性
value属性(ol要素の子要素の場合、記述例:value=”整数”)

サンプル(ul要素リスト)

【表示例】

  • サンプルリスト1
  • サンプルリスト2
  • サンプルリスト3

【HTML】

<ul>
  <li>サンプルリスト1</li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
</ul>

親要素がol要素の場合、li要素のvalue属性に任意の開始番号を指定することができます。

サンプル(ol要素リスト)

【表示例】

  1. サンプルリスト1
  2. サンプルリスト2
  3. サンプルリスト3

【HTML】

<ol>
  <li>サンプルリスト1</li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
</ol>

【表示例】(li要素のvalue属性で開始番号を101に指定)

  1. サンプルリスト1
  2. サンプルリスト2
  3. サンプルリスト3
  4. サンプルリスト4
  5. サンプルリスト5

【HTML】

<ol>
  <li value="101">サンプルリスト1</li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
  <li value="401">サンプルリスト4</li>
  <li>サンプルリスト5</li>
</ol>

liタグのヒント

li要素で作った項目は、上下の間が詰まって見えることがあります。項目と項目の間を少し開ける場合は、margin、line-heightなどで間を指定します。

li要素のvalue属性を省略すると、前のli要素に続く番号となります。

liタグ関連記事