ulタグ -順序のないリストを作成する｜HTML辞典

<ul>タグとは？

<ul>タグは、順序のないリスト（箇条書き）を作成するためのタグ です。
リストの各項目は <li>（リストアイテム）タグで囲む必要があります。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<ul> は開始タグ（<ul>）と閉じタグ（</ul>）の両方が必要です。

基本的な記述方法

<ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>オレンジ</li>
</ul>

使用できる主な属性

<ul>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。

属性名	説明	例
class	CSSのクラスを適用	<ul class="list-style">...</ul>
id	一意の識別子を設定	<ul id="menu-list">...</ul>
style	インラインスタイルを適用	<ul style="list-style-type: square;">...</ul>

CSSを使ったデザイン変更

リストのスタイルをカスタマイズしたい場合は、CSSを活用できます。

ul {
    list-style-type: square;
    padding-left: 20px;
}

適切な使用例

✅ <ul> を使って箇条書きを作成する

<ul>
    <li>猫</li>
    <li>犬</li>
    <li>ウサギ</li>
</ul>

✅ <ul> を使ってナビゲーションメニューを作成する

<nav>
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社概要</a></li>
        <li><a href="/services">サービス</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
    </ul>
</nav>

適切でない使用例（誤った使い方）


❌ リストの項目を <ul> なしで <li> だけで使うのはNG

<!-- NG: <li> を <ul> なしで使用 -->
<li>これは誤ったリスト項目です。</li>

✅ 正しい書き方（<ul> とセットで使用）

<ul>
    <li>これは正しいリスト項目です。</li>
</ul>

<ul>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<ul>	順序のないリストを作成	リストマーカー（●、■ など）を表示	メニュー、箇条書き
<ol>	順序のあるリストを作成	数字付きのリスト（1, 2, 3…）	手順の説明、ランキング
<dl>	定義リストを作成	<dt>（用語）、<dd>（説明）を使用	用語集、FAQの作成
<li>	リストの各項目	<ul> や <ol> の中で使用	リストアイテムの作成

使用上の注意点

✅ <ul> は順序のないリスト専用に使用する

• 順番が重要な場合は <ol> を使用するのが適切。

✅ <li> は <ul> や <ol> の中でのみ使用する

• <li> を単体で使用するのは避ける。

関連タグ

• <li> – リストの各項目
• <ol> – 順序のあるリスト
• <dl> – 定義リスト
• <nav> – ナビゲーションの作成

まとめ

<ul>タグは、HTML文書内で順序のないリスト（箇条書き）を作成するためのタグです。
<li> とセットで使用し、順番が重要でないリストを作成する際に適しています。