ul要素・ulタグとは

順不同なリスト　ul要素

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

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

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

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

<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要素を記述します。

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

関連情報

• li要素・liタグとは
• ol要素・olタグとは
• dl要素・dlタグとは