HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<ul>
非順序リスト（Unordered List）要素。順序が重要でない項目のリストを作成します。
info
概要
<ul> 要素（非順序リスト要素）は、項目間に特定の順序がない、箇条書きのリストを作成するために使用されます。各リスト項目は必ず <li> (リストアイテム) 要素で囲む必要があります。
ナビゲーションメニューや単純な箇条書きなど、ウェブコンテンツで非常に頻繁に使用される基本的な構造要素です。
play_circle
デモ (静的表示)
HTML (Source)
<ul>
<li>コーヒー</li>
<li>紅茶</li>
<li>緑茶</li>
</ul>
<ul style="list-style-type: square;">
<li>項目A</li>
<li>項目B</li>
</ul>
Preview (Result)
- コーヒー
- 紅茶
- 緑茶
- 項目A
- 項目B
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| compact | 【廃止】リストをよりコンパクトに表示するようブラウザに示します。HTML5では廃止され、CSSで代替すべきです。 |
| type | 【廃止】リストマーカーの形式を指定します（例: disc, circle, square）。HTML5では廃止され、CSSの list-style-type プロパティで代替すべきです。 |
code
実用例
1. シンプルな箇条書きリスト
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
2. ナビゲーションメニューの作成 (CSSでの装飾を前提)
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
3. リストの入れ子（ネスト）
<ul>
<li>飲み物
<ul>
<li>温かいもの</li>
<li>冷たいもの</li>
</ul>
</li>
<li>食べ物</li>
</ul>
lightbulb
知っておくべき重要事項
info
順序の有無
リストの項目に順序が**ない**（例: 買い物リスト、特徴の羅列）場合は
リストの項目に順序が**ない**（例: 買い物リスト、特徴の羅列）場合は
<ul> を、順序が**ある**（例: 手順、ランキング）場合は <ol> (順序リスト) を使用してください。意味的に正しい要素を選ぶことが重要です。
accessibility_new
セマンティクス（意味付け）
<ul> はリスト構造を意味付けします。単に箇条書きのデザインが必要なだけで、論理的なリスト構造ではない場合は、<div> や <p> 要素を使用することを検討してください。ただし、多くの場合、箇条書きはリストとしてマークアップするのが適切です。