ul li 順不同リスト コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

ul,li要素の概要

順不同のリストHTML
<ul><li>~</li>…<li>~</li></ul>
目的 順不同のリスト、箇条書きや条件など
関連 <ol> <li> <dl> <dt> <dd>
  • オレンジジュース
  • ぶどうジュース
  • ウーロン茶
  • ジャスミン茶
<ul>
    <li>オレンジジュース</li>
    <li>ぶどうジュース</li>
    <li>ウーロン茶</li>
    <li>ジャスミン茶</li>
</ul>

属性

固有属性なく、グローバル属性のみ

注意点

入れ子構造

入れ子構造にする場合は ul – li – ul -li とすること。 ul – ul -li としてはならない。

<ul>
    <li>ジュース</li>
    <ul> 
        <li>オレンジジュース</li>
        <li>ぶどうジュース</li>
    </ul> 
    <li>お茶</li>
    <ul> 
        <li>ウーロン茶</li>
        <li>ジャスミン茶</li>
    </ul> 
</ul>
  • ジュース
    • オレンジジュース
    • ぶどうジュース
  • お茶
    • ウーロン茶
    • ジャスミン茶

CSSデザイン