🏆 このクイズはコース全体の理解度を確認する応用問題です。複数レッスンの知識を組み合わせて解きましょう。
Q1
ページのタイトルを設定する <title> と、画面に表示するナビゲーション <nav> の正しい配置場所の組み合わせはどれですか？
<title> はページの設定情報なので <head> に書きます。<nav> は画面に表示されるナビゲーションなので <body> に書きます。head は裏方、body は表舞台と覚えましょう。
mailto: を使うと、クリック時にメールアプリが開きます。例：<a href="mailto:[email protected]">メールを送る</a>。http: はWebページへのリンクに使います。
Q3
<div class="card"><___>商品名</___><p>商品の説明文です。</p></div> — 商品名を見出しにする適切なタグは？
div でグループ化した中で、商品名は見出し（h2）、説明文は段落（p）で表すのが適切です。h1 はページ全体のタイトルに使うので、カード内の見出しには h2〜h3 を使います。
Q4
商品一覧ページで、各商品を
で囲み、中に画像・名前・価格を入れたい。名前と価格をリストで表示する場合、正しい構造はどれですか？
div はグループ化のコンテナで、中に img（画像）と ul > li（リスト）を入れるのが正しい構造です。p の中にブロック要素は入れられず、ul の中に直接 div は入れません。
💡 ヒント
画像の「代わりのテキスト」を設定する属性です
alt 属性は画像が表示できないときの代替テキストです。リンク内の画像では特に重要で、スクリーンリーダーがリンクの目的を読み上げるために使います。
Q6
ログインフォームで <label for="email"> と <input> を紐づけたいが動かない。原因として正しいのはどれ？
label の for 属性は input の id 属性と紐づきます。name 属性はフォーム送信用で、label との紐づけには使えません。id を追加すれば解決します。
Q7
<a href="page2.html"><img src="banner.jpg" ___="セールのバナー"></a> — 空欄に入る属性は？
alt 属性で画像の説明を書きます。リンク内の画像では、alt がリンクの目的を伝える役割も果たすため、必ず適切な説明を書きましょう。
Q8
予約フォームに日付選択・人数入力・送信ボタンがあります。これらを
で配置するのは適切ですか？
<table> はデータを表形式で表示するためのタグです。ページのレイアウト目的で使うのは不適切で、CSSのFlexboxやGridを使うべきです。
Q9
文章の一部だけ色を変えたいとき、その部分を囲むインライン要素のタグ名は？
💡 ヒント
文の流れの中で一部だけを指定する汎用タグです
span はインライン要素の汎用コンテナです。文章の流れを崩さずに一部だけにCSSを当てたいときに使います。div はブロック要素なので改行が入ってしまいます。
Q10
以下のHTMLで問題があるものはどれですか？ A: <p><div>テキスト</div></p> / B: <ul><li>項目</li></ul> / C: <img src="photo.jpg"> / D: <a href="#">リンク</a>
A は p（インライン）の中に div（ブロック要素）を入れており構造違反です。C は img に alt 属性がなくアクセシビリティ上の問題があります。B と D は正しい構造です。
Q11
<meta charset="UTF-8"> を書き忘れるとどうなる可能性がありますか？
charset は文字コードを指定します。UTF-8 を指定しないとブラウザが文字コードを正しく判定できず、日本語が文字化けすることがあります。
Q12
順番に意味がある手順リスト（1. 2. 3.…）を作るタグ名は？
💡 ヒント
ordered（順序付き）list の略です
<ol> は順序付きリスト、<ul> は順序なしリストです。料理の手順や操作手順など、順番が重要な場合は ol を使います。
Q13
<img ___="photo.jpg" alt="写真"> — 画像ファイルを指定する属性は？
src（source）属性で画像ファイルのパスを指定します。alt は画像が表示できないときの代替テキストです。
Q14
テーブルで「3列分のセルを結合」したいとき使う属性はどれ？
colspan は列（column）方向の結合、rowspan は行（row）方向の結合です。colspan="3" で3列分のセルが1つに結合されます。
Q15
<input type="number" min="1" max="10"> で入力できる値の範囲はどれ？
min と max 属性で入力値の範囲を制限できます。min="1" max="10" なら1以上10以下の数値のみ入力可能です。
Q16
ページ全体の言語を日本語に設定するとき、<html> タグに書く属性と値は？（例: lang="○○"）
💡 ヒント
日本語の言語コードは2文字です
<html lang="ja"> でページの言語を日本語と宣言します。スクリーンリーダーが正しい発音で読み上げるために重要です。
Q17
<a href="page2.html" ___="_blank">別タブで開く</a> — 別タブで開く属性は？
target="_blank" でリンク先を新しいタブで開きます。外部サイトへのリンクでよく使われます。
Q18
以下のうち、<header> <main> <footer> を使う最大のメリットはどれ？
セマンティックタグは見た目を変えませんが、ページの構造的な意味を伝えます。検索エンジンの理解やアクセシビリティの向上に役立ちます。
Q19
相対パスで「1つ上のフォルダにある images フォルダの中の photo.jpg」を指定する書き方はどれ？
../ は「1つ上のフォルダに戻る」を意味します。そこから images フォルダに入って photo.jpg を指定します。
このサイトではGoogle Analyticsを使用しています。学習体験の改善に役立てます。詳細