CSSは「セレクタ { プロパティ: 値; }」の形で書きます。波括弧・コロン・セミコロンがポイントです。
Q2
class="card" の要素にスタイルを当てるセレクタはどれですか？
クラスセレクタは .（ドット）+ クラス名で書きます。# はidセレクタです。
Q3
id="header" の要素にスタイルを当てるセレクタはどれですか？
idセレクタは #（シャープ）+ id名で書きます。. はクラスセレクタです。
Q4
CSSファイルをHTMLに読み込むタグはどれですか？
<link rel="stylesheet" href="style.css"> でCSSファイルを読み込みます。<head> の中に書きます。
Q5
すべての要素にスタイルを当てるユニバーサルセレクタを入力してください（半角1文字）
💡 ヒント
アスタリスクと呼ばれる記号です
*（アスタリスク）はすべての要素を選択するセレクタです。box-sizing の一括指定などに使います。
Q6
文字色を変えるCSSプロパティ名を入力してください
💡 ヒント
英語で「色」を意味する単語です
color プロパティで文字色を指定します。背景色は background-color です。
Q7
文字サイズを変えるCSSプロパティ名を入力してください
💡 ヒント
font（フォント）+ size（サイズ）をハイフンでつなぎます
font-size で文字の大きさを指定します。例：font-size: 24px;
Q8
文字を太字にするプロパティと値の組み合わせはどれですか？
font-weight: bold で太字にします。font-style はイタリック体の指定に使います。
Q9
文字を中央揃えにするプロパティと値はどれですか？
text-align: center で文字を中央揃えにします。left で左揃え、right で右揃えです。
Q10
font-family で複数のフォントを指定する理由は？
パソコンにインストールされていないフォントは表示できません。予備のフォントを指定しておくと安心です。
Q11
背景色を変えるCSSプロパティ名を入力してください
💡 ヒント
background（背景）+ color（色）をハイフンでつなぎます
background-color で背景色を指定します。文字色の color と混同しないようにしましょう。
Q12
border: 2px solid #ccc の3つの値の意味は？
border は「太さ → 種類 → 色」の順で書きます。種類は solid（実線）、dashed（破線）などがあります。
Q13
角を丸くするCSSプロパティ名を入力してください
💡 ヒント
border（枠線）+ radius（半径）をハイフンでつなぎます
border-radius で角の丸みを指定します。50% にすると完全な円になります。
Q14
padding: 16px; ___: 24px; — 外側の余白を指定するプロパティは？
padding は内側の余白、margin は外側の余白です。「padding＝パッド（中に詰めるもの）」と覚えましょう。
#RRGGBB の形式で、#ff0000 は赤が最大（ff）、緑と青が0なので赤色です。
Q16
ボックスモデルの4層を外側から順に並べたものはどれですか？
外側から margin → border → padding → content の順です。
padding は content と border の間の内側の余白です。外側の余白は margin です。
Q18
* { ___: border-box; } — width に padding と border を含めるプロパティは？
box-sizing: border-box を指定すると、width に padding と border が含まれ、サイズ管理が楽になります。
Q19
width: 300px; padding: 20px; border: 2px solid black; のとき、box-sizing がデフォルト（content-box）だと実際の横幅は？
content-box では width + padding×2 + border×2 = 300 + 40 + 4 = 344px になります。 📖 詳しい解説を見る →
Q20
要素を左右中央に配置する margin の書き方はどれですか？
margin: 0 auto で上下0・左右autoとなり、要素が左右中央に配置されます。
Q21
.container { display: ___; } — 子要素を横並びにするための値は？
Q22
display: flex を指定するのはどの要素ですか？
display: flex は親要素に指定します。子要素に書いても横並びになりません。
Q23
Flexboxで横方向の揃え方を指定するプロパティはどれですか？
justify-content は横方向（主軸）の揃え方です。align-items は縦方向（交差軸）です。
Q24
Flexboxで要素を縦並びにする flex-direction の値はどれですか？
flex-direction: column で縦並びになります。デフォルトは row（横並び）です。
Q25
Flexboxで子要素が画面幅に収まらないとき、次の行に折り返すプロパティ名を入力してください
💡 ヒント
flex + wrap（包む）をハイフンでつなぎます
Q26
画面幅に応じてCSSを切り替える仕組みはどれですか？
@media（メディアクエリ）で画面幅に応じたスタイルを指定します。
Q27
スマホ表示を正しくするために <head> に書く必要がある meta タグはどれですか？
viewport の meta タグがないと、スマホでもPC用の幅でページが表示されてしまいます。
Q28
@media (max-width: 600px) { } はどういう意味ですか？
max-width: 600px は「幅が600px以下」のときにスタイルが適用されます。
Q29
スマホファーストの書き方で正しいのはどれですか？
スマホファーストでは、基本スタイルをスマホ向けに書き、画面が広いときだけ @media (min-width) で追加します。
Q30
@media (___-width: 768px) { } — 768px以上のときにスタイルを適用する条件は？
min-width: 768px は「幅が768px以上」のときに適用されます。max-width は「以下」です。
Q31
.container { display: grid; ___: 1fr 1fr 1fr; } — 3列のグリッドを作るプロパティは？
grid-template-columns で列の数と幅を指定します。1fr 1fr 1fr で均等3列になります。
Q32
CSS Gridで行と列の間隔を指定するプロパティはどれですか？
gap プロパティでグリッドやFlexboxの要素間の間隔を指定します。row-gap と column-gap を個別に指定することもできます。
Q33
CSS Gridで要素を特定のエリアに配置するプロパティ名を入力してください
💡 ヒント
grid + area（エリア）をハイフンでつなぎます
grid-area で要素を名前付きエリアに配置できます。grid-template-areas と組み合わせて使います。
Q34
ホバー時に0.3秒かけて色が変わるアニメーションを作るプロパティはどれですか？
transition で状態変化（ホバーなど）にかかる時間を指定します。例：transition: color 0.3s;
Q35
@___ fadeIn { from { opacity: 0; } to { opacity: 1; } } — アニメーションを定義するルールは？
@keyframes でアニメーションの動きを定義し、animation プロパティで要素に適用します。
Q36
animation: fadeIn 2s ease infinite; の infinite の意味は？
infinite でアニメーションが無限に繰り返されます。回数を指定したい場合は数字を書きます。
Q37
li:nth-child(2) はどの要素を選択しますか？
:nth-child(2) は2番目の子要素を選択します。:nth-child(even) で偶数番目を選べます。
Q38
p:___(first-child) { color: red; } — 最初の子要素以外の p を赤くする疑似クラスは？
:not() で指定した条件に当てはまらない要素を選択します。:not(:first-child) は最初以外です。
Q39
入力欄にフォーカスが当たったときにスタイルを変える疑似クラス名を入力してください（コロンなし）
💡 ヒント
英語で「焦点を合わせる」を意味する単語です
:focus は要素にフォーカスが当たったとき（クリックやTabキー）に適用されます。
Q40
@media (min-width: 768px) と @media (max-width: 768px) の違いは？
min-width は「以上」、max-width は「以下」です。スマホファーストでは min-width を使います。
Q41
font-size: ___(16px, 4vw, 24px); — 最小値・推奨値・最大値を指定する関数は？
clamp(最小値, 推奨値, 最大値) で画面幅に応じて値が自動調整されます。レスポンシブに便利です。
vw（viewport width）はブラウザの表示幅の1%です。100vw で画面幅いっぱいになります。
Q43
:root { ___: #3b82f6; } .btn { color: var(--primary); } — CSS変数を定義する書き方は？
CSS変数は --変数名: 値; で定義し、var(--変数名) で使います。:root に定義するとどこでも使えます。
Q44
CSS変数の値を使うときの書き方はどれですか？
var(--変数名) でCSS変数の値を参照します。変数名は必ず -- で始めます。
Q45
CSS変数を定義するとき、変数名の先頭につける記号を入力してください（半角2文字）
💡 ヒント
ハイフンを2つ続けます
CSS変数は --（ハイフン2つ）で始めます。例：--main-color: blue;
Q46
スクロールしても画面上部に固定されるナビバーを作る position の値はどれですか？
position: sticky は通常の位置にいて、スクロールで指定位置に達すると固定されます。top: 0 と組み合わせます。
Q47
z-index が効かないのはどんなときですか？
z-index は position が static 以外（relative, absolute, fixed, sticky）のときだけ有効です。 📖 詳しい解説を見る →
Q48
.card:hover { ___: scale(1.05); } — 要素を1.05倍に拡大するプロパティは？
transform: scale(1.05) で要素を1.05倍に拡大します。transition と組み合わせると滑らかに動きます。
Q49
同じ要素に .red { color: red; } と #title { color: blue; } が適用されたとき、文字色はどうなりますか？
id セレクタ（#）はクラスセレクタ（.）より詳細度が高いため、id のスタイルが優先されます。
Q50
CSSの詳細度（優先順位）が高い順に並んでいるのはどれですか？
詳細度は id（100点）> クラス（10点）> タグ（1点）の順です。!important はすべてに優先します。 📖 詳しい解説を見る →