【第3章ドリル】HTMLの骨格作成：見出し・段落・強調

HTMLの設計図（DOCTYPEなど）ができたら、次はいよいよ中身の「骨格」を作ります。
見出し、段落、強調。これらは単なるデザインではありません。検索エンジンや読者に「この記事は何について書かれ、どこが重要か」を伝えるためのコミュニケーションツールです。

今回は、通常のクイズに加え、「こんな時、どのコードを書く？」という実践的な穴埋め問題も用意しました。全問正解を目指しましょう！

1. 見出しタグ (h1-h6) の鉄則

見出しタグは、記事の「目次」を作るためのものです。「文字を大きくするため」に使ってはいけません。本のような論理構造（タイトル→章→節）を意識し、レベルを飛ばさずに使うのがルールです。

やってみよう！見出しクイズ（10問）

見出しタグは、文字を装飾するためではなく、記事の「( 　　) 」を作るために存在します。

答えを見る

目次（論理的な構造）

（検索エンジンもこれを見て内容を理解します。）
「第1章」の次にいきなり「項（①）」が来るように、<h2> の直後に <h4> を使うのはNGです。このルールを何と言いますか？

答えを見る

レベルを飛ばさない

（必ず h2 → h3 → h4 と順番に使います。）
「この文字を大きくしたいから」という理由だけで見出しタグを使ってはいけません。見た目の調整は ( 　　) の役割だからです。

答えを見る

CSS
<h1> タグは、記事の主題を表すため、基本的に1ページにつき ( 　　) 回だけ使うのが鉄則です。

答えを見る

1 回

（本のタイトルと同じで、顔となるタグです。）
【コード穴埋め】記事の一番最初、メインタイトルを表示したい。

<[ ? ]>HTML完全ガイド</h1>

選択肢： A. title / B. head / C. h1

答えを見る

正解： C. h1

解説：記事の大見出し（タイトル）は h1 です。
【コード穴埋め】「第1章」の次にある「1-1. 歴史」という小見出しを作りたい。

<h2>第1章 HTMLとは</h2>
...本文...
<[ ? ]>1-1. HTMLの歴史</h3>

選択肢： A. h1 / B. h3 / C. h4

答えを見る

正解： B. h3

解説： h2（章）の下に含まれる節は h3 になります。
【コード穴埋め】一番小さい見出しレベルはどれ？

<[ ? ]>細かい補足</h6>

選択肢： A. h6 / B. h7 / C. p

答えを見る

正解： A. h6

解説：見出しタグは h1 から h6 まで存在します。
検索エンジンは、見出しタグの構造を読み取って、記事の何を正確に理解しようとしますか？

答えを見る

内容（何について書かれているか）
正しく見出しを使うことで、読者は記事の ( 　　) をするだけで全体像を把握できます。

答えを見る

拾い読み（流し読み）
【コード穴埋め】次の使い方はOK？NG？


<h3>こんにちは！</h3>

選択肢： A. OK / B. NG

答えを見る

正解： B. NG

解説：デザイン目的での使用はNGです。単なる強調ならCSSや他のタグを使いましょう。

2. 段落 (p) と改行 (br) の使い分け

文章のひとまとまりは <p> で囲みます。一方、<br> は詩や住所など「改行自体に意味がある時」に使います。スペース調整のための <br> 連打はご法度です。

やってみよう！段落・改行クイズ（10問）

<p> タグは "Paragraph" の略です。日本語で何という意味ですか？

答えを見る

段落
<p> タグで囲むと、ブラウザは自動的に上下に何を作ってくれますか？

答えを見る

余白（スペース）

（これにより読みやすいレイアウトになります。）
段落と段落の間をもっと広げたい時、<br> を連打するのは ( 　　) です。

答えを見る

絶対にNG（やってはいけない）
<br> の乱用は、特にどんなユーザーを混乱させますか？

答えを見る

音声読み上げソフトの利用者

（「改行、改行…」と読み上げられ、文脈が途切れてしまいます。）
【コード穴埋め】一般的な文章のブロックを作りたい。

<[ ? ]>昔々、あるところに...</p>

選択肢： A. br / B. text / C. p

答えを見る

正解： C. p

解説：文章の塊は <p>（パラグラフ）を使います。
【コード穴埋め】俳句のように、文の途中で意図的に改行したい。

<p>古池や<[ ? ]>蛙飛び込む<br>水の音</p>

選択肢： A. br / B. hr / C. p

答えを見る

正解： A. br

解説：文脈上の改行には <br> を使います。
【コード穴埋め】次のコードは良い？悪い？

<p>1つ目の話題</p>
<br>
<br>
<p>2つ目の話題</p>

選択肢： A. 良い / B. 悪い

答えを見る

正解： B. 悪い

解説：余白目的の連打です。余白はCSS（margin）で調整すべきです。
エディタでEnterキーを2回押して空白行を作っても、HTML上では意味を持ちません。文章の塊を分けるには必ず ( 　　) タグで囲む必要があります。

答えを見る

<p>
<br> は「Break」の略です。これは何の区切りを意味しますか？

答えを見る

改行
段落間の余白調整は、HTMLタグではなく ( 　　) で行うのが正解です。

答えを見る

CSS

3. 強調 (strong, em) で「声のトーン」を変える

HTMLの強調は、太字や斜体にするためではなく、「声のトーン」を変えるためのものです。「重要！」なら strong、「アクセント」なら em を使い分け、検索エンジンや機械に意図を伝えましょう。

やってみよう！強調タグクイズ（10問）

内容の「重要性」や「深刻さ」を伝えたい時（テストに出るよ！という時）に使うタグはどれですか？

答えを見る

<strong>
<strong> タグを使うと、一般的にブラウザでは見た目がどうなりますか？

答えを見る

太字
文章の中で、特定の単語に「アクセント」を置きたい時（私は"猫"が好きです）に使うタグはどれですか？

答えを見る

<em>

（Emphasisの略です。）
【コード穴埋め】記事の結論。「ここだけは覚えて！」という重要ワード。

結論：<[ ? ]>継続こそ力なり</strong>です。

選択肢： A. b / B. em / C. strong

答えを見る

正解： C. strong

解説：重要性を示すには strong を使います。
【コード穴埋め】会話のニュアンス。「いや、私は"犬が"好きなんです」

私は<[ ? ]>犬が</em>好きです。

選択肢： A. i / B. em / C. mark

答えを見る

正解： B. em

解説：文脈上のアクセントには em を使います。
【コード穴埋め】次のタグのうち、検索エンジンに「重要」という意味が伝わらない（見た目だけ）のタグは？

<[ ? ]>太字にするだけ</b>

選択肢： A. strong / B. b / C. em

答えを見る

正解： B. b

解説： b や i は意味を持たない装飾タグです。推奨されません。
<em> タグを使うと、一般的にブラウザでは見た目がどうなりますか？

答えを見る

斜体（イタリック）
強調タグを適切に使うことは、あなたの代わりに読者に ( 　　) を変えて語りかけるようなものです。

答えを見る

声のトーン
<b>（太字）や <i>（斜体）タグは、strong や em と違って何を持っていませんか？

答えを見る

意味（セマンティクス）
正しいタグを使うことは、未来の技術（新しい検索エンジンやデバイス）にも正しく内容を伝えるための「未来への( 　　) 」です。

答えを見る

投資

月影

日々の雑感

【HTML第3章】見出し・段落・強調タグをマスター！コード穴埋め付ドリル30問