<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 クイズ 20本ノック（全角版）</title>
<style>
body {
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
background-color: #E3F2FD;
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 #1565C0;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h1 { color: #1565C0; font-size: 22px; 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: #2196F3;
transition: width 0.3s;
}
/* 情報エリア */
#info-area {
display: flex;
justify-content: space-between;
font-weight: bold;
color: #555;
margin-bottom: 15px;
font-size: 14px;
}
#timer { color: #D32F2F; font-size: 16px; }
/* 問題文 */
#question-text {
font-size: 18px;
font-weight: bold;
background: #E1F5FE;
padding: 20px;
border-left: 5px solid #039BE5;
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 #e0e0e0;
border-radius: 6px;
cursor: pointer;
font-family: monospace;
transition: background 0.2s;
}
.btn-option:hover {
background: #E3F2FD;
border-color: #2196F3;
}
.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: #F3E5F5;
border-radius: 6px;
text-align: left;
border-left: 5px solid #9C27B0;
}
#fb-msg { margin-top: 10px; line-height: 1.5; }
#btn-next {
display: block;
width: 200px;
margin: 20px auto 0;
padding: 12px;
background: #1565C0;
color: #fff;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
#btn-next:hover { opacity: 0.9; }
/* 結果画面 */
#result-area { display: none; text-align: center; }
#score-display { font-size: 36px; color: #1565C0; font-weight: bold; margin: 20px 0; }
#review-list { text-align: left; margin-top: 30px; border-top: 1px solid #eee; }
.review-item { padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; font-family: monospace; }
.review-ans { color: #666; font-size: 13px; margin-top: 4px; }
</style>
</head>
<body>
<div id="container">
<h1>CSS3 クイズ 20本ノック</h1>
<div class="note">※記号はすべて全角（＜＞：；”’）で表示されます。</div>
<div id="view-quiz" class="screen">
<div id="progress-bg"><div id="progress-bar"></div></div>
<div id="info-area">
<span id="q-count"></span>
<span id="timer"></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="score-display"></div>
<div id="result-msg"></div>
<div style="margin-top:30px;">
<button id="btn-next" onclick="initGame()">もう一度挑戦</button>
</div>
<div id="review-list"></div>
</div>
</div>
<script>
/* 【設定】
CGIエラー回避のため、JSコード内ではシングルクォート(')を一切使用せず、
すべてダブルクォート(")を使用しています。
また、データ内の記号はすべて全角にしています。
*/
var TIME_LIMIT = 30;
var QUEST_NUM = 20;
var POOL = [
// --- セレクタ ---
{ q: "全要素に適用するユニバーサルセレクタは？", o: ["＊", "＃", "．", "all"], exp: "アスタリスク（＊）は全ての要素にマッチします。" },
{ q: "IDセレクタの記号は？", o: ["＃", "．", "：", "＠"], exp: "id=”main” なら ＃main と書きます。" },
{ q: "クラスセレクタの記号は？", o: ["．", "＃", "：", "＿"], exp: "class=”box” なら ．box と書きます。" },
{ q: "「div p」の意味は？（子孫結合子）", o: ["divの中にある全てのp", "divの直下のp", "divの直後のp", "divとpの両方"], exp: "スペース区切りは子孫（入れ子なら階層問わず）を表します。" },
{ q: "「div ＞ p」の意味は？（子結合子）", o: ["divの直下（直接の子）のp", "divの中にある全てのp", "divより大きいp", "divの直後のp"], exp: "＞は親子関係の直下のみを対象にします。" },
{ q: "「div ＋ p」の意味は？（隣接兄弟結合子）", o: ["divの直後にあるp", "divの直前にあるp", "divとpを足す", "divの中のp"], exp: "＋は直後に隣接している要素を指定します。" },
{ q: "「div ～ p」の意味は？（一般兄弟結合子）", o: ["divの後ろにある同じ階層の全てのp", "divの前にあるp", "divの中のp", "divの直後のp"], exp: "～は後ろにある兄弟要素全てを指定します。" },
{ q: "特定の属性を持つ要素を選ぶセレクタは？", o: ["［attr］", "｛attr｝", "（attr）", "＜attr＞"], exp: "［type=”text”］ のように大括弧を使います。" },
{ q: "特定の属性値で「始まる」要素を選ぶのは？", o: ["［attr＾＝”val”］", "［attr＄＝”val”］", "［attr＊＝”val”］", "［attr｜＝”val”］"], exp: "＾＝（ハットイコール）は前方一致です。" },
{ q: "特定の属性値で「終わる」要素を選ぶのは？", o: ["［attr＄＝”val”］", "［attr＾＝”val”］", "［attr＊＝”val”］", "［attr～＝”val”］"], exp: "＄＝（ドルイコール）は後方一致です。" },
// --- 擬似クラス ---
{ q: "マウスが乗った時の状態を指定するのは？", o: ["：hover", "：active", "：focus", "：mouse"], exp: "ホバー時のスタイルを指定します。" },
{ q: "クリック中（アクティブ）の状態を指定するのは？", o: ["：active", "：hover", "：visited", "：focus"], exp: "マウスボタンを押している間の状態です。" },
{ q: "入力フォーム等にフォーカスがある状態は？", o: ["：focus", "：active", "：target", "：checked"], exp: "入力中や選択中の状態です。" },
{ q: "ｎ番目の子要素を指定するのは？", o: ["：nth-child（n）", "：child（n）", "：nth（n）", "：eq（n）"], exp: "偶数（even）や奇数（odd）も指定できます。" },
{ q: "要素の「最初」の子要素を指定するのは？", o: ["：first-child", "：first", "：child-1", "：begin"], exp: "その親から見て最初の子要素です。" },
{ q: "要素の「最後」の子要素を指定するのは？", o: ["：last-child", "：last", "：end", "：final"], exp: "その親から見て最後の子要素です。" },
{ q: "条件を「否定」する擬似クラスは？", o: ["：not（）", "：no（）", "：non（）", "：false（）"], exp: "：not（.class）のように除外指定します。" },
{ q: "要素の直前にコンテンツを挿入する擬似要素は？", o: ["：：before", "：：after", "：：front", "：：top"], exp: "contentプロパティとセットで使います。" },
{ q: "要素の直後にコンテンツを挿入する擬似要素は？", o: ["：：after", "：：before", "：：back", "：：end"], exp: "装飾やアイコン表示によく使われます。" },
{ q: "チェックボックス等が選択された状態は？", o: ["：checked", "：selected", "：active", "：on"], exp: "ラジオボタンやチェックボックスで有効です。" },
// --- テキスト・フォント ---
{ q: "文字の色を指定するプロパティは？", o: ["color", "font-color", "text-color", "font-style"], exp: "文字色は単に color です。" },
{ q: "フォントサイズを指定するプロパティは？", o: ["font-size", "text-size", "size", "font-height"], exp: "px, em, rem, ％などで指定します。" },
{ q: "文字の太さを指定するプロパティは？", o: ["font-weight", "font-style", "font-width", "text-weight"], exp: "bold や 700 などの数値を指定します。" },
{ q: "行の高さを指定するプロパティは？", o: ["line-height", "text-height", "line-spacing", "vertical-size"], exp: "行間を調整するのによく使われます。" },
{ q: "テキストの水平方向の配置（中央揃え等）は？", o: ["text-align", "vertical-align", "align-items", "justify-content"], exp: "center, left, right を指定します。" },
{ q: "下線や取り消し線を制御するプロパティは？", o: ["text-decoration", "text-style", "text-line", "font-decoration"], exp: "none でリンクの下線を消せます。" },
{ q: "文字の間隔（字間）を指定するプロパティは？", o: ["letter-spacing", "word-spacing", "text-spacing", "font-spacing"], exp: "文字同士の隙間を調整します。" },
{ q: "フォントの種類（書体）を指定するのは？", o: ["font-family", "font-type", "font-name", "typeface"], exp: "ゴシック体や明朝体などを指定します。" },
{ q: "大文字・小文字の変換（全て大文字等）をするのは？", o: ["text-transform", "font-case", "text-style", "word-transform"], exp: "uppercase, lowercase, capitalize があります。" },
{ q: "長い単語の折り返し設定は？", o: ["word-break", "text-wrap", "line-break", "word-wrap"], exp: "break-all で強制的に折り返せます。" },
// --- ボックスモデル ---
{ q: "要素の幅を指定するプロパティは？", o: ["width", "size", "horizontal", "span"], exp: "ブロック要素などの横幅です。" },
{ q: "要素の高さを指定するプロパティは？", o: ["height", "tall", "vertical", "depth"], exp: "ブロック要素などの高さです。" },
{ q: "要素の「内側」の余白は？", o: ["padding", "margin", "border", "spacing"], exp: "枠線とコンテンツの間の余白です。" },
{ q: "要素の「外側」の余白は？", o: ["margin", "padding", "outline", "space"], exp: "隣の要素との距離です。" },
{ q: "要素の境界線（枠線）は？", o: ["border", "outline", "stroke", "line"], exp: "太さ、種類、色をまとめて指定できます。" },
{ q: "幅と高さにpadding/borderを含める設定は？", o: ["box-sizing： border-box", "box-sizing： content-box", "box-model： border", "size： border"], exp: "レイアウト崩れを防ぐためによく使われます。" },
{ q: "要素の最大幅（これ以上広がらない）は？", o: ["max-width", "width-limit", "limit-width", "stop-width"], exp: "レスポンシブ対応で重要です。" },
{ q: "要素の最小の高さ（これ以下にならない）は？", o: ["min-height", "low-height", "base-height", "fixed-height"], exp: "コンテンツが少なくても高さを確保したい時に使います。" },
{ q: "要素を中央揃えにするmarginの書き方は？", o: ["margin： 0 auto", "margin： center", "margin： auto 0", "margin： 50％"], exp: "左右の余白を自動（auto）にすることで中央配置されます。" },
{ q: "要素の輪郭線（レイアウトに影響しない枠）は？", o: ["outline", "border", "ring", "edge"], exp: "borderとは違い、要素のサイズを変えません。" },
// --- 背景・装飾 ---
{ q: "背景色を指定するプロパティは？", o: ["background-color", "bg-color", "color-background", "back-color"], exp: "要素の背景を塗りつぶします。" },
{ q: "背景画像を指定するプロパティは？", o: ["background-image", "image", "bg-img", "picture"], exp: "url（’...’）でパスを指定します。" },
{ q: "背景画像のサイズを指定するのは？", o: ["background-size", "bg-size", "image-size", "zoom"], exp: "cover や contain が便利です。" },
{ q: "背景画像の繰り返しを制御するのは？", o: ["background-repeat", "repeat", "tile", "loop"], exp: "no-repeat で1回だけ表示できます。" },
{ q: "要素の角を丸くするプロパティは？", o: ["border-radius", "corner-radius", "border-round", "rounded"], exp: "50％にすると円になります。" },
{ q: "要素に影をつけるプロパティは？", o: ["box-shadow", "drop-shadow", "element-shadow", "border-shadow"], exp: "影の位置、ぼかし、色を指定します。" },
{ q: "要素の透明度を指定するプロパティは？", o: ["opacity", "transparent", "alpha", "visibility"], exp: "0（透明）から 1（不透明）の間で指定します。" },
{ q: "グラデーションを作る関数は？", o: ["linear-gradient（）", "gradient（）", "color-mix（）", "bg-gradient（）"], exp: "background-imageの値として使います。" },
{ q: "背景画像の位置を指定するのは？", o: ["background-position", "bg-pos", "image-align", "xy"], exp: "center center や top right 等で指定します。" },
{ q: "画像のアスペクト比を保ったまま埋める設定は？", o: ["object-fit： cover", "background-size： cover", "img-fit： fill", "fit： cover"], exp: "imgタグやvideoタグのコンテンツの収め方を指定します。" },
// --- レイアウト (Display & Position) ---
{ q: "要素を非表示にする（場所も消える）設定は？", o: ["display： none", "visibility： hidden", "opacity： 0", "hidden： true"], exp: "HTMLから存在しなかったかのように扱われます。" },
{ q: "インライン要素（幅・高さ指定不可）にする値は？", o: ["display： inline", "display： block", "display： box", "display： text"], exp: "spanタグなどのデフォルト挙動です。" },
{ q: "ブロック要素（改行される）にする値は？", o: ["display： block", "display： inline", "display： flex", "display： box"], exp: "divタグなどのデフォルト挙動です。" },
{ q: "インラインかつ幅・高さ指定可能にする値は？", o: ["display： inline-block", "display： block-inline", "display： flexible", "display： box-inline"], exp: "並べつつサイズ指定したい時に便利です。" },
{ q: "要素の配置方法（基準位置）を決めるプロパティは？", o: ["position", "display", "place", "location"], exp: "absolute, relative, fixed 等があります。" },
{ q: "本来の位置を基準に配置するposition値は？", o: ["relative", "absolute", "static", "fixed"], exp: "相対配置です。子要素のabsoluteの基準にもなります。" },
{ q: "親要素（relative等）を基準に配置する値は？", o: ["absolute", "relative", "fixed", "sticky"], exp: "絶対配置です。レイアウトから切り離されます。" },
{ q: "画面（ビューポート）を基準に固定する値は？", o: ["fixed", "absolute", "static", "sticky"], exp: "スクロールしても位置が変わりません（ヘッダー等）。" },
{ q: "スクロールに応じて固定される値は？", o: ["sticky", "fixed", "absolute", "scroll-lock"], exp: "特定の閾値を超えるとfixedのように振る舞います。" },
{ q: "重なり順（前後関係）を指定するプロパティは？", o: ["z-index", "layer", "depth", "order"], exp: "数値が大きいほど手前に表示されます。" },
// --- Flexbox ---
{ q: "Flexboxレイアウトを有効にする値は？", o: ["display： flex", "display： box", "display： grid", "flex： enable"], exp: "親要素（コンテナ）に指定します。" },
{ q: "Flexアイテムの並ぶ向き（横・縦）を指定するのは？", o: ["flex-direction", "flex-flow", "flex-orient", "direction"], exp: "row（横）や column（縦）を指定します。" },
{ q: "主軸（横並びなら左右）の配置・揃え方は？", o: ["justify-content", "align-items", "text-align", "flex-align"], exp: "center, space-between 等で間隔を調整します。" },
{ q: "交差軸（横並びなら上下）の配置・揃え方は？", o: ["align-items", "justify-content", "vertical-align", "align-content"], exp: "center で上下中央揃えになります。" },
{ q: "Flexアイテムの折り返しを指定するのは？", o: ["flex-wrap", "wrap-mode", "flex-flow", "line-break"], exp: "wrap を指定すると複数行になります。" },
{ q: "Flexアイテムの伸び率（余白を埋める倍率）は？", o: ["flex-grow", "flex-shrink", "flex-basis", "flex-expand"], exp: "1以上の数値を指定すると、余ったスペースを埋めます。" },
{ q: "Flexアイテムごとの交差軸の揃え方は？", o: ["align-self", "align-items", "justify-self", "self-align"], exp: "個別のアイテムだけ位置を変えたい時に使います。" },
{ q: "Flexアイテムの間隔を指定するプロパティは？", o: ["gap", "space", "margin", "flex-gap"], exp: "marginを使わずに要素間の隙間を作れます。" },
{ q: "Flexアイテムの並び順を変更するプロパティは？", o: ["order", "z-index", "sort", "flex-order"], exp: "HTMLの記述順を変えずに表示順を変えられます。" },
{ q: "Flexアイテムの基本サイズ（幅/高さ）を指定するのは？", o: ["flex-basis", "flex-size", "width", "base-size"], exp: "flex-grow等の計算の基準となるサイズです。" },
// --- Grid & その他レイアウト ---
{ q: "Gridレイアウトを有効にする値は？", o: ["display： grid", "display： flex", "display： table", "display： matrix"], exp: "2次元のレイアウトを強力に制御できます。" },
{ q: "Gridの列（横方向）の定義をするプロパティは？", o: ["grid-template-columns", "grid-columns", "grid-cols", "columns"], exp: "1fr 1fr のように比率で指定できます。" },
{ q: "Gridアイテムの間隔を指定するプロパティは？", o: ["gap", "grid-gap", "grid-space", "gutter"], exp: "行と列の間隔を一括指定できます。" },
{ q: "はみ出した要素の表示方法（スクロール等）は？", o: ["overflow", "scroll", "clip", "display"], exp: "hidden, scroll, auto 等を指定します。" },
{ q: "要素を左または右に寄せる（回り込み）プロパティは？", o: ["float", "align", "position", "side"], exp: "left または right を指定します。解除にはclearが必要です。" },
{ q: "floatの回り込みを解除するプロパティは？", o: ["clear", "float： none", "break", "reset"], exp: "both を指定して左右の回り込みを解除します。"},
{ q: "行内の垂直方向の配置（画像と文字の位置等）は？", o: ["vertical-align", "text-align", "line-height", "align"], exp: "middle, top, bottom 等を指定します。" },
{ q: "要素を見えなくするが、場所は確保するのは？", o: ["visibility： hidden", "display： none", "opacity： 0", "hide： true"], exp: "透明人間のように、そこに存在はします。" },
{ q: "要素の表示順序や重ね合わせのコンテキストを作るのは？", o: ["position と z-index", "margin", "float", "display"], exp: "positionがstatic以外でないとz-indexは効きません。" },
{ q: "Flexboxのショートハンドプロパティは？", o: ["flex", "flex-all", "flex-set", "flex-box"], exp: "grow, shrink, basis をまとめて指定できます。" },
// --- アニメーション・変形 ---
{ q: "要素の形状変化（回転・拡大・移動）を指定するのは？", o: ["transform", "transition", "animation", "change"], exp: "rotate, scale, translate 等の関数を使います。" },
{ q: "状態変化を滑らかにする（アニメーションさせる）のは？", o: ["transition", "transform", "animate", "smooth"], exp: "変化にかかる時間（duration）等を指定します。" },
{ q: "キーフレームアニメーションを適用するプロパティは？", o: ["animation", "keyframes", "transition", "motion"], exp: "アニメーション名や時間を指定します。" },
{ q: "アニメーションの動き（イージング）を指定するのは？", o: ["transition-timing-function", "transition-ease", "animation-speed", "motion-curve"], exp: "ease, linear, ease-in-out 等があります。" },
{ q: "アニメーションのキーフレーム定義のアットルールは？", o: ["＠keyframes", "＠animation", "＠motion", "＠frame"], exp: "0％から100％までの状態を定義します。" },
{ q: "要素を回転させるtransform関数は？", o: ["rotate（）", "turn（）", "spin（）", "circle（）"], exp: "deg（度）単位で指定します。" },
{ q: "要素を拡大縮小させるtransform関数は？", o: ["scale（）", "zoom（）", "size（）", "resize（）"], exp: "1.5 なら1.5倍になります。" },
{ q: "要素を移動させるtransform関数は？", o: ["translate（）", "move（）", "position（）", "shift（）"], exp: "X軸、Y軸の移動量を指定します。" },
{ q: "変形や回転の原点（中心点）を指定するのは？", o: ["transform-origin", "transform-center", "origin", "pivot"], exp: "デフォルトは中心（50％ 50％）です。" },
{ q: "アニメーション開始までの待ち時間は？", o: ["animation-delay", "transition-wait", "time-lag", "delay"], exp: "指定した時間が経過してから開始します。" },
// --- 単位・レスポンシブ・その他 ---
{ q: "ルート要素（html）の文字サイズに対する相対単位は？", o: ["rem", "em", "px", "％"], exp: "Root emの略。全体のスケーリングに便利です。" },
{ q: "親要素の文字サイズに対する相対単位は？", o: ["em", "rem", "ex", "pt"], exp: "入れ子にするとサイズが複利計算されます。" },
{ q: "ビューポート（画面）の幅に対する1％の単位は？", o: ["vw", "vh", "vp", "wd"], exp: "100vw は画面横幅いっぱいになります。" },
{ q: "ビューポート（画面）の高さに対する1％の単位は？", o: ["vh", "vw", "ht", "hg"], exp: "100vh は画面縦幅いっぱいになります。" },
{ q: "計算式を使って値を指定する関数は？", o: ["calc（）", "math（）", "sum（）", "count（）"], exp: "100％ - 20px のような計算ができます。" },
{ q: "メディアクエリ（条件分岐）のアットルールは？", o: ["＠media", "＠screen", "＠responsive", "＠query"], exp: "画面幅に応じたスタイルの切り替えに使います。" },
{ q: "色の透明度を含む指定方法は？", o: ["rgba（）", "rgb（）", "hex", "color（）"], exp: "Red, Green, Blue, Alpha（透明度）です。" },
{ q: "色相・彩度・輝度で色を指定する方法は？", o: ["hsl（）", "hsv（）", "rgb（）", "cmyk（）"], exp: "直感的に色を調整しやすい形式です。" },
{ q: "CSS変数を定義する構文は？", o: ["--variable-name", "＄variable", "＠variable", "var-name"], exp: "ハイフン2つで始めます。" },
{ q: "CSS変数を使用する関数は？", o: ["var（）", "use（）", "get（）", "val（）"], exp: "color： var（--main-color）； のように使います。" },
{ q: "スタイルの重要度を最優先にするキーワードは？", o: ["！important", "！top", "！priority", "！must"], exp: "詳細度を無視して適用されます（乱用厳禁）。" },
{ q: "外部CSSファイルをインポートするルールは？", o: ["＠import", "＠include", "＠require", "＠load"], exp: "CSSファイル内から別のCSSを読み込みます。" },
{ q: "マウスカーソルの形状を変えるプロパティは？", o: ["cursor", "pointer", "mouse", "hand"], exp: "pointer, text, wait 等を指定します。" },
{ q: "ユーザーによるテキスト選択を制御するのは？", o: ["user-select", "text-select", "select-mode", "copy-protect"], exp: "none にすると選択できなくなります。" },
{ q: "要素が空（子要素なし）の時に適用される擬似クラスは？", o: ["：empty", "：blank", "：null", "：void"], exp: "中身がない要素を隠す時などに使えます。" },
{ q: "クリック等のイベントを無効化するプロパティは？", o: ["pointer-events", "click-events", "touch-action", "user-input"], exp: "none にするとクリックが透過します。" },
{ q: "長い文章を「...」で省略表示するプロパティは？", o: ["text-overflow： ellipsis", "overflow： dot", "text-wrap： none", "word-break： ellipsis"], exp: "white-space： nowrap; overflow： hidden; とセットで使います。" },
{ q: "画像にフィルター効果（ぼかし等）をかけるのは？", o: ["filter", "effect", "image-mode", "blend"], exp: "blur, grayscale, brightness 等があります。" },
{ q: "スクロールを滑らかにするプロパティは？", o: ["scroll-behavior： smooth", "scroll-mode： smooth", "scrolling： smooth", "behavior： smooth"], exp: "htmlタグに指定してページ内リンクを滑らかにします。" },
{ q: "プリント（印刷）時のみ適用するメディアクエリは？", o: ["＠media print", "＠print", "＠media paper", "＠page"], exp: "印刷時のレイアウト調整に使います。" },
// --- セレクタ応用 (1-20) ---
{ q: "直下の子要素のみを対象とする結合子は？", o: ["＞", "＋", "～", " "], exp: "親 ＞ 子 のように記述します。" },
{ q: "直後の兄弟要素のみを対象とする結合子は？", o: ["＋", "～", "＞", "＆"], exp: "兄 ＋ 弟 のように記述します。" },
{ q: "後ろにある全ての兄弟要素を対象とする結合子は？", o: ["～", "＋", "＞", "｜"], exp: "兄 ～ 弟たち のように記述します。" },
{ q: "ルート要素（通常はhtml）を指定する擬似クラスは？", o: ["：root", "：html", "：base", "：top"], exp: "CSS変数の定義場所としてよく使われます。" },
{ q: "URLのフラグメント（＃id）と一致する要素は？", o: ["：target", "：active", "：focus", "：match"], exp: "ページ内リンクでジャンプした先の要素です。" },
{ q: "指定した言語（lang属性）を持つ要素は？", o: ["：lang（）", "：locale（）", "：speak（）", "：text（）"], exp: "：lang（ja）のように使います。" },
{ q: "入力欄が有効（操作可能）な状態は？", o: ["：enabled", "：active", "：valid", "：on"], exp: "disabled属性がない要素が対象です。" },
{ q: "入力欄が無効（操作不可）な状態は？", o: ["：disabled", "：inactive", "：invalid", "：off"], exp: "disabled属性がある要素が対象です。" },
{ q: "入力必須のフォーム部品を指定するのは？", o: ["：required", "：must", "：need", "：important"], exp: "required属性がある要素が対象です。" },
{ q: "入力任意（必須ではない）フォーム部品は？", o: ["：optional", "：free", "：any", "：allow"], exp: "required属性がない要素が対象です。" },
{ q: "読み取り専用のフォーム部品は？", o: ["：read-only", "：locked", "：static", "：fixed"], exp: "readonly属性がある要素が対象です。" },
{ q: "書き込み可能（編集可能）なフォーム部品は？", o: ["：read-write", "：editable", "：input", "：write"], exp: "readonlyやdisabledがない要素です。" },
{ q: "入力値が正しい形式（バリデーションOK）なのは？", o: ["：valid", "：ok", "：true", "：pass"], exp: "email形式などが正しい場合です。" },
{ q: "入力値が不正な形式（バリデーションNG）なのは？", o: ["：invalid", "：error", "：false", "：fail"], exp: "必須項目が空、形式違いなどの場合です。" },
{ q: "プレースホルダー（入力ヒント）が表示中の要素は？", o: ["：placeholder-shown", "：empty", "：hint", "：blank"], exp: "入力欄が空でヒントが出ている状態です。" },
{ q: "範囲内（range等）の値が許容範囲内にある時は？", o: ["：in-range", "：valid-range", "：ok", "：inside"], exp: "min/max属性の範囲内の場合です。" },
{ q: "範囲外の値が入力されている時は？", o: ["：out-of-range", "：invalid", "：outside", "：error"], exp: "min/max属性の範囲外の場合です。" },
{ q: "唯一の子要素（兄弟がいない）を指定するのは？", o: ["：only-child", "：single", "：one", "：unique"], exp: "親要素の中にポツンと1つだけある要素です。" },
{ q: "その型（タグ）の中で唯一の子要素なのは？", o: ["：only-of-type", "：single-type", "：unique-type", "：one-type"], exp: "他のタグの兄弟はいても、同じタグがいなければ対象です。" },
{ q: "子要素を持たない（テキスト含む）空の要素は？", o: ["：empty", "：blank", "：null", "：void"], exp: "スペースや改行が入っていると対象外になることもあります。" },
// --- テキスト・フォント装飾応用 (21-40) ---
{ q: "最初の1文字だけを指定する擬似要素は？", o: ["：：first-letter", "：：first-char", "：：one", "：：initial"], exp: "ドロップキャップ（大きな頭文字）を作るのに使います。" },
{ q: "最初の1行だけを指定する擬似要素は？", o: ["：：first-line", "：：top-line", "：：head", "：：line-1"], exp: "ウィンドウ幅に応じて対象範囲が変わります。" },
{ q: "ユーザーが選択（反転）した部分を指定するのは？", o: ["：：selection", "：：selected", "：：highlight", "：：range"], exp: "背景色や文字色を変更できます。" },
{ q: "プレースホルダー（入力ヒント）のスタイル変更は？", o: ["：：placeholder", "：：hint", "：：input-text", "：：value"], exp: "文字色を薄くする際などに使います。" },
{ q: "リストマーカー（黒丸など）のスタイル変更は？", o: ["：：marker", "：：bullet", "：：list-style", "：：point"], exp: "色やフォントを変えられます。" },
{ q: "文字に影をつけるプロパティは？", o: ["text-shadow", "font-shadow", "char-shadow", "word-shadow"], exp: "xずれ yずれ ぼかし 色 の順で指定します。" },
{ q: "単語の途中で改行するかどうかを指定するのは？", o: ["word-wrap", "text-wrap", "line-wrap", "break-word"], exp: "長い英単語のはみ出し防止に使います。" },
{ q: "禁則処理（改行位置のルール）を指定するのは？", o: ["line-break", "word-break", "text-break", "rule-break"], exp: "日本語の句読点などの処理を厳密にするか決めます。" },
{ q: "空白や改行の扱い（折り返し等）を指定するのは？", o: ["white-space", "text-space", "blank-space", "pre-wrap"], exp: "pre, nowrap, normal などを指定します。" },
{ q: "テキストを両端揃えにする値は？", o: ["text-align： justify", "text-align： both", "text-align： distribute", "text-align： full"], exp: "新聞や雑誌のようなレイアウトになります。" },
{ q: "縦書きにするプロパティは？", o: ["writing-mode", "text-orient", "direction", "vertical-mode"], exp: "vertical-rl で右縦書きになります。" },
{ q: "文字の向き（縦書き時の文字回転）を指定するのは？", o: ["text-orientation", "char-rotate", "glyph-orient", "font-rotate"], exp: "upright で英数字も縦向きになります。" },
{ q: "フォントの表示を滑らかにする（アンチエイリアス）独自拡張は？", o: ["-webkit-font-smoothing", "font-smooth", "text-smooth", "render-mode"], exp: "Mac等で文字を細く綺麗に見せるためによく使われます。" },
{ q: "引用符（クォーテーション）の種類を指定するのは？", o: ["quotes", "quote-style", "q-mark", "content-quote"], exp: "qタグの前後につく記号を設定します。" },
{ q: "タブ文字（Tab）の幅を指定するプロパティは？", o: ["tab-size", "tab-width", "indent-size", "tab-space"], exp: "preタグ内のタブ幅調整に使います。" },
{ q: "フォントのカーニング（文字詰め）を自動で行うのは？", o: ["font-kerning", "text-kerning", "letter-fit", "auto-kern"], exp: "OpenTypeフォントの詰め情報を利用します。" },
{ q: "合字（リガチャ）の表示を制御するプロパティは？", o: ["font-variant-ligatures", "font-ligature", "text-ligature", "char-join"], exp: "fi や ffl などの連結文字の扱いです。" },
{ q: "数字の表示幅（等幅・プロポーショナル）を制御するのは？", o: ["font-variant-numeric", "font-number", "digit-width", "num-spacing"], exp: "tabular-nums で表組み用の等幅数字になります。" },
{ q: "インデント（字下げ）を指定するプロパティは？", o: ["text-indent", "padding-left", "margin-left", "char-indent"], exp: "段落の最初の行を字下げします。" },
{ q: "テキストのはみ出し部分を「...」にする値は？", o: ["text-overflow： ellipsis", "text-overflow： dot", "overflow： text", "word-break： dot"], exp: "一行表示制限と組み合わせて使います。" },
// --- ボックス・レイアウト応用 (41-60) ---
{ q: "要素を画面中央に配置する簡単な方法は？（Grid版）", o: ["place-items： center", "align-place： center", "center： both", "grid-center： true"], exp: "display： grid とこれ1行で中央配置できます。" },
{ q: "コンテンツのサイズに合わせて要素幅を決める値は？", o: ["width： fit-content", "width： auto", "width： max-content", "width： min-content"], exp: "中身のテキスト量に応じた幅になります。" },
{ q: "改行なしでの最大幅（可能な限り広げる）は？", o: ["width： max-content", "width： full", "width： no-wrap", "width： 100％"], exp: "親要素をはみ出しても折り返しません。" },
{ q: "単語の折り返しが可能な最小幅は？", o: ["width： min-content", "width： break", "width： smallest", "width： 0"], exp: "一番長い単語の幅になります。" },
{ q: "要素の縦横比（アスペクト比）を指定するプロパティは？", o: ["aspect-ratio", "ratio", "size-ratio", "box-ratio"], exp: "16 / 9 のように指定できます。" },
{ q: "スクロールバーの表示を制御するプロパティは？", o: ["overflow", "scroll", "scrollbar", "display-scroll"], exp: "auto, hidden, scroll, visible があります。" },
{ q: "横方向のみスクロールさせるプロパティは？", o: ["overflow-x", "scroll-x", "overflow-horizontal", "x-scroll"], exp: "縦方向は overflow-y です。" },
{ q: "要素の背面の背景をぼかすフィルターは？", o: ["backdrop-filter", "background-blur", "glass-effect", "filter-back"], exp: "すりガラス表現に使われます。" },
{ q: "要素の形状を切り抜く（マスクする）プロパティは？", o: ["clip-path", "mask", "crop", "cut"], exp: "polygon（...）などで多角形に切り抜けます。" },
{ q: "画像で要素をマスクする（隠す）プロパティは？", o: ["mask-image", "clip-image", "masking", "alpha-mask"], exp: "PNGやSVGの透明度を利用して切り抜きます。" },
{ q: "テーブルのセル間の隙間をなくすプロパティは？", o: ["border-collapse", "table-spacing", "cell-spacing", "border-spacing"], exp: "collapse を指定すると線が一本化します。" },
{ q: "空のセルの枠線を表示するか隠すかは？", o: ["empty-cells", "blank-cells", "void-border", "null-show"], exp: "show または hide を指定します。" },
{ q: "テーブルの列幅を固定（高速化）するアルゴリズムは？", o: ["table-layout： fixed", "table-width： fixed", "layout： strict", "width： static"], exp: "コンテンツ量に関わらず列幅を固定します。" },
{ q: "画像の下にできる微妙な隙間を消す方法は？", o: ["vertical-align： bottom", "display： none", "margin-bottom： 0", "line-height： 0"], exp: "インライン要素のベースラインによる隙間対策です。" },
{ q: "親要素からプロパティ値を強制的に継承させる値は？", o: ["inherit", "initial", "unset", "revert"], exp: "通常継承しないプロパティも継承させます。" },
{ q: "プロパティ値を初期値（デフォルト）に戻す値は？", o: ["initial", "reset", "default", "normal"], exp: "ブラウザのデフォルトスタイルに戻します。" },
{ q: "要素を印刷時に改ページさせないプロパティは？", o: ["break-inside", "page-break", "print-break", "keep-together"], exp: "avoid を指定して途中での切断を防ぎます。" },
{ q: "段組み（マルチカラム）のカラム数を指定するのは？", o: ["column-count", "columns", "col-num", "grid-cols"], exp: "新聞のような段組みレイアウトを作れます。" },
{ q: "段組みのカラム間の線（区切り線）は？", o: ["column-rule", "column-border", "gap-border", "rule-style"], exp: "borderと同じように線種や色を指定します。" },
{ q: "要素のリサイズ（ユーザー操作）を許可するのは？", o: ["resize", "user-resize", "sizable", "drag-size"], exp: "both, horizontal, vertical で方向を指定します。" },
// --- CSS変数・関数・計算 (61-80) ---
{ q: "複数の値から最小値を選ぶ関数は？", o: ["min（）", "low（）", "small（）", "least（）"], exp: "min（50vw， 500px）のように使います。" },
{ q: "複数の値から最大値を選ぶ関数は？", o: ["max（）", "high（）", "large（）", "most（）"], exp: "max（100px， 10vw）のように使います。" },
{ q: "値を範囲内（最小～最大）に収める関数は？", o: ["clamp（）", "range（）", "limit（）", "fit（）"], exp: "clamp（最小， 推奨， 最大）でレスポンシブに使えます。" },
{ q: "要素の属性値をCSSで使用する関数は？", o: ["attr（）", "get（）", "prop（）", "data（）"], exp: "contentプロパティなどで attr（href）のように使います。" },
{ q: "カウンタ（連番）の値を表示する関数は？", o: ["counter（）", "count（）", "number（）", "index（）"], exp: "擬似要素のcontentプロパティで使います。" },
{ q: "カウンタの値を増やすプロパティは？", o: ["counter-increment", "counter-add", "counter-plus", "count-up"], exp: "指定した名前のカウンタを1増やします。" },
{ q: "カウンタの値をリセット（初期化）するのは？", o: ["counter-reset", "counter-init", "count-clear", "reset-count"], exp: "番号を1から振り直す時などに使います。" },
{ q: "計算式で剰余（あまり）を求める演算子は？（Sass等ではなくCSS）", o: ["mod（）", "rem（）", "％", "modulus（）"], exp: "最近のブラウザで mod（）関数がサポートされ始めています。" },
{ q: "三角関数（サイン）を使う関数は？", o: ["sin（）", "cos（）", "tan（）", "deg（）"], exp: "円形配置のアニメーションなどに使えます。" },
{ q: "色を明るく・暗く調整できる新しい色関数は？", o: ["color-mix（）", "mix（）", "adjust（）", "lighten（）"], exp: "2つの色を指定割合で混ぜることができます。" },
{ q: "相対色構文（from ...）を使える関数は？", o: ["rgb（）", "calc（）", "var（）", "color（）"], exp: "rgb（from var（--color） r g b / 0.5）のように既存色を加工できます。" },
{ q: "CSS変数のフォールバック（変数が無い時の値）は？", o: ["var（--name， fallback）", "var（--name || fallback）", "--name ?? fallback", "def（--name， val）"], exp: "第2引数に代替値を指定できます。" },
{ q: "円形グラデーションを作る関数は？", o: ["radial-gradient（）", "circle-gradient（）", "round-gradient（）", "pie-gradient（）"], exp: "中心から外側へ広がるグラデーションです。" },
{ q: "扇形（円錐）グラデーションを作る関数は？", o: ["conic-gradient（）", "angle-gradient（）", "fan-gradient（）", "radar（）"], exp: "色相環や円グラフのような塗りができます。" },
{ q: "画像を繰り返してボーダーにするプロパティは？", o: ["border-image", "border-pic", "frame-image", "img-border"], exp: "装飾的な枠線を作るのに使います。" },
{ q: "2つの画像をブレンド（乗算など）するプロパティは？", o: ["background-blend-mode", "mix-blend-mode", "image-blend", "blend-mode"], exp: "背景色と背景画像を混ぜることができます。" },
{ q: "要素自体を背景とブレンドさせるプロパティは？", o: ["mix-blend-mode", "element-blend", "layer-blend", "composite"], exp: "Photoshopのレイヤー効果のようなことができます。" },
{ q: "パス（SVG等）に沿って要素を動かすプロパティは？", o: ["offset-path", "motion-path", "path-move", "follow-path"], exp: "曲線的なアニメーションが可能です。" },
{ q: "パス上の位置を指定するプロパティは？", o: ["offset-distance", "path-position", "motion-offset", "distance"], exp: "0％から100％で位置を指定します。" },
{ q: "要素を回転させながらパスに沿わせるのは？", o: ["offset-rotate", "path-angle", "follow-angle", "orient"], exp: "進行方向に向けて要素を回転させられます。" },
// --- Flexbox & Grid 詳細 (81-90) ---
{ q: "Gridでエリアに名前を付けて配置する方法は？", o: ["grid-template-areas", "grid-area-names", "grid-map", "area-template"], exp: "アスキーアートのようにレイアウトを定義できます。" },
{ q: "Gridアイテムを名前付きエリアに配置するプロパティは？", o: ["grid-area", "grid-name", "area-pos", "place-area"], exp: "header や sidebar などの名前を指定します。" },
{ q: "Gridの行（縦方向）の定義をするプロパティは？", o: ["grid-template-rows", "grid-rows", "rows-template", "grid-height"], exp: "行の高さや数を定義します。" },
{ q: "明示していない行・列のサイズを指定するプロパティは？", o: ["grid-auto-rows / columns", "grid-default", "auto-size", "implicit-grid"], exp: "自動生成されるトラックのサイズを決めます。" },
{ q: "Gridアイテムの自動配置アルゴリズム（流れ）は？", o: ["grid-auto-flow", "grid-flow", "auto-place", "grid-direction"], exp: "row, column, dense などを指定します。" },
{ q: "Flexアイテムを縮小させない（潰さない）設定は？", o: ["flex-shrink： 0", "flex-grow： 1", "flex-basis： auto", "no-shrink： true"], exp: "親が狭くても元のサイズを維持します。" },
{ q: "Flexコンテナ内で行間（交差軸）の間隔指定は？", o: ["align-content", "row-gap", "line-spacing", "flex-spacing"], exp: "複数行になった時の行同士の間隔配置です。" },
{ q: "Gridのトラックサイズで「コンテンツの最小～最大」は？", o: ["minmax（）", "fit-content（）", "range（）", "flex（）"], exp: "minmax（100px， 1fr）のように使います。" },
{ q: "繰り返しパターンを定義するGrid関数は？", o: ["repeat（）", "loop（）", "cycle（）", "times（）"], exp: "repeat（3， 1fr）で3回繰り返します。" },
{ q: "空きスペースに収まるだけ詰め込むGridキーワードは？", o: ["auto-fill / auto-fit", "fill / fit", "responsive", "auto-flow"], exp: "repeat関数内で使い、レスポンシブグリッドを作ります。" },
// --- その他・最新機能・アクセシビリティ (91-100) ---
{ q: "カスケードレイヤー（優先順位管理）を定義するルールは？", o: ["＠layer", "＠priority", "＠group", "＠cascade"], exp: "詳細度バトルを回避してスタイルを管理できます。" },
{ q: "CSSのみでネスト（入れ子）を書く機能は？", o: ["CSS Nesting", "Sass Mode", "Hierarchical CSS", "Tree CSS"], exp: "＆ を使って親セレクタを参照できます（最近のブラウザで対応）。" },
{ q: "要素が含まれているかどうかを判定する親セレクタは？", o: ["：has（）", "：parent（）", "：contains（）", "：in（）"], exp: "子要素の状態に応じて親のスタイルを変えられます。" },
{ q: "スクロールバーのスタイル（色・幅）を変える標準プロパティは？", o: ["scrollbar-color / width", "scroll-style", "bar-design", "::-webkit-scrollbar"], exp: "FirefoxとChrome等で標準化が進んでいるプロパティです。" },
{ q: "ダークモード等の色設定を検知するメディアクエリは？", o: ["prefers-color-scheme", "color-mode", "dark-mode", "theme"], exp: "dark または light を判定します。" },
{ q: "視差効果（パララックス）を減らす設定を検知するのは？", o: ["prefers-reduced-motion", "no-motion", "reduce-anim", "safe-anim"], exp: "アニメーションを不快に感じるユーザーへの配慮です。" },
{ q: "印刷時にのみ適用されるページ設定（余白等）は？", o: ["＠page", "＠print", "＠paper", "＠margin"], exp: "marginやsizeを指定して印刷制御します。" },
{ q: "要素をコンテナのサイズに応じて変化させるクエリは？", o: ["＠container", "＠element", "＠box", "＠resize"], exp: "コンテナクエリ。画面幅ではなく親要素の幅に応答します。" },
{ q: "コンテナクエリのために親要素に設定するプロパティは？", o: ["container-type", "container-mode", "is-container", "query-target"], exp: "inline-size などを指定してコンテキストを作ります。" },
{ q: "特定のプロパティ値をサポートしているか判定するクエリは？", o: ["＠supports", "＠can-use", "＠if", "＠enable"], exp: "機能の対応状況に応じてスタイルを出し分けます。" }
];
/* ロジック */
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);
// 20問だけ取り出す
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("score-display").textContent = score + " / " + currentQuestions.length + " 問正解 (" + pct + "%)";
var msg = "";
if(pct === 100) msg = "CSSマスターです！完璧！";
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 class=\"review-ans\">正解: " + q.o[0] + "</div>";
list.appendChild(div);
}
}
/* ページ読み込み後に開始 */
window.onload = function() {
initGame();
};
</script>
</body>
</html>
使用変数
| ) { timeLeft--; timerEl.textContent = "残り " + timeLeft + "秒"; if -------( Function ) | |
| , "transition-ease", "animation-speed", "motion-curve"], exp: "ease, linear, ease-in-out 等があります。" }, { q: "アニメーションのキーフレーム定義のアットルールは？", o: ["＠keyframes", "＠animation", "＠motion", "＠frame"], exp: "0％から100％までの状態を定義します。" }, { q: "要素を回転させるtransform関数は？", o: ["rotate（）", "turn（）", "spin（）", "circle（）"], exp: "deg（度）単位で指定します。" }, { q: "要素を拡大縮小させるtransform関数は？", o: ["scale（）", "zoom（）", "size（）", "resize（）"], exp: "1.5 なら1.5倍になります。" }, { q: "要素を移動させるtransform関数は？", o: ["translate（）", "move（）", "position（）", "shift（）"], exp: "X軸、Y軸の移動量を指定します。" }, { q: "変形や回転の原点（中心点）を指定するのは？", o: ["transform-origin", "transform-center", "origin", "pivot"], exp: "デフォルトは中心（50％ 50％）です。" }, { q: "アニメーション開始までの待ち時間は？", o: ["animation-delay", "transition-wait", "time-lag", "delay"], exp: "指定した時間が経過してから開始します。" }, // --- 単位・レスポンシブ・その他 --- { q: "ルート要素（html）の文字サイズに対する相対単位は？", o: ["rem", "em", "px", "％"], exp: "Root emの略。全体のスケーリングに便利です。" }, { q: "親要素の文字サイズに対する相対単位は？", o: ["em", "rem", "ex", "pt"], exp: "入れ子にするとサイズが複利計算されます。" }, { q: "ビューポート（画面）の幅に対する1％の単位は？", o: ["vw", "vh", "vp", "wd"], exp: "100vw は画面横幅いっぱいになります。" }, { q: "ビューポート（画面）の高さに対する1％の単位は？", o: ["vh", "vw", "ht", "hg"], exp: "100vh は画面縦幅いっぱいになります。" }, { q: "計算式を使って値を指定する関数は？", o: ["calc（）", "math（）", "sum（）", "count（）"], exp: "100％ - 20px のような計算ができます。" }, { q: "メディアクエリ（条件分岐）のアットルールは？", o: ["＠media", "＠screen", "＠responsive", "＠query"], exp: "画面幅に応じたスタイルの切り替えに使います。" }, { q: "色の透明度を含む指定方法は？", o: ["rgba（）", "rgb（）", "hex", "color（）"], exp: "Red, Green, Blue, Alpha（透明度）です。" }, { q: "色相・彩度・輝度で色を指定する方法は？", o: ["hsl（）", "hsv（）", "rgb（）", "cmyk（）"], exp: "直感的に色を調整しやすい形式です。" }, { q: "CSS変数を定義する構文は？", o: ["--variable-name", "＄variable", "＠variable", "var-name"], exp: "ハイフン2つで始めます。" }, { q: "CSS変数を使用する関数は？", o: ["var（）", "use（）", "get（）", "val（）"], exp: "color： var（--main-color）； のように使います。" }, { q: "スタイルの重要度を最優先にするキーワードは？", o: ["！important", "！top", "！priority", "！must"], exp: "詳細度を無視して適用されます（乱用厳禁）。" }, { q: "外部CSSファイルをインポートするルールは？", o: ["＠import", "＠include", "＠require", "＠load"], exp: "CSSファイル内から別のCSSを読み込みます。" }, { q: "マウスカーソルの形状を変えるプロパティは？", o: ["cursor", "pointer", "mouse", "hand"], exp: "pointer, text, wait 等を指定します。" }, { q: "ユーザーによるテキスト選択を制御するのは？", o: ["user-select", "text-select", "select-mode", "copy-protect"], exp: "none にすると選択できなくなります。" }, { q: "要素が空（子要素なし）の時に適用される擬似クラスは？", o: ["：empty", "：blank", "：null", "：void"], exp: "中身がない要素を隠す時などに使えます。" }, { q: "クリック等のイベントを無効化するプロパティは？", o: ["pointer-events", "click-events", "touch-action", "user-input"], exp: "none にするとクリックが透過します。" }, { q: "長い文章を「...」で省略表示するプロパティは？", o: ["text-overflow： ellipsis", "overflow： dot", "text-wrap： none", "word-break： ellipsis"], exp: "white-space： nowrap; overflow： hidden; とセットで使います。" }, { q: "画像にフィルター効果（ぼかし等）をかけるのは？", o: ["filter", "effect", "image-mode", "blend"], exp: "blur, grayscale, brightness 等があります。" }, { q: "スクロールを滑らかにするプロパティは？", o: ["scroll-behavior： smooth", "scroll-mode： smooth", "scrolling： smooth", "behavior： smooth"], exp: "htmlタグに指定してページ内リンクを滑らかにします。" }, { q: "プリント（印刷）時のみ適用するメディアクエリは？", o: ["＠media print", "＠print", "＠media paper", "＠page"], exp: "印刷時のレイアウト調整に使います。" },// --- セレクタ応用 -------( Function ) | |
| btns | |
| charset | |
| checkAnswer -------( Function ) | |
| class | |
| className | |
| color | |
| content | |
| currentIndex | |
| currentOpts | |
| currentQuestions | |
| disabled | |
| display | |
| div | |
| endGame -------( Function ) | |
| fbTitle | |
| handleTimeout -------( Function ) | |
| i | |
| id | |
| idx) { document.getElementById -------( Function ) | |
| initGame -------( Function ) | |
| innerHTML | |
| j | |
| k | |
| lang | |
| limit | |
| list | |
| msg | |
| n | |
| name | |
| nextQuestion -------( Function ) | |
| onclick | |
| onload | |
| optionsHtml | |
| opts | |
| pct | |
| POOL | |
| poolCopy | |
| q | |
| qData | |
| QUEST_NUM | |
| scale | |
| score | |
| showQuestion -------( Function ) | |
| shuffle -------( Function ) | |
| shuffled | |
| startTimer -------( Function ) | |
| style | |
| t | |
| textContent | |
| timeLeft | |
| timerEl | |
| timerId | |
| TIME_LIMIT | |
| width | |
| ［type |