レッスン2：文字を表示しよう
🎯 このレッスンで学ぶこと
- h1〜h6の見出しタグを使い分けられます。
- pタグで段落を作れます。
- brタグで改行、hrタグで区切り線を入れられます。
- strongタグで太字、emタグで斜体にできます。
📖 前回の復習（レッスン1）
- HTMLはウェブページの内容と構造を作る言語
- タグは
<タグ名>内容</タグ名>の形で書く - 画面に表示したいものはすべて
<body>の中に書く
📖 導入 — 文章にも「構造」がある
本や教科書を思い浮かべてください。大きな章タイトル、小さな見出し、本文…と、文章には「構造」がありますよね。
ウェブページも同じです。HTMLには文章の構造を表すためのタグがたくさん用意されています。このレッスンでは、よく使う基本のタグを学びましょう！
📝 見出し・段落・改行・区切り線
見出しタグ：`}> 〜 `}>
見出し（heading）を表示するタグです。<h1> がいちばん大きく、<h6> になるほど小さくなります。ページのタイトルには <h1>、章の見出しには <h2>、小見出しには <h3> を使うのが一般的です。<h1> は1ページに1つだけ使うのがおすすめです。
<h1>いちばん大きい見出し</h1>
<h2>2番目の見出し</h2>
<h3>3番目の見出し</h3>▶ プレビュー
・
<h1> はページに1つだけ使う（ページ全体のタイトル）・
<h2> は大きなセクションの見出し・
<h3> はその中の小セクション・h1 → h3 のように飛ばさない（必ず h2 を挟む）
本の目次と同じです。「第1章（h1）→ 1.1節（h2）→ 1.1.1項（h3）」の順番で使いましょう。
h1〜h6 は「重要度の順番」を表すタグです。文字の大きさを変えたいだけなら、CSSを使いましょう（後のレッスンで学びます）。見た目のために h3 を使う、などはNGです。
段落タグ：`}>
段落（paragraph）を表すタグです。文章のまとまりを <p> で囲むと、前後に自動で余白が入ります。
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。段落が変わると少し間が空きます。</p>▶ プレビュー
強調タグ：`}> / `}>
文章の中の重要な言葉を強調するタグです。
<strong>は太字で重要な言葉を表します。<em>は斜体で強調したい言葉を表します。
<p>プログラミングは<strong>楽しい</strong>です。</p>
<p><em>毎日</em>少しずつ練習しましょう。</p>▶ プレビュー
<strong> は「意味的に重要」、<b> は「見た目を太字にするだけ」です。検索エンジンは <strong> を重要な言葉として認識します。基本的には <strong> を使いましょう。
改行タグ：`}>
HTMLファイルの中で Enter を押して改行しても、ブラウザには反映されません。ブラウザで改行したいときは
<br> タグを使います。
段落の途中で改行したいときは <br> を使います。終了タグが不要な空要素（からようそ）です。
<p>1行目のテキスト<br>2行目のテキスト</p>▶ プレビュー
区切り線タグ：`}>
ページの内容をセクションで区切りたいときに使います。<br> と同じく、終了タグは不要な空要素です。
<p>ここまでが自己紹介です。</p>
<hr>
<p>ここからは趣味の話です。</p>▶ プレビュー
📝 リストタグ
順序なしリスト：`}> と `}>
箇条書きを作るときに使います。<ul>（unordered list = 順序なしリスト）の中に <li>（list item = リスト項目）を並べます。各項目の先頭に「・」が自動で付きます。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>▶ プレビュー
順序ありリスト：`}>
番号付きリストを作るときは <ol>（ordered list）を使います。自動で番号が振られます。手順や順位を表すときに便利です。
<ol>
<li>HTMLを学ぶ</li>
<li>CSSを学ぶ</li>
<li>JavaScriptを学ぶ</li>
</ol>▶ プレビュー
順番が重要なら
<ol>（手順、ランキング）、順番が関係ないなら <ul>（好きなもの一覧、材料リスト）を使いましょう。
💻 やってみよう！
VS Codeで my-practice フォルダを開き、lesson1で作った index.html をシングルクリックして編集してください。（ダブルクリックするとブラウザで開いてしまうので注意。シングルクリックするとVS Codeの編集画面が開きます）
前のレッスンで作った index.html を開いて、<body> の中を書き換えてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字を表示しよう</title>
</head>
<body>
<h1>HTMLの文字タグ練習</h1>
<h2>見出しの大きさ比べ</h2>
<h1>h1：いちばん大きい</h1>
<h2>h2：少し小さい</h2>
<h3>h3：さらに小さい</h3>
<hr>
<h2>段落と改行</h2>
<p>これは段落です。<br>ここで改行しました。</p>
<p>これは別の段落です。段落の間には自動で余白が入ります。</p>
</body>
</html>▶ プレビュー
自由課題: 自己紹介ページを作ろう
学んだタグを全部使って、自己紹介ページを作ってみましょう。以下の要素を入れてみてください:
<h1>で名前<h2>で「好きなもの」「趣味」などのセクション<ul>で好きなものリスト<p>と<strong>で自己紹介文<hr>でセクションの区切り
<!-- コメント --> と書くと、ブラウザには表示されないメモを残せます。コードの説明や一時的に非表示にしたい部分に使います。<!-- ここは後で書き換える --> ⚠️ よくあるミス
- 見出しの順番を飛ばす：
<h1>の次にいきなり<h4>を使うのはNGです。<h1>→<h2>→<h3>と順番に使いましょう。 - 改行したいのに <br> を使いすぎる：段落を分けたいときは
<p>タグを使いましょう。<br>は段落の途中で改行したいときだけ使います。 - <br> や <hr> に閉じタグを書いてしまう：
<br>と<hr>は空要素なので、</br>や</hr>は不要です。 - <li> を <ul> や <ol> の外に書く：
<li>は必ず<ul>か<ol>の中に書きましょう。単独で使うのはNGです。
📌 まとめ
| タグ | 役割 |
|---|---|
<h1>〜<h6> | 見出し。数字が小さいほど大きく表示される |
<p> | 段落。前後に余白が自動で入る |
<br> | 段落内の改行 |
<hr> | 水平の区切り線 |
<strong> | 重要な言葉を太字にする |
<em> | 強調したい言葉を斜体にする |
<ul> / <ol> | 箇条書き / 番号付きリスト |
<li> | リストの各項目 |
- ✅
<h1>は1ページに1つだけ使うのがおすすめ - ✅
<br>と<hr>は終了タグが不要 - ✅
<ul>は箇条書き、<ol>は番号付きリスト - ✅
<strong>は意味的に重要な言葉に使う
🚀 次のレッスンへ
次のレッスンでは、リンクと画像を使ってページをもっと豊かにする方法を学びます！
このレッスンは役に立ちましたか？
フィードバックありがとうございます！
⚠️ よくあるエラー
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- 文字化けする — charset の指定がない
- フォームの送信ボタンが動かない — type="submit" の書き忘れ