<ul>タグ《箇条書きリストを作る》-HTML-

ulタグ

ulタグは箇条書き(順番に意味を持たない並び)リストを作ります。

ユーエル

ul

リスト(箇条書き)を作る

文章が「○○と○○と○○と○○です」という時は箇条書きにした方が読みやすくなります。
「○○」のように、項目に順番の優位性がない部分を箇条書きリストとして表示するには、ulタグでマークアップします。

順番のあるリスト(番号項目)を作る場合は、olタグを使います。

ul要素の構成

<ul>~</ul>までをul要素といい、各リスト項目は<li>タグで記述します。

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

詳記(読み方) unordered list(アンオーダードリスト)
コンテンツモデル フローコンテンツ
カテゴリ グループ化
属性 グローバル属性
子要素にできるもの 0個以上のli要素

ul要素の前後には、デフォルト(初期状態)で1行分程度の隙間(margin)が入ります。
リスト項目の左側にも余白(margin-left)が入りますのでCSSで調整します。

ulの行頭文字は、・(中点)ですがCSS(list-style-type、list-style-image)で変更することができます。

サンプル

【表示例】

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

【HTML】

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

ulタグのヒント

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

ulタグ関連記事