Webページで箇条書きをしたいんですが、どうすればいいんですか？Wordでよく見る「・」みたいなリストを作りたくて。
Webページでリストを作るときは、HTMLの専用タグを使うんだ。箇条書きなら<ul>（unordered list）、番号付きなら<ol>（ordered list）を使うよ。
なんでWordみたいに「・」を直接書いちゃダメなんですか？
実は、直接「・」を書くよりもずっと便利なんだ。HTMLのリストタグを使うと、ブラウザが自動的に美しいリストを表示してくれるし、後からスタイルも簡単に変更できる。何より、検索エンジンにも「これはリストです」と正確に伝えられるんだよ。
箇条書きリスト（ul）の基本
HTMLで箇条書きリストを作るには、<ul>（unordered list）タグを使用します。このタグは、順序に関係なく項目を整理したい場合に使用します。
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
囲む親要素
示す子要素
自動追加
基本構造のポイント
<ul>タグ “Unordered List”の略で、箇条書きリスト全体を囲む親要素<li>タグ “List Item”の略で、各項目を囲む子要素（必ず<ul>内に配置）- 自動装飾 ブラウザが「・」（ビュレット）を自動的に表示
- 入れ子可能
<li>の中に新しい<ul>を入れて階層構造も作成可能
箇条書きリストを試してみよう
以下のエディターで箇条書きリストの基本的な書き方を試してみてください。
- 文言を変えたり、
<li>タグを追加・削除してみると、リストの構造がより理解しやすくなります。
<ul>タグの基本は<li>要素を並べることですが、実は他にも様々な使い方や組み合わせが可能です。
<ul>
<li>基本的な項目</li>
<li>
<strong>強調したい項目</strong>
</li>
<li>
<a href="#">リンクも含められます</a>
</li>
</ul>| 拡張機能 | 説明 |
|---|---|
| 入れ子リスト | <ul>の中に別の<ul>を入れて階層構造を作成 |
| HTMLタグの併用 | <strong>、<a>などのタグと組み合わせて表現力向上 |
| CSSスタイリング | マーカーの種類や色、配置などを自由にカスタマイズ |
| JavaScript連携 | 動的にリスト項目を追加・削除する機能を実装 |
これらの応用テクニックは後の章で詳しく学習します。まずは基本的な<ul>と<li>の組み合わせをしっかり覚えましょう。
番号付きリスト（ol）の基本
手順やランキングなど、順序が重要な情報にはordered list（<ol>）を使います。ブラウザが自動的に番号を振ってくれるため、項目の追加や削除が簡単です。
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
囲む親要素
示す子要素
と番号を自動付与
olタグの基本構造のポイント
<ol>タグ 順序付きリスト全体を囲む親要素で、番号付きリストであることを宣言<li>タグ 各項目を示す子要素（ulタグと共通の要素）- 自動番号振り ブラウザが1, 2, 3…と自動で番号付け
- 番号管理不要 項目を追加・削除しても番号が自動調整
番号付きリストを試してみよう
以下のエディターで順序付きリストの基本的な書き方を試してみてください。
- 文言を変えたり、
<li>タグの順番を入れ替えたりしてみると、リストの構造がより理解しやすくなります。
<ol>タグの基本は1, 2, 3…の数字ですが、実は他にも様々な「属性」を追加して、番号の表示方法をカスタマイズできます。
<ol type="A" start="3">
<li>項目C</li>
<li>項目D</li>
<li>項目E</li>
</ol>| 属性 | 説明 |
|---|---|
type | 番号の種類を指定（1, A, a, I, i） |
start | 開始番号を設定 |
reversed | 番号を逆順（降順）で表示 |
これらの応用テクニックも覚えておくと便利です。まずは基本的な<ol>と<li>の組み合わせをしっかり身につけましょう。
リストの使い分け
HTMLの<ul>と<ol>は見た目だけでなく、情報の意味と構造を表現する重要な役割を担っています。
以下の具体例を参考に、どちらのリストタイプが適切かを判断してみましょう。
- 牛乳
- パン
- 卵
- りんご
- 野菜を洗う
- 野菜を切る
- フライパンで炒める
- 調味料を加える
使い分けの基準とメリット
- ulを使う場面 商品の特徴、メンバーリスト、お知らせなど順序に意味がない情報
- olを使う場面 作業手順、ランキング、チュートリアルなど順序が重要な情報
- ユーザビリティの向上 読者が情報の性質を直感的に理解できる
- アクセシビリティの確保 スクリーンリーダーがリストの種類を正確に読み上げ
- SEO効果 検索エンジンがコンテンツの構造を適切に解釈
- 保守性の向上 後からCSSでスタイルを変更する際の柔軟性
アクセシビリティとベストプラクティス
リストは意味と構造を支える重要な要素です。見た目だけを合わせるために無理に<div>や<span>で代用したり、手動で「1. 」「・」を打つのは避けましょう。
- ネストは浅く 2〜3階層までを目安にし、それ以上は別セクション化や表現方法の再検討
- 一貫した項目形 各
<li>の書き始めは文型・語尾をそろえると読みやすい - 説明のまとまり 長文になる場合は
<li>内で段落(<p>)を使って整理 - 役割の明確化 見出しの直後にリストを置くときは、そのリストが何を列挙しているか1行で導入を書く
- 支援技術対応 スクリーンリーダーはリストの項目数を読み上げるので、不要な入れ子や装飾目的のリスト化を避ける
理解度チェッククイズ
リストの基本をしっかり覚えたか、クイズで確認してみましょう。
リストの基本ミニクイズ
<ol>
<li>卵を割る</li>
<li>混ぜる</li>
<li>焼く</li>
</ol>まとめ
リストって、単純に「・」や番号を付けるだけじゃなくて、ちゃんと使い分けることで情報の意味も伝えられるんですね。
買い物リストには<ul>、料理の手順には<ol>みたいに、内容に応じて選ぶのが大切なんだ。読者にとっても、検索エンジンにとっても親切になりますね。
そうなんだ！HTMLリストの魅力は、自動で装飾してくれる便利さだけじゃなく、情報に適切な構造と意味を与えられることなんだ。今日学んだ<ul>と<ol>の使い分けは、これからWebサイトを作る上でとても重要な基礎になるよ。
CSSでスタイルも後から変更できるから、最初は意味重視でタグを選んで、デザインは後から考えればいいんですね。
そういうこと。それが適切な情報設計の考え方だよ。次回は、今日学んだリストをさらに発展させて、階層構造を作る「入れ子リスト」について学んでいこう。
- 適切な選択 ulは順序なし、olは順序ありで使い分ける
- シンプル構造
<ul>や<ol>で囲い、各項目は<li>で表現 - 自動管理 ブラウザが装飾や番号付けを自動で処理
- アクセシビリティ 正しいリストタグで誰にでも理解しやすいページに
- 将来への備え CSSで後からスタイルを柔軟に変更可能
- 意味の重視 見た目よりも情報の構造と意味を優先した実装
次回は、リストの中にリストを作る「入れ子のリスト」について学習します。より複雑な情報構造を表現する方法を習得しましょう！