10-1. 演習問題

問題1：選択問題

1-1. ページの主役となる内容全体を表すタグとして最も適切なのはどれか。

A. <main>
B. <span>
C. <small>

解答と解説

正解：A. <main>

A が正しい。main はページの中心となる内容を表す代表的なタグである。
B は誤り。span は文の一部など小さなインライン要素に使うことが多く、ページ全体の主役領域には向かない。
C は誤り。small は補足的な小さな文字を表す要素であり、レイアウト全体の意味付けには使わない。

main を使うことで、HTML を読む人もブラウザも「このページの中心はここだ」と理解しやすくなる。

1-2. label と input を for と id で結び付ける主な理由として最も適切なのはどれか。

A. ラベルをクリックしたときに対応する入力欄へフォーカスでき、意味も明確になるから
B. CSS の色を自動で変えるため
C. JavaScript を書かなくても送信ボタンが動くから

解答と解説

正解：A. ラベルをクリックしたときに対応する入力欄へフォーカスでき、意味も明確になるから

A が正しい。label と input を結び付けると、使いやすさと意味の明確さが両方上がる。
B は誤り。色は CSS の役割であり、for と id の対応だけで自動変更されるわけではない。
C は誤り。送信ボタンの動作は別の処理で決まり、label と input の対応そのものとは関係ない。

入力フォームでは「どの説明が、どの入力欄のものか」を機械的に分かるようにすることが大切である。

1-3. 書籍一覧テーブルで tbody を用意しておく利点として最も適切なのはどれか。

A. 見出し行とデータ行を分け、あとで JavaScript がデータ部分だけ更新しやすくなるから
B. table を書かなくても一覧が表示されるから
C. tbody を使うと CSS が不要になるから

解答と解説

正解：A. 見出し行とデータ行を分け、あとで JavaScript がデータ部分だけ更新しやすくなるから

A が正しい。tbody を分けておくと、見出しを残したままデータ行だけを差し替えやすい。
B は誤り。tbody を書いても table 自体は必要である。
C は誤り。tbody は構造の話であり、CSS 不要になるわけではない。

後で DOM 操作を行う予定があるなら、最初から thead と tbody を分ける価値が高い。

1-4. フォーム項目を 2 列で並べたいとき、display: grid を付ける場所として最も適切なのはどれか。

A. 複数の入力項目をまとめて持つ親要素
B. input 1 つ 1 つ
C. title 属性の中

解答と解説

正解：A. 複数の入力項目をまとめて持つ親要素

A が正しい。複数の子要素を並べたいときは、その親に display: grid を付ける。
B は誤り。各 input に付けても、項目どうしを 2 列に並べる役目は果たしにくい。
C は誤り。title 属性は補足情報であり、レイアウト指定の場所ではない。

CSS レイアウトでは「誰を並べたいのか」を考え、並べたい要素たちを持つ親へ指定するのが基本である。

1-5. 状態バッジの役割として最も適切なのはどれか。

A. 「未読 / 読書中 / 読了」の違いを文字と見た目の両方で伝えること
B. JavaScript のエラーを自動修正すること
C. 表の列数を増やすこと

解答と解説

正解：A. 「未読 / 読書中 / 読了」の違いを文字と見た目の両方で伝えること

A が正しい。状態バッジは一覧を素早く読み取るための視覚的な補助である。
B は誤り。JavaScript のエラー修正は状態バッジの役割ではない。
C は誤り。列数を増やすためのものでもない。

実務では色だけに頼らず、文字も一緒に表示して状態を伝えることが重要である。

1-6. CSS が当たっているかを確認したいとき、Chrome DevTools で最も直接的に使う場所はどれか。

A. Styles / Computed
B. Network
C. Sources のみ

解答と解説

正解：A. Styles / Computed

A が正しい。どの CSS が適用されているか、打ち消されているかを最も直接的に確認できる。
B は誤り。Network は通信確認の場所であり、CSS の当たり方を見る場所ではない。
C は誤り。Sources はファイルを見るのに便利だが、実際にどのスタイルが効いているかの確認には Styles / Computed が向いている。

「クラスは付いているのに見た目が変わらない」ときは、Styles / Computed を見る癖をつけるとよい。

問題2：穴埋め問題

次の文章の空欄を埋めてください。

ページの主役となる内容全体を表す代表的なタグは （　　　） である。
入力欄の説明と部品を結び付ける代表的なタグは （　　　） である。
複数の入力項目を格子状に並べるときによく使う CSS の値は display: **（　　　）** である。
表の見出し行は thead、データ部分は （　　　） に書く。
画面幅に応じてレイアウトを変える代表的な仕組みは （　　　） である。
HTML の構造を確認するときに役立つ DevTools のタブは （　　　） である。

解答欄

解答と解説

main
label
grid
tbody
メディアクエリ
Elements

main はページの中心内容を表す。
label は入力欄の意味を明確にし、使いやすさも高める。
display: grid は複数項目の並びを整理しやすい。
tbody はデータ行のまとまりで、あとで JavaScript が更新しやすい。
メディアクエリは画面幅に応じてレイアウトを変えるために使う。
Elements は HTML 構造を確認する基本の場所である。

穴埋め問題は単語を覚えることが目的ではなく、「どの問題にどの道具を使うか」を結び付けることが目的である。

問題3：記述問題

3-1. JavaScript を書く前に、まず HTML/CSS で静的な画面を作っておくとよい理由を説明してください。

解答欄

解答と解説

3-1. 例

JavaScript の前に静的な画面を作っておくと、画面のどこに何を表示したいのかを先に確定できる。そうすると、あとで JavaScript を書くときに「どの要素を取得するか」「どこにデータを表示するか」が明確になる。また、見た目の崩れとロジックの不具合を分けて調べられるので、初心者でも原因を切り分けやすい。

補足画面が存在しない状態で JavaScript を書くと、エラーの原因が HTML 側なのか JS 側なのか判断しにくくなる。

3-2. div だけで画面を作るのではなく、main・header・section・form など意味のあるタグを使う利点を説明してください。

解答欄

解答と解説

3-2. 例

main・header・section・form などの意味あるタグを使うと、コードを読む人が構造を理解しやすい。さらに、ブラウザにとっても「ここは主役部分」「ここは入力フォーム」という意味が伝わるため、保守性やアクセシビリティの面でも有利である。単に div だけで囲むより、役割が明確になり、後から JavaScript で要素を探すときも迷いにくい。

3-3. 書籍登録フォームと書籍一覧を別の section に分けることが、なぜ読みやすさや今後の実装に役立つのか説明してください。

解答欄

解答と解説

3-3. 例

フォームと一覧を別の section に分けると、「入力する場所」と「結果を見る場所」の責任が分かれる。利用者にとっても見やすく、開発者にとっても CSS や JavaScript の対象が整理される。今後、フォーム側にエラー表示を追加したり、一覧側だけを再描画したりするときにも、まとまりが分かれていたほうが変更しやすい。

3-4. フォームのレイアウトが崩れたとき、Elements パネルと Styles パネルをどの順に使って調べるか説明してください。

解答欄

解答と解説

3-4. 例

まず Elements パネルで、期待する HTML 構造やクラス名が本当に存在するかを確認する。その次に Styles パネルで、その要素へどの CSS が適用されているかを見る。構造が違うなら HTML の問題、構造は正しいのに見た目が違うなら CSS の問題と切り分けられる。Computed を見れば、最終的な display や padding の値も確認できる。