HTML/CSS：見出しと段落
1学習の目的
- h1〜h6 の見出しを階層として使い分け、文書に構造を与えられるようになる。読み手にも検索エンジンにも伝わるページが作れる。
- 文章に意味を持たせるタグ（strong・em など）を使えるようになる。連続した空白が詰まるというHTML特有の挙動も理解する。
2基礎解説
| タグ | 意味 | 使いどころ |
|---|---|---|
| h1〜h6 | 見出しの階層 | 数字が小さいほど上位 |
| strong | 重要である | 意味として強い |
| em | 強調する | 語調を強める |
| blockquote | 引用 | 他所からの引用文 |
- 見出しは階層を飛ばさない。h1 の次は h2、その次が h3。h1 → h3 と飛ばすと文書の構造が壊れる。
- h1 はページに1つが原則。そのページ全体が何についてのものかを示す、最上位の見出し。
- strong と b は見た目が同じでも意味が違う。strong は「重要である」という意味を持ち、b は単に太字にするだけ。意味があるなら strong を使う。
- ⚠ 連続した空白は1つにまとめられる。あ い と3つ空けても、表示は あ い になる。改行も同じく空白1つとして扱われる。
- 間隔を空けたいときはCSSで余白を指定する（HT11）。空白文字を並べて調整するのは、HTMLでは通用しない。
現場使用例：記事の見出し構成、商品説明の強調、注意書きの明示。見出しの階層は検索エンジンがページを理解する手がかりにもなる。
<h1>ページ全体のタイトル</h1> <h2>大きな区切り</h2> <p>本文です。</p> <h3>その中の小見出し</h3> <p>さらに詳しい説明。</p> <h2>次の区切り</h2> <!-- 文字に意味を付ける --> <p>これは<strong>重要な</strong>お知らせです。</p> <p><em>ぜひ</em>ご確認ください。</p> <!-- 引用 --> <blockquote> <p>引用した文章をここに書きます。</p> </blockquote> <!-- 区切り線 --> <hr> <!-- ⚠ 空白は詰まる --> <p>あ い</p> <!-- 表示は「あ い」 -->
3基本ドリル（10問）
h1・h2・h3がそれぞれ正しい
数字が小さいほど上位の見出し。順番に書く。
<h1>メインタイトル</h1> <h2>サブタイトル</h2> <h3>小見出し</h3>
見出しは階層を表す。h1が章、h2が節、h3が項——本の目次と同じ考え方で構造を作る。
A. h3 B. h5 C. h6 D. h9 選択★☆☆無料
解答 == C
6段階の階層が用意されている。
C
h1〜h6 の6段階。ただし実際にh4以降まで使うページは少なく、h3程度までで十分なことが多い。
strong の中身が「重要」
<strong>〜</strong> で囲む。段落の一部だけを囲める。
<p>これは<strong>重要</strong>なお知らせです。</p>
strong は「重要である」という意味を持つ。太字になるのは結果であって、目的ではない。
<p>これは<____>強調</____>です。</p>
em の中身が「強調」、斜体になっている
emphasis（強調）の略。2文字。
em
em は語調を強める。読み上げソフトでは音の調子が変わり、視覚的には斜体になる。
A. 空白4つのまま B. 空白1つに詰まる C. 空白が消える D. エラーになる 選択★☆☆無料
解答 == B
HTMLは連続する空白をどう扱うか。
B
連続した空白・タブ・改行はすべて空白1つにまとめられる。これを知らないと「空白で位置を調整しよう」として失敗する。
blockquote の中身が「継続は力なり」
<blockquote>〜</blockquote> で囲む。中に p を入れることも多い。
<blockquote> <p>継続は力なり</p> </blockquote>
引用であることを明示すると、自分の意見と他人の言葉が区別される。左右に余白が付くのはブラウザの既定スタイル。
<p>前半</p> <____> <p>後半</p>
hr が1個存在する
horizontal rule（水平線）の略。2文字。閉じタグは不要。
hr
hr は話題の区切りを表す。br と同じく閉じタグが不要な空要素。
A. 見た目が違う B. strong は「重要」という意味を持つが b は見た目だけ C. b のほうが新しい D. 違いはない 選択★★☆広告解放
解答 == B
どちらも太字になるが、意味が違う。
B
意味があるなら strong、装飾だけなら b。読み上げソフトや検索エンジンは strong を「重要」と認識するが、b は単なる見た目として扱う。
h2が「注意事項」、strongが「事前予約」
見出しの後に段落を書き、その一部を strong で囲む。
<h2>注意事項</h2> <p>必ず<strong>事前予約</strong>をお願いします。</p>
見出しで区切り、本文の中で重要な部分を強調する——実際のWebページで最も多い組み合わせ。
h1が1個、h2が2個、h3が1個
h1 → h2 → h3 の順に階層を下げる。h2 が2つあってもよい。
<h1>記事タイトル</h1> <h2>導入</h2> <p>この記事の概要です。</p> <h2>本論</h2> <h3>詳細</h3> <p>詳しい説明です。</p>
h2 は何度使ってもよい。同じ階層の見出しが並ぶのは自然なこと。ただし h1 は1つに留めるのが原則。
4実践シナリオ（5問）
h1・h2・strongがそれぞれ正しい
見出しを2階層作り、段落の一部を strong で囲む。
<h1>お知らせ</h1> <h2>営業時間変更のご案内</h2> <p>12月より<strong>10:00開店</strong>に変更いたします。</p>
変更点を strong で示すことで、流し読みする読者にも重要な情報が伝わる。
表示は「東京 大阪」（空白1つ）
空白を5つ書いても、表示は変わらない。
<p>東京 大阪</p>
空白5つが1つに詰まった。位置の調整をしたいなら、空白ではなくCSSの余白（HT11）を使う。
h2とblockquote内のpが正しい
blockquote の中に p を入れる形が標準的。
<h2>お客様の声</h2> <blockquote> <p>とても使いやすかったです。</p> </blockquote>
引用は blockquote で囲むのが正しい書き方。単に段落にすると、自分が書いた文章と区別が付かない。
h2が1個、h3が2個、pが2個
h2 の下に h3 を2つ並べ、それぞれに段落を付ける。
<h2>よくある質問</h2> <h3>配送について</h3> <p>ご注文から3営業日以内に発送いたします。</p> <h3>返品について</h3> <p>商品到着後7日以内であれば返品可能です。</p>
同じ階層の項目は同じレベルの見出しで揃える。配送と返品は対等な話題なので、どちらも h3 にする。
h2が2個、hrが1個、pが2個
hr で話題を視覚的に区切る。
<h2>前半の内容</h2> <p>前半の説明です。</p> <hr> <h2>後半の内容</h2> <p>後半の説明です。</p>
hr は「話題が変わる」ことを示す。見出しだけでは伝わりにくい大きな区切りに使うと効果的。
5仕上げ課題
body の内容（この順序で）
① h1：Web制作サービス
② 段落：お客様の想いを形にします。
③ h2：サービス内容
④ h3：ホームページ制作
⑤ 段落：スマホ対応は標準で含まれます。（「標準で」を strong で強調）
⑥ h3：保守運用
⑦ 段落：月額1万円から承ります。
⑧ 区切り線（hr）
⑨ h2：お客様の声
⑩ 引用（blockquote の中に段落）：丁寧に対応いただきました。
要素の数：h1×1、h2×2、h3×2、p×4（引用内を含む）、strong×1、hr×1、blockquote×1 総合★★★広告解放
すべての要素の数と内容が一致
見出しは h1 → h2 → h3 の階層を守る。段落は④⑦⑩と②で計4つ。strong は⑤の中に入れる。
<h1>Web制作サービス</h1> <p>お客様の想いを形にします。</p> <h2>サービス内容</h2> <h3>ホームページ制作</h3> <p>スマホ対応は<strong>標準で</strong>含まれます。</p> <h3>保守運用</h3> <p>月額1万円から承ります。</p> <hr> <h2>お客様の声</h2> <blockquote> <p>丁寧に対応いただきました。</p> </blockquote>
このページは、見出しだけを拾い読みしても内容が分かる。「Web制作サービス」→「サービス内容」→「ホームページ制作／保守運用」→「お客様の声」——階層をたどるだけで全体像がつかめる。これが正しい見出し構造の価値だ。
もし h1 の次にいきなり h3 を書いたり、大きく見せたいという理由だけで h1 を複数使ったりすると、この構造が崩れる。見出しは「文字の大きさ」ではなく「階層」を指定するものだと理解しておくと、迷わなくなる。大きさを変えたいだけならCSSで調整すればよい。
<strong>標準で</strong> にも意味がある。「スマホ対応は標準で含まれる」——ここが料金体系の要点であり、読み飛ばしてほしくない箇所だ。strong は「太字にしたい場所」ではなく「重要な場所」に使う。
次章ではリンクと画像を学ぶ。ページ同士をつなぎ、写真を載せられるようになると、Webページらしさが一気に増す。