概要

<ul>（順不同リスト）、<ol>（順序付きリスト）、<li>（リスト項目）は、リスト構造を作成するためのHTMLタグです。
情報の整理や箇条書き、手順説明など、視覚的にも論理的にも構造化された表現に使われます。

基本的な使い方

See the Pen imgタグについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

<ol>
  <li>ステップ1</li>
  <li>ステップ2</li>
</ol>

<ul> は「箇条書きリスト」、<ol> は「番号付きリスト」として表示され、<li> はそれぞれの項目を示します。

出力される内容の例

• 項目1  
• 項目2

1. ステップ1  
2. ステップ2

役割とメリット（定義リスト形式）

視認性の向上

箇条書きによって情報が整理され、読みやすくなります。

構造的表現

順序や階層を持つ情報を明確に伝えることができます。

アクセシビリティ

スクリーンリーダーでもリスト構造が認識されやすく、情報伝達の精度が上がります。

柔軟なデザイン

CSSを使ってリストスタイルを自由に変更できるため、デザインの幅が広がります。

注意点

• <li> は必ず <ul> または <ol> の内側に記述する必要があります。
• ネスト（入れ子）リストを使用する際は、インデントやスタイルの調整に注意しましょう。
• 装飾目的のみでリストを使うと、アクセシビリティの面で問題が生じる可能性があります。
• デフォルトスタイル（マーカーや番号）はCSSで制御可能ですが、過剰な変更は可読性を損なう可能性があります。

まとめ

<ul> / <ol> / <li> は、情報を整理し、視覚的・論理的に明確に伝えるために不可欠なHTMLタグです。
基本を押さえたうえでCSSとの組み合わせにより、読みやすく洗練された表現が可能となります。