レッスン3: HTMLで文章を整える！リスト・区切り・改行タグを学ぼう
リストの作成方法と、改行・区切り線タグの使い方を学びましょう。
🎯 学習目標
- リスト（箇条書き、番号付き）を使えるようになる
- 改行や区切り線を使って、見やすいレイアウトを作れるようになる
📘 目次
📚 レッスン
1. 箇条書きリスト（<ul>, <li>）
「unordered list（順序なしリスト）」の略で、点付きの箇条書きを作れます。
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>みかん</li>
</ul><ul>タグでリスト全体を囲む<li>（list item）で項目を記述
2. 番号付きリスト（<ol>, <li>）
順序をつけたいときは番号付きリスト（ordered list）を使います。
<ol>
<li>起床</li>
<li>朝食</li>
<li>通勤</li>
</ol>- 自動的に1. 2. 3.…と番号が付きます
3. 改行タグ <br>
文章の中で改行したいときに使います。
<p>
住所：東京都<br>
千代田区<br>
1-1-1
</p><br>は単独タグ（閉じタグ不要）- あくまで「段落の中での改行」に使います
4. 区切り線タグ <hr>
ページ内でセクションを区切りたいときなどに使います。
<p>上の内容</p>
<hr>
<p>下の内容</p>- 横線を表示して、見た目を区切ります
<hr>も単独タグです
今日のまとめ
- 箇条書き：
<ul>,<li> - 番号付きリスト：
<ol>,<li> - 改行：
<br>（段落中に改行） - 区切り線：
<hr>（セクション区切りに便利）
📚 リファレンス
このレッスンで学んだHTMLタグの詳細については、リファレンスページで確認できます。
✍️ 演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。
1. 旅行の持ち物リストを作ろう！
以下のテンプレートを使って、旅行の持ち物リストを作成してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旅行の持ち物リスト</title>
</head>
<body>
<h1>旅行の持ち物リスト</h1>
<h2>必需品</h2>
<ul>
<li>パスポート</li>
<li>現金・クレジットカード</li>
<li>スマートフォン</li>
</ul>
<h2>ステップ</h2>
<ol>
<li>ホテルを予約する</li>
<li>荷物を準備する</li>
<li>空港へ向かう</li>
</ol>
<h2>メモ</h2>
<p>
飛行機は朝9時発です。<br>
チェックインは2時間前までに！
</p>
<hr>
<p>楽しい旅行になりますように！</p>
</body>
</html>右側のエディタでこのテンプレートを試してみましょう。自分の持ち物リストにカスタマイズしてもOKです！
✅ 理解度チェック
クイズに正解すると、このレッスンは「完了済み」として記録されます。
📘 次回予告
HTMLの入れ子構造（親要素・子要素）を学びます。ページの構造をより正確に理解して、より良いHTMLを書く力を身につけましょう！