ulタグの使い方やCSSカスタマイズ方法をわかりやすく解説

ulの概要

ulタグの基本的な使い方

以下の例では、ulタグを使って基本的な箇条書きリストを作成しています。

<ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>ぶどう</li>
</ul>

実行例：

• りんご
• バナナ
• ぶどう

ulタグの応用：ネストされたリスト

ulタグを入れ子にすることで、階層的なリストを作成できます。

<ul>
    <li>果物
        <ul>
            <li>りんご</li>
            <li>バナナ</li>
            <li>ぶどう</li>
        </ul>
    </li>
    <li>野菜
        <ul>
            <li>にんじん</li>
            <li>キャベツ</li>
        </ul>
    </li>
</ul>

実行例：

• 果物
  • りんご
  • バナナ
  • ぶどう
• 野菜
  • にんじん
  • キャベツ

注意事項

• リストの各項目はliタグで囲む必要がある。
• デフォルトではリストマーカーは黒い丸（●）だが、CSSで変更可能。
• リストのインデントはブラウザごとに異なるため、CSSで調整するとよい。

よくある質問

Q: ulタグとolタグの違いは？

A: ulタグは順序のないリスト（●）、olタグは順序のあるリスト（1. 2. 3.）を作成します。

Q: ulタグ内にテキストを直接記述できますか？

A: いいえ、リストの項目はすべてliタグで囲む必要があります。

Q: リストマーカーを非表示にするには？

A: CSSのlist-style-type: none;を使用すると、マーカーを非表示にできます。

Q: ulタグの中に他の要素（画像やリンク）を入れることはできますか？

A: はい、リスト項目（li）の中に画像やリンクを入れることができます。

Q: ulタグのリストを横並びにできますか？

A: はい、CSSのdisplay: flex;やdisplay: inline-block;を使うことで可能です。

まとめ

• ulタグは、順序のないリストを作成するためのタグ。
• リスト項目はliタグで囲む必要がある。
• ネスト（入れ子）することで階層的なリストが作成可能。
• CSSを使用して、リストマーカーの種類やデザインを変更できる。