【第2章ドリル】すべてのページの土台「基本構造」をマスターせよ！
HTMLの記事を書くたびに、毎回ゼロからコードを考えていませんか？
実は、どんなWebページにも共通する「お決まりの型（ボイラープレート）」が存在します。これをマスターすることは、料理でいう「基本の出汁」を覚えるようなもの。
今回は、この「ページの設計図」と「裏方/表舞台の役割分担」についての知識を定着させるドリルです。解説を読んだら、すぐにクイズで確認して記憶に焼き付けましょう！
1. 基本の4要素と「設計図」クイズ
HTML文書には必ず書くべき4つの主要なパーツがあります。<!DOCTYPE html>、<html>、<head>、<body> です。まずはこの基本構造の役割を整理しましょう。
やってみよう！基本構造クイズ（10問）
- すべてのHTMLページに共通する「お決まりの型」のことを、設計図、あるいは何と呼びますか？
答えを見る
ボイラープレート
（テンプレートのようなものですね。これをコピーして使い回すのが効率的です。）
- HTML文書の一番最初に必ず書く、「これは最新のHTMLですよ」という宣言文はどれですか？
答えを見る
<!DOCTYPE html>
（ブラウザの表示崩れを防ぐための重要なおまじないです。）
- 宣言文を除く、すべてのHTMLの内容を包み込む「封筒」のようなタグはどれですか？
答えを見る
<html>
<html lang="ja">のlang="ja"は、何を表す属性ですか？答えを見る
日本語 (Japanese)
（中身が主に日本語で書かれていることを示します。）
- ページに関する「裏方の設定情報」を入れる場所は、
<head>と<body>どちらですか？答えを見る
<head>
（読者には見えない、機械のための情報置き場です。）
- 読者が実際に目にする「表舞台のコンテンツ」を入れる場所は、
<head>と<body>どちらですか？答えを見る
<body>
（文章や画像などはすべてここに書きます。）
- 「ボイラープレート」を使用するメリットは、時間の節約の他に、どんなトラブルを防げることですか？
答えを見る
文字化け や スマホ表示の崩れ
（必要な設定があらかじめ含まれているからです。）
- ブラウザがページを正しく理解するために読むのは、主にどのタグの中身ですか？
答えを見る
<head>
<body>タグの中に書かれた情報は、誰に向けて書かれたものですか？答えを見る
人間（読者）
- 新しい記事を書くときは、毎回ゼロから書くのではなく、何をすると良いですか？
答えを見る
コピー＆ペースト
（完成された設計図をコピペして、bodyの中だけ書き換えるのが正解です。）
2. ２種類の読者と head内の重要設定クイズ
ブログには「人間」と「機械（ロボット）」の2種類の読者がいます。人間は <body> を読み、機械は <head> を読みます。
特に <head> 内には、文字化け防止やタイトル設定など、ブログ運営に不可欠な要素が含まれています。
やってみよう！HeadタグとMeta情報クイズ（10問）
- ブログにおける「機械（ロボット）」の読者とは、具体的に何を指しますか？（2つ挙げてください）
<meta charset="UTF-8">は、何を防ぐためのおまじないですか？答えを見る
文字化け
（世界中の言語を正しく表示するための設定です。）
- ページの「顔」となるタイトルを設定するタグはどれですか？
答えを見る
<title>
<title>タグで設定したタイトルが表示される場所を3つ答えてください。答えを見る
①ブラウザのタブ、②検索結果、③ブックマーク名
（SEOやクリック率に直結する超重要項目です。）
- スマホ表示を最適化するための命令文が入ったタグはどれですか？
答えを見る
<meta name="viewport" ...>
- 優れたブロガーは、
<body>で人間を満足させると同時に、<head>で何を満足させる必要がありますか？答えを見る
機械（検索エンジンなど）
（両方の読者を意識することが大切です。）
- 文字コードの設定（charset）やスマホ表示設定（viewport）は、
<head>と<body>どちらに書きますか？答えを見る
<head>
（これらは「裏方の設定情報」だからです。）
- 検索エンジンに対して、記事の内容を正確に伝えることは、何対策と呼ばれますか？
答えを見る
SEO対策
<title>タグの内容は、記事本文（ページ内）に大きく表示されますか？答えを見る
表示されない
（titleタグはあくまでブラウザ枠や検索結果用です。記事内の見出しは h1 タグを使います。）
- 多くの人に読まれるブログにするには、bodyの面白さだけでなく、headの「( ) 情報」も重要です。
答えを見る
正確な（設定）
（機械が理解しやすい正確な情報を記述する必要があります。）
3. Viewport（スマホ対応）徹底解剖クイズ
スマホ時代の必須タグ <meta name="viewport" ...>。これがないと、スマホでサイトを見た時に文字が米粒のように小さくなってしまいます。
この「魔法の1行」の意味を理解し、なぜ必要なのかを定着させましょう。
やってみよう！スマホ表示最適化クイズ（10問）
- Viewport設定がない場合、スマホでWebサイトを見ると文字はどうなりますか？
答えを見る
米粒のように小さくなる
（PC用の表示を無理やりスマホ画面に縮小して詰め込むためです。）
meta name="viewport"は、ブラウザに対して何のサイズに関する命令を出しますか？答えを見る
画面の表示領域（ウィンドウサイズ）
content="width=device-width"の意味を翻訳すると、「表示の横幅を ( ) と同じにしなさい」となります。答えを見る
端末（スマホ）の画面幅
（PCのふりをするのをやめさせる命令です。）
initial-scale=1.0は、初期の「何」を1.0倍（100%）にしなさいという命令ですか？答えを見る
拡大率（ズーム倍率）
（勝手に縮小表示されるのを防ぎます。）
- もともとWebサイトは、どのような機器で見ることだけを考えて作られていましたか？
答えを見る
パソコン（の大きなモニター）
- Viewportの metaタグを1行書くだけで解決できる問題を、記事では何問題と呼んでいましたか？
答えを見る
米粒問題
width=device-widthという命令は、ブラウザに「自分は大きな ( ) だ」と見せかけるのをやめさせます。答えを見る
デスクトップ（PC）
- Viewportの設定における具体的な命令（widthやscaleなど）は、どの属性の中に書きますか？
答えを見る
content 属性
（
content="..."の中に記述します。） - この「魔法の1行」を書くべき場所は、HTMLのどのタグの中ですか？
答えを見る
<head>
（表示設定なので、裏方の head に記述します。）
- Viewportの設定を人間語に翻訳すると、「画面幅をスマホに合わせ、変に ( ) せず、100%のサイズで表示して！」となります。
答えを見る
縮小
