ul要素・ulタグとは

順不同なリスト ul要素

自分はブロック要素かインライン要素かブロック要素
含むことができる要素型1つ以上の li要素のみ
名称の由来unordered list (順不同) の省略

ulリストとは何か 他のリストとの違いは何か

HTMLにおいてリストを示す要素は「順不動のリストを表すul要素」「序列のあるリストを示すol要素」「定義リストを示すdt要素」の大きく3つに分けられます。

ul要素は箇条書きなどのように、項目を順不動・並列的に列挙するような場面で利用します。

ul要素の内部には、1つ以上のli要素を含むこと。
li要素以外の要素がul要素の直下に存在することは文法的に正しくありません。

HTML
<ul>
    <li>小麦粉200g</li>
    <li>砂糖10g</li>
    <li>牛乳1カップ</li>
    <li>卵3個</li>
    <li>塩コショウ</li>
</ul>

ul要素、li要素の見た目について

ブラウザにおいて、ul要素はインデント表示され、内包されるli要素には黒丸などのリストマーカーが表示される。これらの装飾はスタイルシートを利用する事で変更が可能です。

cssの「list-style-type」を利用する事でリストマーカーを「表示しない」「黒丸」「白丸」「四角」に変更可能。
cssの「list-style-image」を利用する事でリストマーカーに指定画像を使うことも可能です。

以下、スタイルシートでリストマーカーを変更した実例を示す。

  • 黒丸
  • 白丸
  • 表示しない
  • 四角
  • 自分で用意した画像(横向き三角の画像)

ulリストの中に別のリストを表示、リストの入れ子

ulリストの中に別のリストを表示(リストの入れ子)することも可能です。具体的なHTMLの記述としては、リスト項目のli要素の中に、入れ子となるul要素やol要素を記述します。

HTML
<ul>
    <li>リスト項目1</li>
    <li>リスト項目2
        <ul>
            <li>入れ子の項目2-1</li>
            <li>入れ子の項目2-2</li>
        </ul>
    </li>
    <li>リスト項目3</li>
</ul>

関連情報

コメントを残す

メールアドレスが公開されることはありません。