HTMLファイルの拡張子は .html です。.css はCSS、.js はJavaScriptのファイルです。
Q2
コードを書くためのテキストエディタとして、このサイトでおすすめしているのはどれですか？
VS Code（Visual Studio Code）は無料のテキストエディタで、プロのエンジニアにも人気があります。
F12キーで開発者ツールを開けます。HTMLの構造やCSSの確認に使います。
Q4
HTMLファイルの1行目に書く <!DOCTYPE html> の役割は？
<!DOCTYPE html> は「このファイルはHTML5です」とブラウザに伝える宣言です。
Q5
ページのタイトルや設定情報を書く場所はどこですか？
<head> にはタイトル（<title>）や文字コード（<meta charset>）などの設定情報を書きます。画面には表示されません。
Q6
ブラウザの画面に表示される内容を書く場所はどこですか？
<body> の中に書いた内容がブラウザの画面に表示されます。
Q7
終了タグの書き方で、タグ名の前につける記号は何ですか？（半角1文字）
💡 ヒント
スラッシュと呼ばれる記号です
終了タグは </タグ名> のように、タグ名の前に /（スラッシュ）をつけます。
Q8
<html lang="___"> — 日本語のページを作るとき、___ に入る値は？
lang="ja" で日本語のページであることを示します。英語なら "en" です。
Q9
いちばん大きい見出しを作るタグ名を入力してください
💡 ヒント
heading（見出し）の頭文字 + 数字
h1 がいちばん大きい見出しです。h1〜h6 の6段階があり、数字が小さいほど大きくなります。
💡 ヒント
paragraph（段落）の頭文字
<p> タグで段落を作ります。前後に自動で余白が入ります。
<br>（break）で改行します。終了タグは不要です。<hr> は区切り線です。
Q12
水平の区切り線を表示するタグはどれですか？
<hr>（horizontal rule）で水平の区切り線を表示します。終了タグは不要です。
Q13
<___>重要な言葉</___> — 太字で重要な言葉を表すタグは？
<strong> タグで囲んだ言葉は太字で表示され、重要であることを示します。
<em>（emphasis）で斜体の強調を表します。<strong> は太字の重要語です。
💡 ヒント
anchor（アンカー）の頭文字
<a href="URL">テキスト</a> でリンクを作ります。
💡 ヒント
image（画像）の略
<img src="パス" alt="説明"> で画像を表示します。終了タグは不要です。
Q17
<img> タグの alt 属性の役割は？
alt属性は画像が表示できないときの代わりのテキストです。スクリーンリーダーも読み上げます。
Q18
<a href="..." ___="_blank"> — リンクを新しいタブで開く属性は？
target="_blank" を指定すると、リンクが新しいタブで開きます。
Q19
同じフォルダ内の photo.jpg を表示する正しい書き方は？
Q20
順番なしの箇条書きリストを作るタグはどれですか？
<ul>（unordered list）が順番なしの箇条書きリストです。<ol> は番号付きリストです。
Q21
番号付きリストを作るタグ名を入力してください
💡 ヒント
ordered list（順番付きリスト）の略
<ol> で番号付きリストを作ります。中に <li> でリスト項目を書きます。
Q22
リストの各項目を表すタグ名を入力してください
💡 ヒント
list item（リスト項目）の略
<li> は <ul> または <ol> の中に書くリスト項目です。
<tr>（table row）が表の1行を表します。<td> はデータセル、<th> は見出しセルです。
Q24
表の見出しセル（太字・中央揃え）を作るタグはどれですか？
<th>（table header）は見出しセルで、太字・中央揃えで表示されます。データセルは <td> です。
Q25
<___ type="text" placeholder="名前"> — テキスト入力欄を作るタグは？
<input> タグの type 属性を変えることで、テキスト・パスワード・ラジオボタンなど様々な入力欄を作れます。
Q26
ラジオボタンを同じグループにするために揃える属性はどれですか？
同じ name 属性を持つラジオボタンは1つのグループになり、1つだけ選択できます。
Q27
<label> タグの for 属性と紐づける <input> の属性はどれですか？
<label for="xxx"> と <input id="xxx"> の値を同じにすると紐づきます。ラベルをクリックすると入力欄が選択されます。 📖 詳しい解説を見る →
Q28
ブロック要素の汎用コンテナ（入れ物）はどれですか？
<div> はブロック要素の汎用コンテナです。CSSでデザインを当てるときにグループ化に使います。 📖 詳しい解説を見る →
Q29
1ページに1つだけ使うべき属性はどれですか？
id はページ内で一意（1つだけ）の名前です。同じスタイルを複数の要素に使いたいときは class を使います。
Q30
文中の一部だけにスタイルを当てたいとき、使うインライン要素はどれですか？
<span> はインライン要素の汎用コンテナです。文の流れの中で一部だけを指定するときに使います。
Q31
ページのヘッダー部分（ロゴやナビゲーション）を囲むセマンティックタグはどれですか？
<header> はページやセクションのヘッダーを表すセマンティックタグです。<head> はメタ情報用で別物です。
Q32
<___>メインコンテンツ</___> — ページの主要コンテンツを囲むタグは？
<main> はページの主要コンテンツを表します。1ページに1つだけ使います。
Q33
ナビゲーションリンクのまとまりを表すセマンティックタグはどれですか？
<nav> はナビゲーションリンクのまとまりを表します。ヘッダーメニューやサイドバーのリンク集に使います。
Q34
<meta ___="UTF-8"> — 文字コードを指定する属性は？
charset="UTF-8" で文字コードをUTF-8に指定します。日本語を正しく表示するために必要です。
Q35
<meta name="viewport"> を書かないとスマホでどうなりますか？
viewport メタタグがないと、スマホでもPC用の幅（通常980px）で表示され、文字が小さくなります。
Q36
検索結果に表示されるページの説明文を設定する meta タグの name 属性の値を入力してください
💡 ヒント
英語で「説明」を意味する単語です
<meta name="description" content="説明文"> で検索結果に表示される説明文を設定します。
Q37
<___><option>赤</option><option>青</option></___> — ドロップダウンメニューを作るタグは？
<select> タグの中に <option> を並べてドロップダウンメニューを作ります。
Q38
複数行のテキスト入力欄を作るタグ名を入力してください
💡 ヒント
text（テキスト）+ area（エリア）をつなげます
<textarea> で複数行のテキスト入力欄を作ります。<input type="text"> は1行のみです。
required 属性を付けると、入力せずに送信しようとするとブラウザが警告を表示します。
Q40
<___ src="movie.mp4" controls></___> — 動画を埋め込むタグは？
<video> タグで動画を埋め込みます。controls 属性で再生ボタンなどが表示されます。
Q41
音声ファイルを埋め込むタグ名を入力してください
💡 ヒント
英語で「音声」を意味する単語です
<audio src="file.mp3" controls> で音声プレーヤーを埋め込みます。
Q42
YouTubeの動画やGoogleマップを埋め込むときに使うタグはどれですか？
<iframe> で外部コンテンツ（YouTube、Googleマップなど）をページ内に埋め込めます。
Q43
テーブルのセルを横方向に2つ結合する属性はどれですか？
colspan="2" でセルを横方向に2つ分結合します。rowspan は縦方向の結合です。 📖 詳しい解説を見る →
Q44
テーブルのセルを縦方向に結合する属性名を入力してください
💡 ヒント
row（行）+ span（またがる）をつなげます
rowspan="数字" でセルを縦方向に結合します。colspan は横方向です。
Q45
<table><___>表のタイトル</___><tr>...</tr></table> — 表にタイトルをつけるタグは？
<caption> で表にタイトル（説明文）をつけます。<table> の直後に書きます。
Q46
画像の alt 属性が空（alt=""）でも良いのはどんなときですか？
装飾目的の画像は alt="" とすることで、スクリーンリーダーが読み飛ばします。情報を持つ画像には必ず説明を書きましょう。
Q47
<button ___="メニューを開く">☰</button> — ボタンの目的を説明する属性は？
aria-label でスクリーンリーダー向けにボタンの目的を説明します。アイコンだけのボタンに重要です。
role 属性はスクリーンリーダーなどの支援技術に要素の役割（ボタン、ナビゲーションなど）を伝えます。
<ul> の中に <li> を入れるのが正しい構造です。<p> の中に <div> は入れられません。 📖 詳しい解説を見る →
Q50
<article> タグの正しい使い方はどれですか？
<article> はそれ単体で意味が通じる独立したコンテンツ（記事、投稿など）に使います。