<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 クイズ（全角表示版）</title>
<style>
body {
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
background-color: #FFF3E0;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
#container {
width: 100%;
max-width: 800px;
background: #fff;
padding: 20px;
border-radius: 8px;
border-top: 6px solid #E65100;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
h1 { color: #E65100; font-size: 24px; margin: 0 0 10px 0; text-align: center; }
.note {
font-size: 12px;
color: #666;
text-align: center;
margin-bottom: 20px;
background: #f0f0f0;
padding: 5px;
border-radius: 4px;
}
/* 画面切り替え */
.screen { display: none; }
.active { display: block; }
/* プログレスバー */
#progress-bg {
width: 100%;
background: #eee;
height: 10px;
border-radius: 5px;
margin-bottom: 20px;
overflow: hidden;
}
#progress-bar {
height: 100%;
width: 0%;
background: #E65100;
transition: width 0.3s;
}
/* 問題文 */
#question-text {
font-size: 18px;
font-weight: bold;
background: #fafafa;
padding: 20px;
border-left: 5px solid #EF6C00;
margin-bottom: 20px;
text-align: left;
line-height: 1.6;
font-family: monospace; /* 全角記号を見やすく */
}
/* 選択肢 */
.btn-option {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 15px;
font-size: 16px;
text-align: left;
background: #fff;
border: 2px solid #ddd;
border-radius: 6px;
cursor: pointer;
font-family: monospace;
transition: background 0.2s;
}
.btn-option:hover {
background: #fff3e0;
border-color: #E65100;
}
.btn-option:disabled {
cursor: default;
opacity: 0.7;
}
/* 正誤スタイル */
.correct-style { background: #e8f5e9 !important; border-color: #2E7D32 !important; color: #2E7D32 !important; font-weight: bold; }
.wrong-style { background: #ffebee !important; border-color: #C62828 !important; color: #C62828 !important; }
/* 解説 */
#feedback-box {
display: none;
margin-top: 20px;
padding: 20px;
background: #E1BEE7;
border-radius: 6px;
text-align: left;
}
#btn-next {
display: block;
width: 200px;
margin: 20px auto 0;
padding: 12px;
background: #E65100;
color: #fff;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
/* 結果画面 */
#result-title { font-size: 28px; font-weight: bold; color: #E65100; margin: 30px 0; }
#restart-btn { padding: 12px 30px; background: #333; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; }
#review-list {
text-align: left;
margin-top: 30px;
border-top: 1px solid #eee;
max-height: 400px;
overflow-y: auto;
}
.review-item { padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; font-family: monospace; }
</style>
</head>
<body>
<div id="container">
<h1>HTML5 クイズ 30本ノック</h1>
<div class="note">※システム制約上、記号はすべて全角（＜＞”）で表示されます。</div>
<div id="view-quiz" class="screen">
<div id="progress-bg"><div id="progress-bar"></div></div>
<div style="display:flex; justify-content:space-between; font-weight:bold; color:#666; margin-bottom:10px;">
<span id="q-count">Q.1</span>
<span id="timer" style="color:#D84315;">残り 20秒</span>
</div>
<div id="question-text"></div>
<div id="options-area"></div>
<div id="feedback-box">
<h3 id="fb-title" style="margin:0 0 10px 0;"></h3>
<div id="fb-msg"></div>
<button id="btn-next" onclick="nextQuestion()">次の問題へ</button>
</div>
</div>
<div id="view-result" class="screen">
<h2>結果発表</h2>
<div id="result-title"></div>
<div id="result-msg"></div>
<div style="margin-top:30px;">
<button id="restart-btn" onclick="initGame()">最初からやり直す</button>
</div>
<div id="review-list"></div>
</div>
</div>
<script>
/* 【完全互換モード】
記号の変換処理(replace等)をすべて廃止し、
データをそのまま表示するだけのシンプルなロジックにしました。
JS内のクォートはすべてダブルクォート(")を使用しています。
*/
var TIME_LIMIT = 20;
var QUEST_NUM = 30;
/* 全角記号で記述された問題データ */
var POOL = [
// 基本
{ q: "＜！DOCTYPE html＞ の意味は？", o: ["HTML5の文書型宣言", "HTMLの終了タグ", "XMLの宣言", "デバッグモード"], exp: "HTML5であることを宣言します。" },
{ q: "HTML文書のルート要素は？", o: ["＜html＞", "＜root＞", "＜body＞", "＜head＞"], exp: "すべての要素は html タグの中に書きます。" },
{ q: "メタデータを記述する場所は？", o: ["＜head＞", "＜body＞", "＜header＞", "＜top＞"], exp: "画面に表示されない情報は head に書きます。" },
{ q: "コンテンツを書く場所は？", o: ["＜body＞", "＜main＞", "＜html＞", "＜view＞"], exp: "表示内容は body に書きます。" },
{ q: "文字コードをUTF-8にするタグは？", o: ["＜meta charset=”UTF-8”＞", "＜meta encoding=”UTF-8”＞", "＜html lang=”utf8”＞", "＜xml encoding=”UTF-8”＞"], exp: "HTML5の標準的な書き方です。" },
{ q: "ページのタイトルタグは？", o: ["＜title＞", "＜name＞", "＜h1＞", "＜head＞"], exp: "タブや検索結果に表示されます。" },
{ q: "外部CSSの読み込みタグは？", o: ["＜link＞", "＜style＞", "＜css＞", "＜script＞"], exp: "link rel=”stylesheet” を使います。" },
{ q: "外部JSの読み込みタグは？", o: ["＜script＞", "＜js＞", "＜link＞", "＜java＞"], exp: "script src=”...” を使います。" },
{ q: "ページ内CSSのタグは？", o: ["＜style＞", "＜css＞", "＜design＞", "＜meta＞"], exp: "head 内に書きます。" },
{ q: "廃止された中央揃えタグは？", o: ["＜center＞", "＜middle＞", "＜align＞", "＜div align=”center”＞"], exp: "center は廃止されました。" },
// テキスト
{ q: "段落を表すタグは？", o: ["＜p＞", "＜br＞", "＜div＞", "＜span＞"], exp: "Paragraphの略です。" },
{ q: "強制改行タグは？", o: ["＜br＞", "＜lb＞", "＜cr＞", "＜n＞"], exp: "Breakの略です。" },
{ q: "最大の見出しは？", o: ["＜h1＞", "＜h6＞", "＜title＞", "＜head＞"], exp: "Heading 1 です。" },
{ q: "最小の見出しは？", o: ["＜h6＞", "＜h1＞", "＜min＞", "＜p＞"], exp: "Heading 6 です。" },
{ q: "水平線タグは？", o: ["＜hr＞", "＜line＞", "＜br＞", "＜-＞"], exp: "Horizontal Ruleの略です。" },
{ q: "重要（太字）タグは？", o: ["＜strong＞", "＜b＞", "＜big＞", "＜imp＞"], exp: "意味的な重要性は strong です。" },
{ q: "強調（斜体）タグは？", o: ["＜em＞", "＜i＞", "＜s＞", "＜italic＞"], exp: "Emphasisの略です。" },
{ q: "上付き文字は？", o: ["＜sup＞", "＜sub＞", "＜up＞", "＜top＞"], exp: "Superscriptです。" },
{ q: "下付き文字は？", o: ["＜sub＞", "＜sup＞", "＜down＞", "＜under＞"], exp: "Subscriptです。" },
{ q: "長い引用は？", o: ["＜blockquote＞", "＜q＞", "＜cite＞", "＜quote＞"], exp: "ブロックレベルの引用です。" },
{ q: "短い引用は？", o: ["＜q＞", "＜blockquote＞", "＜cite＞", "＜”＞"], exp: "行内引用です。" },
{ q: "整形済みテキストは？", o: ["＜pre＞", "＜code＞", "＜txt＞", "＜format＞"], exp: "空白や改行を維持します。" },
{ q: "コード表示タグは？", o: ["＜code＞", "＜pre＞", "＜var＞", "＜cmd＞"], exp: "等幅フォントになります。" },
{ q: "取り消し線は？", o: ["＜del＞", "＜s＞", "＜rm＞", "＜cut＞"], exp: "Deleteの略です。" },
{ q: "追記線（下線）は？", o: ["＜ins＞", "＜u＞", "＜add＞", "＜new＞"], exp: "Insertの略です。" },
// リンク・画像
{ q: "リンクタグは？", o: ["＜a＞", "＜link＞", "＜url＞", "＜go＞"], exp: "Anchorタグです。" },
{ q: "リンク先属性は？", o: ["href", "src", "link", "to"], exp: "Hypertext Referenceです。" },
{ q: "別タブで開く属性は？", o: ["target=”_blank”", "target=”new”", "window=”new”", "open=”tab”"], exp: "_blank を指定します。" },
{ q: "画像タグは？", o: ["＜img＞", "＜image＞", "＜pic＞", "＜photo＞"], exp: "Imageタグです。" },
{ q: "画像パス属性は？", o: ["src", "href", "path", "file"], exp: "Sourceです。" },
{ q: "代替テキスト属性は？", o: ["alt", "title", "text", "desc"], exp: "Alternativeです。" },
{ q: "画像幅属性は？", o: ["width", "size", "x", "w"], exp: "width です。" },
{ q: "メアドリンクは？", o: ["href=”mailto:...”", "href=”mail:...”", "href=”send:...”", "to=”mail”"], exp: "mailtoスキームです。" },
{ q: "電話リンクは？", o: ["href=”tel:...”", "href=”phone:...”", "href=”call:...”", "to=”tel”"], exp: "telスキームです。" },
{ q: "ページ内リンクは？", o: ["href=”＃id”", "href=”＠id”", "href=”id”", "link=”id”"], exp: "シャープ＋ID名です。" },
{ q: "図表と説明の親タグは？", o: ["＜figure＞", "＜image＞", "＜frame＞", "＜box＞"], exp: "図表をまとめます。" },
{ q: "図表の説明タグは？", o: ["＜figcaption＞", "＜caption＞", "＜title＞", "＜sub＞"], exp: "figure内に書きます。" },
// リスト
{ q: "箇条書きリストは？", o: ["＜ul＞", "＜ol＞", "＜li＞", "＜list＞"], exp: "Unordered Listです。" },
{ q: "番号付きリストは？", o: ["＜ol＞", "＜ul＞", "＜li＞", "＜num＞"], exp: "Ordered Listです。" },
{ q: "リスト項目は？", o: ["＜li＞", "＜item＞", "＜ul＞", "＜ol＞"], exp: "List Itemです。" },
{ q: "定義リスト親タグは？", o: ["＜dl＞", "＜dt＞", "＜dd＞", "＜def＞"], exp: "Description Listです。" },
{ q: "定義語は？", o: ["＜dt＞", "＜dd＞", "＜t＞", "＜term＞"], exp: "Description Termです。" },
{ q: "定義説明は？", o: ["＜dd＞", "＜dt＞", "＜d＞", "＜desc＞"], exp: "Description Detailsです。" },
// テーブル
{ q: "表の親タグは？", o: ["＜table＞", "＜sheet＞", "＜grid＞", "＜tab＞"], exp: "Tableタグです。" },
{ q: "行（Row）タグは？", o: ["＜tr＞", "＜td＞", "＜th＞", "＜row＞"], exp: "Table Rowです。" },
{ q: "見出しセルタグは？", o: ["＜th＞", "＜td＞", "＜head＞", "＜h＞"], exp: "Table Headerです。" },
{ q: "データセルタグは？", o: ["＜td＞", "＜tr＞", "＜th＞", "＜data＞"], exp: "Table Dataです。" },
{ q: "横結合属性は？", o: ["colspan", "rowspan", "merge", "span"], exp: "Column Spanです。" },
{ q: "縦結合属性は？", o: ["rowspan", "colspan", "vmerge", "height"], exp: "Row Spanです。" },
{ q: "表タイトルタグは？", o: ["＜caption＞", "＜title＞", "＜name＞", "＜head＞"], exp: "Captionです。" },
// フォーム
{ q: "フォーム親タグは？", o: ["＜form＞", "＜input＞", "＜area＞", "＜post＞"], exp: "Formタグです。" },
{ q: "1行入力欄は？", o: ["＜input type=”text”＞", "＜text＞", "＜field＞", "＜box＞"], exp: "inputタグです。" },
{ q: "パスワード欄は？", o: ["＜input type=”password”＞", "＜input type=”secret”＞", "＜pass＞", "＜input type=”hide”＞"], exp: "伏せ字になります。" },
{ q: "複数行入力欄は？", o: ["＜textarea＞", "＜input type=”multi”＞", "＜textbox＞", "＜memo＞"], exp: "textareaタグです。" },
{ q: "ラジオボタンは？", o: ["＜input type=”radio”＞", "＜input type=”check”＞", "＜select＞", "＜option＞"], exp: "単一選択です。" },
{ q: "チェックボックスは？", o: ["＜input type=”checkbox”＞", "＜check＞", "＜box＞", "＜input type=”multi”＞"], exp: "複数選択です。" },
{ q: "送信ボタンは？", o: ["＜button type=”submit”＞", "＜send＞", "＜input type=”send”＞", "＜go＞"], exp: "submitタイプです。" },
{ q: "プルダウン親タグは？", o: ["＜select＞", "＜option＞", "＜list＞", "＜dropdown＞"], exp: "Selectタグです。" },
{ q: "プルダウン選択肢は？", o: ["＜option＞", "＜select＞", "＜item＞", "＜choice＞"], exp: "Optionタグです。" },
{ q: "ラベル紐付けタグは？", o: ["＜label＞", "＜span＞", "＜tag＞", "＜name＞"], exp: "Labelタグです。" },
{ q: "入力ヒント属性は？", o: ["placeholder", "hint", "value", "text"], exp: "薄く表示されます。" },
{ q: "必須属性は？", o: ["required", "must", "need", "validate"], exp: "送信時に必須チェックされます。" },
{ q: "読み取り専用属性は？", o: ["readonly", "disabled", "lock", "static"], exp: "編集できません。" },
{ q: "無効化属性は？", o: ["disabled", "readonly", "stop", "off"], exp: "送信もされません。" },
{ q: "隠しデータタイプは？", o: ["type=”hidden”", "type=”none”", "type=”secret”", "style=”display:none”"], exp: "画面には表示されずデータだけ送ります。" },
{ q: "メアド入力欄は？", o: ["type=”email”", "type=”mail”", "type=”text”", "type=”addr”"], exp: "形式チェックされます。" },
{ q: "数値入力欄は？", o: ["type=”number”", "type=”int”", "type=”digit”", "type=”count”"], exp: "数値のみ入力可能です。" },
{ q: "日付入力欄は？", o: ["type=”date”", "type=”calendar”", "type=”day”", "type=”time”"], exp: "カレンダーが出ます。" },
// 構造・その他
{ q: "ブロック要素の箱は？", o: ["＜div＞", "＜span＞", "＜sec＞", "＜box＞"], exp: "Divisionです。" },
{ q: "インライン要素の箱は？", o: ["＜span＞", "＜div＞", "＜text＞", "＜inline＞"], exp: "文字装飾用です。" },
{ q: "ヘッダー領域は？", o: ["＜header＞", "＜head＞", "＜top＞", "＜banner＞"], exp: "ページ上部です。" },
{ q: "フッター領域は？", o: ["＜footer＞", "＜bottom＞", "＜end＞", "＜tail＞"], exp: "ページ下部です。" },
{ q: "ナビゲーションは？", o: ["＜nav＞", "＜menu＞", "＜link＞", "＜guide＞"], exp: "Navigationです。" },
{ q: "記事コンテンツは？", o: ["＜article＞", "＜section＞", "＜div＞", "＜post＞"], exp: "自己完結する内容です。" },
{ q: "セクション（章）は？", o: ["＜section＞", "＜part＞", "＜div＞", "＜block＞"], exp: "見出しを伴う区画です。" },
{ q: "メインコンテンツは？", o: ["＜main＞", "＜content＞", "＜body＞", "＜center＞"], exp: "1ページに1つです。" },
{ q: "サイドバー等は？", o: ["＜aside＞", "＜side＞", "＜sub＞", "＜nav＞"], exp: "本筋と関連の薄い情報です。" },
{ q: "連絡先タグは？", o: ["＜address＞", "＜contact＞", "＜info＞", "＜mail＞"], exp: "Addressタグです。" },
{ q: "開閉ウィジェットは？", o: ["＜details＞", "＜open＞", "＜hide＞", "＜accordion＞"], exp: "詳細情報を開閉します。" },
{ q: "その見出しタグは？", o: ["＜summary＞", "＜title＞", "＜head＞", "＜caption＞"], exp: "Summaryタグです。" },
{ q: "日時タグは？", o: ["＜time＞", "＜date＞", "＜clock＞", "＜cal＞"], exp: "機械可読な日時を示します。" },
{ q: "ハイライトタグは？", o: ["＜mark＞", "＜highlight＞", "＜span＞", "＜strong＞"], exp: "蛍光ペンのような表示です。" },
{ q: "ルビ親タグは？", o: ["＜ruby＞", "＜kana＞", "＜rt＞", "＜phonetic＞"], exp: "Rubyタグです。" },
{ q: "ルビふりがなは？", o: ["＜rt＞", "＜rb＞", "＜rp＞", "＜kana＞"], exp: "Ruby Textです。" },
{ q: "動画タグは？", o: ["＜video＞", "＜movie＞", "＜film＞", "＜mp4＞"], exp: "Videoタグです。" },
{ q: "音声タグは？", o: ["＜audio＞", "＜sound＞", "＜music＞", "＜mp3＞"], exp: "Audioタグです。" },
{ q: "再生操作パネル属性は？", o: ["controls", "play", "ui", "show"], exp: "コントローラーを表示します。" },
{ q: "自動再生属性は？", o: ["autoplay", "auto", "start", "play"], exp: "読み込み時に再生します。" },
{ q: "ループ属性は？", o: ["loop", "repeat", "cycle", "again"], exp: "繰り返し再生します。" },
{ q: "JS無効時の表示は？", o: ["＜noscript＞", "＜nojs＞", "＜fallback＞", "＜alt＞"], exp: "No Scriptです。" },
{ q: "埋め込みフレームは？", o: ["＜iframe＞", "＜frame＞", "＜window＞", "＜embed＞"], exp: "Inline Frameです。" },
{ q: "描画キャンバスは？", o: ["＜canvas＞", "＜draw＞", "＜image＞", "＜paint＞"], exp: "JSで描画します。" },
{ q: "ページ固有IDは？", o: ["id", "class", "name", "uid"], exp: "重複不可です。" },
{ q: "グループクラスは？", o: ["class", "id", "style", "group"], exp: "重複可能です。" },
{ q: "直接スタイル属性は？", o: ["style", "css", "design", "look"], exp: "インラインスタイルです。" },
{ q: "補足ツールチップ属性は？", o: ["title", "hint", "info", "alt"], exp: "マウスオーバーで出ます。" },
{ q: "タブ順序属性は？", o: ["tabindex", "order", "seq", "nav"], exp: "フォーカス順序です。" },
// --- フォーム応用 (1-20) ---
{ q: "入力候補のリスト（サジェスト）を表示するタグは？", o: ["＜datalist＞", "＜suggest＞", "＜listbox＞", "＜inputlist＞"], exp: "inputタグのlist属性と組み合わせて使用します。" },
{ q: "フォーム部品をグループ化して枠で囲むタグは？", o: ["＜fieldset＞", "＜group＞", "＜box＞", "＜formgroup＞"], exp: "関連する項目をまとめます。通常、枠線が表示されます。" },
{ q: "fieldsetのタイトル（キャプション）を表示するタグは？", o: ["＜legend＞", "＜caption＞", "＜title＞", "＜label＞"], exp: "fieldsetタグの直下に記述します。" },
{ q: "セレクトボックス内の選択肢をグループ化するタグは？", o: ["＜optgroup＞", "＜group＞", "＜option-group＞", "＜cat＞"], exp: "selectタグ内でoptionタグを分類します。" },
{ q: "ファイルアップロード用の入力欄は？", o: ["＜input type=”file”＞", "＜input type=”upload”＞", "＜file＞", "＜upload＞"], exp: "ローカルファイルを選択するボタンを表示します。" },
{ q: "ファイルを複数選択可能にする属性は？", o: ["multiple", "many", "select-all", "array"], exp: "input type=”file” や selectタグで使用します。" },
{ q: "アップロード可能なファイル形式を制限する属性は？", o: ["accept", "type", "limit", "allow"], exp: "accept=”.png, .jpg” のように指定します。" },
{ q: "検索キーワード入力用のタイプは？", o: ["type=”search”", "type=”find”", "type=”query”", "type=”keyword”"], exp: "ブラウザによって×ボタンが表示されるなど、検索用に最適化されます。" },
{ q: "URL入力用のタイプは？", o: ["type=”url”", "type=”link”", "type=”http”", "type=”site”"], exp: "送信時にURL形式かどうかチェックされます。" },
{ q: "ページ読み込み時に自動でフォーカスを当てる属性は？", o: ["autofocus", "focus", "active", "start"], exp: "ページ内で一つだけ指定できます。" },
{ q: "入力値の自動補完（履歴表示）を制御する属性は？", o: ["autocomplete", "complete", "history", "suggest"], exp: "on または off を指定します。" },
{ q: "正規表現で入力パターンを制限する属性は？", o: ["pattern", "regex", "rule", "match"], exp: "郵便番号などの形式チェックに使います。" },
{ q: "数値や日付の最小値を指定する属性は？", o: ["min", "low", "start", "bottom"], exp: "対になる属性は max です。" },
{ q: "数値やスライダーの増減幅を指定する属性は？", o: ["step", "gap", "jump", "interval"], exp: "例えば step=”10” なら10刻みになります。" },
{ q: "フォームの送信先URLを指定する属性は？", o: ["action", "target", "to", "send"], exp: "formタグに記述します。" },
{ q: "フォームの送信方式（GET/POST）を指定する属性は？", o: ["method", "type", "mode", "way"], exp: "formタグに記述します。デフォルトはGETです。" },
{ q: "送信時にバリデーション（チェック）を行わない属性は？", o: ["novalidate", "nocheck", "allow", "pass"], exp: "formタグに記述し、必須チェック等を無効化します。" },
{ q: "formタグの外にある部品をフォームに関連付ける属性は？", o: ["form", "connect", "belong", "parent"], exp: "form=”フォームID” で離れた場所の部品を紐付けます。" },
{ q: "ボタンを押した時の送信先を個別に変える属性は？", o: ["formaction", "action", "dest", "route"], exp: "送信ボタン（submit）に記述します。" },
{ q: "ボタンを押した時の送信方式を個別に変える属性は？", o: ["formmethod", "method", "change", "post"], exp: "送信ボタン（submit）に記述します。" },
// --- 画像・メディア応用 (21-35) ---
{ q: "レスポンシブ画像を切り替えるための親タグは？", o: ["＜picture＞", "＜responsive＞", "＜media＞", "＜switch＞"], exp: "画面サイズに応じて異なる画像リソースを提供します。" },
{ q: "pictureタグ内で条件と画像を指定するタグは？", o: ["＜source＞", "＜src＞", "＜img＞", "＜item＞"], exp: "media属性で条件を指定します。" },
{ q: "高解像度ディスプレイ等で画像を出し分けるimg属性は？", o: ["srcset", "src-list", "res", "multi-src"], exp: "倍率や幅に応じた画像候補を記述します。" },
{ q: "画像の表示サイズをブラウザに事前に伝えるimg属性は？", o: ["sizes", "width-list", "view", "scale"], exp: "srcsetと組み合わせて使用します。" },
{ q: "画像の遅延読み込み（スクロールしたら読み込む）を行う属性は？", o: ["loading=”lazy”", "load=”delay”", "lazyload", "defer"], exp: "ページの初期表示速度を向上させます。" },
{ q: "動画や音声の字幕・キャプションを指定するタグは？", o: ["＜track＞", "＜subtitle＞", "＜caption＞", "＜text＞"], exp: "videoやaudioタグの中で使用します。" },
{ q: "動画読み込み前に表示するサムネイル画像を指定する属性は？", o: ["poster", "thumbnail", "cover", "preview"], exp: "videoタグの属性です。" },
{ q: "音声を消音（ミュート）状態で開始する属性は？", o: ["muted", "silent", "quiet", "no-sound"], exp: "自動再生させる場合などに必須となることが多いです。" },
{ q: "イメージマップのクリック領域を定義するタグは？", o: ["＜area＞", "＜rect＞", "＜zone＞", "＜click＞"], exp: "mapタグの中で使用します。" },
{ q: "イメージマップの定義と画像を紐付けるimg属性は？", o: ["usemap", "map", "target", "link"], exp: "usemap=”#マップ名” と指定します。" },
{ q: "SVG（ベクター画像）を描画するタグは？", o: ["＜svg＞", "＜vector＞", "＜draw＞", "＜xml＞"], exp: "コードで図形を描画します。拡大しても劣化しません。" },
{ q: "外部プラグインコンテンツ（Flashなど）を埋め込むタグは？", o: ["＜embed＞", "＜plugin＞", "＜app＞", "＜flash＞"], exp: "閉じタグのない空要素です。" },
{ q: "汎用的な外部オブジェクトを埋め込むタグは？", o: ["＜object＞", "＜include＞", "＜content＞", "＜item＞"], exp: "PDFの埋め込みなどにも使われます。" },
{ q: "objectタグへパラメータを渡すタグは？", o: ["＜param＞", "＜value＞", "＜arg＞", "＜set＞"], exp: "name属性とvalue属性を持ちます。" },
{ q: "クリッカブルマップの親定義タグは？", o: ["＜map＞", "＜areas＞", "＜define＞", "＜group＞"], exp: "name属性で名前を定義します。" },
// --- テキスト・セマンティック応用 (36-60) ---
{ q: "略語であることを示し、正式名称をtitle属性で説明するタグは？", o: ["＜abbr＞", "＜short＞", "＜acronym＞", "＜def＞"], exp: "Abbreviationの略です。" },
{ q: "用語の定義が行われていることを示すタグは？", o: ["＜dfn＞", "＜def＞", "＜term＞", "＜word＞"], exp: "Definitionの略です。" },
{ q: "キーボード入力を表すタグは？", o: ["＜kbd＞", "＜key＞", "＜type＞", "＜input＞"], exp: "ユーザーが入力すべき文字を示します。" },
{ q: "プログラムからの出力結果を表すタグは？", o: ["＜samp＞", "＜out＞", "＜result＞", "＜echo＞"], exp: "Sample outputの略です。" },
{ q: "数式やプログラムの変数を表すタグは？", o: ["＜var＞", "＜x＞", "＜val＞", "＜param＞"], exp: "Variableの略です。" },
{ q: "機械可読なデータを値として埋め込むタグは？", o: ["＜data＞", "＜val＞", "＜meta＞", "＜info＞"], exp: "value属性に機械用の値を、中身に人用の値を書きます。" },
{ q: "文字の方向（右書き・左書き）を隔離するタグは？", o: ["＜bdi＞", "＜dir＞", "＜isolate＞", "＜rtl＞"], exp: "アラビア語などが混ざる場合に使います。" },
{ q: "文字の方向を強制的に上書きするタグは？", o: ["＜bdo＞", "＜rev＞", "＜force＞", "＜ow＞"], exp: "dir属性とセットで使います。" },
{ q: "著作権表記や免責事項などの注釈を表すタグは？", o: ["＜small＞", "＜note＞", "＜footer＞", "＜bottom＞"], exp: "HTML5では単に小さい文字ではなく「注釈」を意味します。" },
{ q: "もはや正確ではない、削除されたわけではない内容（取り消し線）は？", o: ["＜s＞", "＜del＞", "＜no＞", "＜old＞"], exp: "在庫切れの価格表示などに使います。delは「削除」です。" },
{ q: "スペルミスや固有名詞など、明示的な意味を持たない下線は？", o: ["＜u＞", "＜ins＞", "＜line＞", "＜bottom＞"], exp: "HTML5では装飾目的ではなく、意味的に区別する場合に使います。" },
{ q: "専門用語や思考の声など、他と区別するテキスト（斜体）は？", o: ["＜i＞", "＜em＞", "＜voice＞", "＜thought＞"], exp: "単なる強調（em）とは区別されます。" },
{ q: "キーワードや製品名など、他と区別するテキスト（太字）は？", o: ["＜b＞", "＜strong＞", "＜key＞", "＜mark＞"], exp: "重要性（strong）はないが区別したい場合に使います。" },
{ q: "改行しても良い位置（改行候補）を示すタグは？", o: ["＜wbr＞", "＜br＞", "＜break＞", "＜split＞"], exp: "長い単語の途中などで改行を許可します。" },
{ q: "ルビ未対応ブラウザで括弧を表示するためのタグは？", o: ["＜rp＞", "＜rt＞", "＜rb＞", "＜sub＞"], exp: "漢字（ふりがな）のように表示させます。" },
{ q: "対話型のダイアログ（モーダル）を表示するタグは？", o: ["＜dialog＞", "＜modal＞", "＜popup＞", "＜window＞"], exp: "open属性で表示制御します。" },
{ q: "数学的な数式を記述するためのタグは？", o: ["＜math＞", "＜formula＞", "＜calc＞", "＜equation＞"], exp: "MathMLを記述するルート要素です。" },
{ q: "ページの再読み込みを指定するmetaタグ設定は？", o: ["http-equiv=”refresh”", "name=”reload”", "content=”refresh”", "rel=”refresh”"], exp: "数秒後にジャンプする処理などに使います。" },
{ q: "検索エンジンにインデックス登録を禁止するmeta設定は？", o: ["content=”noindex”", "content=”stop”", "name=”block”", "rel=”noindex”"], exp: "name=”robots” とセットで使います。" },
{ q: "ファビコン（タブのアイコン）を指定するrel属性は？", o: ["rel=”icon”", "rel=”favicon”", "rel=”logo”", "rel=”img”"], exp: "linkタグで使用します。" },
{ q: "正規化されたURL（重複コンテンツ対策）を示すrel属性は？", o: ["rel=”canonical”", "rel=”original”", "rel=”standard”", "rel=”base”"], exp: "検索エンジンに正しいURLを伝えます。" },
{ q: "前のページを示すrel属性は？", o: ["rel=”prev”", "rel=”before”", "rel=”back”", "rel=”last”"], exp: "ページネーションなどで使います。" },
{ q: "次のページを示すrel属性は？", o: ["rel=”next”", "rel=”after”", "rel=”forward”", "rel=”go”"], exp: "ページネーションなどで使います。" },
{ q: "著者の情報ページへのリンクを示すrel属性は？", o: ["rel=”author”", "rel=”user”", "rel=”creator”", "rel=”me”"], exp: "記事の執筆者情報などに使います。" },
{ q: "ヘルプページへのリンクを示すrel属性は？", o: ["rel=”help”", "rel=”info”", "rel=”support”", "rel=”guide”"], exp: "文脈に応じたヘルプへのリンクに使います。" },
// --- テーブル応用 (61-65) ---
{ q: "テーブルのヘッダー行をまとめるタグは？", o: ["＜thead＞", "＜th＞", "＜head＞", "＜top＞"], exp: "印刷時に各ページにヘッダーを表示する際などに役立ちます。" },
{ q: "テーブルの本体行をまとめるタグは？", o: ["＜tbody＞", "＜body＞", "＜main＞", "＜content＞"], exp: "スクロール制御などにも使われます。" },
{ q: "テーブルのフッター行をまとめるタグは？", o: ["＜tfoot＞", "＜foot＞", "＜bottom＞", "＜end＞"], exp: "合計値などを表示する行に使います。" },
{ q: "テーブルの列（縦列）をグループ化してスタイルを当てるタグは？", o: ["＜colgroup＞", "＜colset＞", "＜vgroup＞", "＜column＞"], exp: "個々のセルではなく列全体を操作します。" },
{ q: "colgroup内で個々の列を指定するタグは？", o: ["＜col＞", "＜td＞", "＜c＞", "＜span＞"], exp: "span属性で複数列を指定できます。" },
// --- 属性・グローバル属性 (66-90) ---
{ q: "独自のデータを要素に持たせる属性の接頭辞は？", o: ["data-", "user-", "my-", "custom-"], exp: "data-userid=”123” のようにJSで使用するデータを埋め込みます。" },
{ q: "要素の言語（日本語など）を指定する属性は？", o: ["lang", "locale", "country", "speak"], exp: "lang=”ja” のように指定します。" },
{ q: "文字の書く方向（右から左など）を指定する属性は？", o: ["dir", "direction", "align", "writing"], exp: "rtl（Right to Left）などを指定します。" },
{ q: "要素を意味的に非表示にする（スクリーンリーダーも無視）属性は？", o: ["hidden", "display=”none”", "invisible", "no-show"], exp: "CSSのdisplay:noneと同様の効果を持ちます。" },
{ q: "ユーザーが要素内のテキストを編集可能にする属性は？", o: ["contenteditable", "editable", "write", "input"], exp: "divなどを簡易エディタにできます。" },
{ q: "要素をドラッグ＆ドロップ可能にする属性は？", o: ["draggable", "drag", "move", "drop"], exp: "trueを指定してJSで制御します。" },
{ q: "ショートカットキー（アクセスキー）を割り当てる属性は？", o: ["accesskey", "hotkey", "shortcut", "key"], exp: "Alt + キーなどでフォーカスできます。" },
{ q: "スペルチェックの対象にするか指定する属性は？", o: ["spellcheck", "check", "grammar", "dict"], exp: "inputやtextareaで使用します。" },
{ q: "翻訳ツールによる翻訳を許可・禁止する属性は？", o: ["translate", "trans", "lang-change", "convert"], exp: "yes または no を指定します。" },
{ q: "要素の役割（アクセシビリティ用）を定義する属性は？", o: ["role", "aria", "type", "kind"], exp: "role=”button” のように、タグの意味を補助・上書きします。" },
{ q: "スクリーンリーダー用のラベル（説明）を設定する属性は？", o: ["aria-label", "alt", "label", "read"], exp: "画面には表示されない説明文を提供します。" },
{ q: "SEO対策で、リンク先に評価を渡さないようにする値は？", o: ["rel=”nofollow”", "rel=”noindex”", "rel=”block”", "rel=”stop”"], exp: "コメント欄のリンクや広告などに使います。" },
{ q: "別タブで開く際、セキュリティリスクを防ぐ推奨設定は？", o: ["rel=”noopener noreferrer”", "rel=”safe”", "rel=”secure”", "rel=”private”"], exp: "target=”_blank” とセットで使います。" },
{ q: "スマホでの表示倍率などを制御するmetaタグの名前は？", o: ["viewport", "mobile", "screen", "layout"], exp: "content=”width=device-width...” と指定します。" },
{ q: "CSSやJSの読み込み順序・依存関係を解決できない時、即座に実行する属性は？", o: ["async", "defer", "fast", "now"], exp: "ダウンロード完了後、HTML解析を中断して即実行します。" },
{ q: "HTML解析完了後にJSを実行させる属性は？", o: ["defer", "async", "wait", "last"], exp: "実行順序が保証されるため、asyncより安全です。" },
{ q: "iframeのセキュリティ制限をかける属性は？", o: ["sandbox", "security", "restrict", "safe"], exp: "スクリプト実行などを制限します。" },
{ q: "コンテキストメニュー（右クリック）を無効化・上書きする属性は？", o: ["contextmenu", "oncontext", "menu", "rightclick"], exp: "HTML5.1で廃止されましたが、知識として。" },
{ q: "オートコンプリート機能を無効にする設定は？", o: ["autocomplete=”off”", "autocomplete=”no”", "suggest=”none”", "history=”false”"], exp: "フォーム全体または入力欄ごとに設定します。" },
{ q: "テーブルのヘッダーセルが、行・列どちらの見出しか示す属性は？", o: ["scope", "dir", "for", "span"], exp: "row または col を指定し、アクセシビリティを向上させます。" },
{ q: "スクリプトのタイプをモジュール（ES Modules）にする設定は？", o: ["type=”module”", "type=”es6”", "mode=”module”", "import=”true”"], exp: "import / export 構文が使えるようになります。" },
{ q: "入力モード（スマホのキーボード種類）を指定する属性は？", o: ["inputmode", "keyboard", "type", "mode"], exp: "decimal, numeric, tel, searchなどを指定します。" },
{ q: "Enterキーでフォーム送信されるのを防ぐボタンのタイプは？", o: ["type=”button”", "type=”reset”", "type=”submit”", "type=”none”"], exp: "submit以外を指定すると送信されません。" },
{ q: "フォームのリセット（入力消去）を行うボタンのタイプは？", o: ["type=”reset”", "type=”clear”", "type=”cancel”", "type=”del”"], exp: "フォームの内容を初期値に戻します。" },
{ q: "リストマーカーの種類（黒丸、白丸など）を変えるCSSプロパティは？", o: ["list-style-type", "marker-style", "bullet-type", "li-style"], exp: "HTML属性のtypeは非推奨で、CSSで制御します。" },
// --- その他・マニアック (91-100) ---
{ q: "HTML文書内で基本となるURL（ベースURL）を指定するタグは？", o: ["＜base＞", "＜root＞", "＜url＞", "＜home＞"], exp: "head内に書き、相対パスの基準点を変えます。" },
{ q: "ページ遷移せずにURL履歴を操作するAPIは？", o: ["History API", "Location API", "URL API", "Page API"], exp: "SPA（シングルページアプリ）で重要です。" },
{ q: "オフラインWebアプリのためのキャッシュ定義ファイル指定は？", o: ["manifest", "cache", "offline", "app"], exp: "htmlタグに manifest=”...” と書きます（現在はService Worker推奨）。" },
{ q: "ブラウザのデフォルトスタイルをリセットするCSS手法は？", o: ["リセットCSS", "ノーマルCSS", "ベースCSS", "クリアCSS"], exp: "ブラウザ間の表示差異をなくすために使われます。" },
{ q: "意味的なまとまりはないが、記事の導入部などを表すことがあるクラス名は？", o: ["lead", "intro", "head", "top"], exp: "Bootstrapなどでよく使われる慣習です。" },
{ q: "画像の読み込み優先度を下げる（遅延読み込み）loading属性の値は？", o: ["lazy", "eager", "auto", "low"], exp: "eagerは即時読み込み（デフォルト）です。" },
{ q: "リンクをクリックしたときにリファラを送らない設定は？", o: ["rel=”noreferrer”", "rel=”no-ref”", "rel=”hide”", "rel=”private”"], exp: "プライバシー保護のために使われます。" },
{ q: "特定のメディア（印刷など）だけにCSSを適用する属性は？", o: ["media", "type", "target", "view"], exp: "linkタグやstyleタグで media=”print” のように使います。" },
{ q: "外部スクリプトの改ざんを検知する（SRI）属性は？", o: ["integrity", "hash", "checksum", "validate"], exp: "ハッシュ値を指定して安全性を高めます。" },
{ q: " crossorigin属性で、認証情報（Cookie等）を送らない設定は？", o: ["anonymous", "use-credentials", "none", "public"], exp: "CORSリクエストの設定です。" }
];
/* ロジック */
var currentQuestions = [];
var currentIndex = 0;
var score = 0;
var timerId = null;
var timeLeft = 0;
function shuffle(array) {
var n = array.length, t, i;
while (n) {
i = Math.floor(Math.random() * n--);
t = array[n];
array[n] = array[i];
array[i] = t;
}
return array;
}
function initGame() {
document.getElementById("view-quiz").style.display = "block";
document.getElementById("view-result").style.display = "none";
var poolCopy = [];
for(var k=0; k<POOL.length; k++){ poolCopy.push(POOL[k]); }
var shuffled = shuffle(poolCopy);
currentQuestions = [];
var limit = (shuffled.length < QUEST_NUM) ? shuffled.length : QUEST_NUM;
for(var j=0; j<limit; j++){ currentQuestions.push(shuffled[j]); }
currentIndex = 0;
score = 0;
showQuestion();
}
function showQuestion() {
if (currentIndex >= currentQuestions.length) {
endGame();
return;
}
document.getElementById("feedback-box").style.display = "none";
document.getElementById("options-area").innerHTML = "";
document.getElementById("q-count").textContent = "問 " + (currentIndex + 1) + " / " + currentQuestions.length;
var pct = ((currentIndex) / currentQuestions.length) * 100;
document.getElementById("progress-bar").style.width = pct + "%";
var qData = currentQuestions[currentIndex];
document.getElementById("question-text").innerHTML = qData.q;
var opts = [];
for(var i=0; i<qData.o.length; i++) {
opts.push({ text: qData.o[i], isCorrect: (i === 0) });
}
shuffle(opts);
var optionsHtml = "";
for(var i=0; i<opts.length; i++) {
optionsHtml += "<button class=\"btn-option\" id=\"btn-" + i + "\">" + opts[i].text + "</button>";
}
document.getElementById("options-area").innerHTML = optionsHtml;
for(var i=0; i<opts.length; i++) {
(function(idx) {
document.getElementById("btn-"+idx).onclick = function() { checkAnswer(idx); };
})(i);
}
document.getElementById("options-area").currentOpts = opts;
startTimer();
}
function startTimer() {
clearInterval(timerId);
timeLeft = TIME_LIMIT;
var timerEl = document.getElementById("timer");
timerEl.textContent = "残り " + timeLeft + "秒";
timerId = setInterval(function() {
timeLeft--;
timerEl.textContent = "残り " + timeLeft + "秒";
if (timeLeft <= 0) {
clearInterval(timerId);
handleTimeout();
}
}, 1000);
}
function checkAnswer(selectIndex) {
clearInterval(timerId);
var opts = document.getElementById("options-area").currentOpts;
var btns = document.getElementsByClassName("btn-option");
for(var i=0; i<btns.length; i++) {
btns[i].disabled = true;
if(opts[i].isCorrect) btns[i].classList.add("correct-style");
}
var fbTitle = document.getElementById("fb-title");
if (opts[selectIndex].isCorrect) {
score++;
document.getElementById("btn-"+selectIndex).classList.add("correct-style");
fbTitle.textContent = "正解！";
fbTitle.style.color = "#2E7D32";
} else {
document.getElementById("btn-"+selectIndex).classList.add("wrong-style");
fbTitle.textContent = "不正解...";
fbTitle.style.color = "#C62828";
}
document.getElementById("fb-msg").innerHTML = currentQuestions[currentIndex].exp;
document.getElementById("feedback-box").style.display = "block";
}
function handleTimeout() {
var opts = document.getElementById("options-area").currentOpts;
var btns = document.getElementsByClassName("btn-option");
for(var i=0; i<btns.length; i++) {
btns[i].disabled = true;
if(opts[i].isCorrect) btns[i].classList.add("correct-style");
}
var fbTitle = document.getElementById("fb-title");
fbTitle.textContent = "時間切れ...";
fbTitle.style.color = "#C62828";
document.getElementById("fb-msg").innerHTML = currentQuestions[currentIndex].exp;
document.getElementById("feedback-box").style.display = "block";
}
function nextQuestion() {
currentIndex++;
showQuestion();
}
function endGame() {
document.getElementById("view-quiz").style.display = "none";
document.getElementById("view-result").style.display = "block";
var pct = Math.round((score / currentQuestions.length) * 100);
document.getElementById("result-title").textContent = score + " / " + currentQuestions.length + " 問正解 (" + pct + "%)";
var msg = "";
if(pct === 100) msg = "完璧です！HTMLマスター！";
else if(pct >= 80) msg = "素晴らしい成績です！";
else if(pct >= 60) msg = "合格点です。";
else msg = "基礎から復習しましょう。";
document.getElementById("result-msg").textContent = msg;
var list = document.getElementById("review-list");
list.innerHTML = "";
for(var i=0; i<currentQuestions.length; i++) {
var q = currentQuestions[i];
var div = document.createElement("div");
div.className = "review-item";
div.innerHTML = "Q" + (i+1) + ". " + q.q +
"<div style=\"color:#666; margin-top:5px;\">正解: " + q.o[0] + "</div>";
list.appendChild(div);
}
}
/* ページ読み込み後に開始 */
window.onload = function() {
initGame();
};
</script>
</body>
</html>
使用変数
| ) { timeLeft--; timerEl.textContent = "残り " + timeLeft + "秒"; if -------( Function ) | |
| accept | |
| align | |
| autocomplete | |
| btns | |
| charset | |
| checkAnswer -------( Function ) | |
| class | |
| className | |
| color | |
| content | |
| currentIndex | |
| currentOpts | |
| currentQuestions | |
| disabled | |
| display | |
| div | |
| encoding | |
| endGame -------( Function ) | |
| equiv | |
| fbTitle | |
| form | |
| handleTimeout -------( Function ) | |
| history | |
| href | |
| i | |
| id | |
| idx) { document.getElementById -------( Function ) | |
| import | |
| initGame -------( Function ) | |
| innerHTML | |
| j | |
| k | |
| lang | |
| limit | |
| link | |
| list | |
| load | |
| loading | |
| manifest | |
| media | |
| mode | |
| msg | |
| n | |
| name | |
| nextQuestion -------( Function ) | |
| onclick | |
| onload | |
| open | |
| optionsHtml | |
| opts | |
| pct | |
| POOL | |
| poolCopy | |
| q | |
| qData | |
| QUEST_NUM | |
| rel | |
| role | |
| scale | |
| score | |
| showQuestion -------( Function ) | |
| shuffle -------( Function ) | |
| shuffled | |
| src | |
| startTimer -------( Function ) | |
| step | |
| style | |
| suggest | |
| t | |
| target | |
| textContent | |
| timeLeft | |
| timerEl | |
| timerId | |
| TIME_LIMIT | |
| to | |
| type | |
| usemap | |
| userid | |
| width | |
| window | |
| ”width |