【HTML入門ドリル】ブロガーのためのHTML基礎知識・定着クイズ
前回の記事「ブログ執筆のためのHTML入門：なぜブロガーにHTML知識が必要なのか？」では、HTMLの概要と、ブロガーがHTMLを学ぶ強力なメリットについて解説しました。
今回は、その大切な知識を「記憶に定着させる」ための実践ドリルです。簡単な解説のすぐ後にクイズを用意しました。「わかる」を「できる」に変えるために、ぜひ全問正解を目指してチャレンジしてみてください！
1. Webページの「家づくり」役割分担クイズ
Webページは「家づくり」に例えられることを学びました。HTMLは「骨格」、CSSは「デザイン」、JavaScriptは「機能」でしたね。この基本的な役割分担をしっかり覚えて、Webの全体像を掴みましょう。
やってみよう！Webの役割分担クイズ（10問）
- Webページの「骨格」や「構造」（柱や梁）を定義する言語は ( S ) です。
答えを見る
HTML (HyperText Markup Language)
（これがすべての土台となります。）
- Webページの「デザイン」や「装飾」（壁紙やインテリア）を担当する言語は ( ) です。
答えを見る
（「この文字は赤くする」などを指定します。）
- Webページの「機能」や「動き」（自動ドアや家電）を担当する言語は ( S ) です。
答えを見る
（「ボタンを押すとメニューが開く」などを担当します。）
- 「この記事はここが見出しで、ここが段落です」と文章の構造を示すのは ( S ) の役割ですか？
答えを見る
HTML
（HTMLは文章の「意味」や「構造」を定義します。）
- 「見出しの文字を大きく、青色にする」といった装飾を行うのは ( S ) の役割ですか？
- 「画像スライドショーを自動で動かす」といった「動き」を加えるのは ( S ) の役割ですか？
答えを見る
（HTMLとCSSだけでは作れない「動的な機能」を実現します。）
- HTMLとは、( ) Markup Language の略ですか？
答えを見る
HyperText (ハイパーテキスト)
（ページ間を連携＝リンクできる高機能なテキスト、という意味です。）
- どんなに素敵なデザインや機能も、しっかりとした ( ) がなければ成り立ちません。
答えを見る
骨格 (HTML)
（土台であるHTMLが最も重要です。）
- 文章の「構造」を定義するのは ( ) 、「装飾」を定義するのは ( S ) です。
答えを見る
構造：HTML、装飾：CSS
- 家づくりに例えた時、「設計図」そのものに当たるのは ( S ) です。
答えを見る
HTML
（家の設計図がなければ、デザインも機能も追加できませんね。）
2. ブロガーがHTMLを学ぶメリット・クイズ
HTMLを知らなくても記事は書けます。しかし、HTMLの基本を知ることで、あなたのブログはワンランク上のステージに進むことができます。その「3つの強力な理由」を思い出してみましょう。
やってみよう！HTMLのメリットクイズ（10問）
- ビジュアルエディタのボタンだけではできない、特定の文章を「ハイライト付きのボックスで囲む」ことなどが可能になるのは、HTMLを学ぶ理由のどれに当てはまりますか？
答えを見る
① 表現の自由度が格段にアップする
（「ここをもう少しだけこうしたい！」が実現できます。）
- 「記事をコピペしたらレイアウトが崩れた！」という時、慌てずに原因を突き止め、自分で修正できるようになるのは、どのメリットですか？
答えを見る
② トラブルに強くなる
（ブログ運営の大きな安心材料になります。）
- 見出しの正しい使い方など、HTMLのルールを守ることで、検索エンジンに記事の内容を正確に伝え、検索順位の向上に貢献できます。これを何の対策と呼びますか？
- Googleなどの検索エンジンは、( ) の構造を読んで「この記事が何を伝えたいのか」を理解しています。
答えを見る
HTML
（そのため、HTMLのルールを守ることがSEOにつながります。）
- アフィリエイト広告のコードを、記事の「意図した場所」に「正確に」配置するためには、( S ) の知識が役立ちます。
答えを見る
HTML
（これもメリット①「表現の自由度アップ」の一つです。）
- 予期せぬレイアウト崩れが起こった時、HTMLの知識がないと ( S ) が特定できず、修正が困難です。
答えを見る
原因
（HTMLが分かれば、どの部分の構造がおかしいのかを推測できます。）
- ブロガーがHTMLを学ぶべき3つの理由とは、「表現の自由度アップ」、「トラブルに強くなる」、そして「( S ) に強くなる」です。
答えを見る
- より多くの読者にあなたの記事を届ける（＝検索順位を上げる）ために役立つのは、HTMLの ( S ) ルールを守ることです。
答えを見る
構造 (ルール)
（例えば、見出しを正しく使うことです。）
- 「他のブログと少し差をつけたい」という（ ）に関する欲求は、HTMLの知識で満たすことができます。
答えを見る
デザイン (や表現)
- HTMLの知識は、ブログ運営における ( ) と ( ) を高めてくれる強力な武器です。
答えを見る
自由度、安心材料 (トラブル耐性)
（どちらか一方、または両方の意味が入っていればOKです。）
3. HTMLの三大要素（予告）クイズ
次回の記事では、HTMLを構成する最も重要な3つの基本用語「タグ」「要素」「属性」について学びます。ここではその「さわり」だけをクイズにしてみましょう！
やってみよう！基本用語クイズ（10問）
<p>や<h1>のように、<と>で囲まれた「目印」のことを何と呼びますか？答えを見る
タグ
（これがHTMLの基本部品です。）
<p>のように「ここから段落が始まる」ことを示すタグを ( S ) タグと呼びます。答えを見る
開始タグ
</p>のように「ここで段落が終わる」ことを示すタグを ( S ) タグと呼びます。答えを見る
終了タグ
（スラッシュ
/が入るのが特徴です。）- 「開始タグ」から「終了タグ」までで囲まれた、ひとまとまり全体（例:
<p>こんにちは</p>）を何と呼びますか？答えを見る
要素
（HTMLは「要素」の集まりでできています。）
- タグの中に追加情報を書き込むことで、要素に「設定」を加えることができます。この追加情報を何と呼びますか？
答えを見る
属性
<img src="image.jpg">という画像タグにおいて、「src="image.jpg"」の部分は何と呼ばれますか？答えを見る
属性
（
srcという属性にimage.jpgという値を設定しています。）<a href="https://example.com">というリンクタグにおいて、リンク先のURLを指定している属性はどれですか？答えを見る
href (エイチレフ) 属性
- HTMLの三大基本用語は、( ) 、 ( ) 、 ( S ) です。
答えを見る
タグ、要素、属性
（この3つを理解すれば、HTMLの半分を理解したも同然です！）
- 「
src」や「href」のように、設定の名前を ( S ) 名と呼びます。答えを見る
属性名
- 「
image.jpg」や「https://example.com」のように、設定の具体的な内容を ( S ) と呼びます。答えを見る
属性値 (または 値)
