🏆 このクイズはコース全体の理解度を確認する応用問題です。複数レッスンの知識を組み合わせて解きましょう。
Q1
.title { color: red; } と #title { color: blue; } が同じ要素に適用されるとき、文字色はどちらになりますか？
CSSにはセレクタの優先度（詳細度）があります。id セレクタ（#）はclass セレクタ（.）より優先度が高いため、書く順番に関係なく id の方が適用されます。
Q2
.card { width: 300px; padding: 16px; ___: border-box; display: flex; } — padding を含めて幅を300pxにするプロパティは？
box-sizing: border-box を指定すると、padding と border を含めて width の値になります。指定しないと 300px + 16px×2 = 332px になってしまいます。
Q3
カードUIで「背景色・角丸・影・内側余白」を設定したい。正しいプロパティの組み合わせはどれ？
背景色は background-color、角丸は border-radius、影は box-shadow、内側余白は padding です。これらを組み合わせるとカードUIが作れます。
Q4
ナビゲーションをPCでは横並び、スマホでは縦並びにしたい。メディアクエリ内で変更すべき Flexbox プロパティはどれ？
flex-direction は子要素の並ぶ方向を決めます。row（横並び・初期値）から column（縦並び）に変更することで、スマホでは縦に積み重なるレイアウトになります。
Q5
文字色を白、背景色を黒にしたい。背景色を指定するプロパティ名は？
💡 ヒント
background（背景）+ color（色）をハイフンでつなぎます
文字色は color、背景色は background-color です。color だけだと文字色しか変わりません。この2つを混同しないように注意しましょう。
Q6
3つのカードを横並びにして均等に配置したい。親要素に display: flex を指定した後、均等配置にする justify-content の値はどれ？
space-between は子要素の間に均等なスペースを入れます。center は中央寄せ、flex-start は左寄せです。space-around も均等配置ですが、両端にもスペースが入ります。
Q7
@media (max-width: ___px) { .nav { flex-direction: column; } } — スマホ向けのブレークポイントとして一般的な値は？
768px はタブレットとスマホの境界としてよく使われるブレークポイントです。768px以下でスマホ向けのレイアウトに切り替えるのが一般的です。
Q8
要素の外側に余白を作るのは margin、内側に余白を作るのは padding。では border はどこに表示されますか？
ボックスモデルは外側から margin → border → padding → content の順です。border は margin と padding の間に位置し、要素の境界線として表示されます。
Q9
Flexbox で子要素を縦方向（交差軸）の中央に揃えるプロパティ名は？
💡 ヒント
align（揃える）+ items（要素）をハイフンでつなぎます
justify-content は主軸（横方向）、align-items は交差軸（縦方向）の配置を制御します。align-items: center で縦方向の中央揃えになります。
Q10
以下のCSSで意図通りに動かないものはどれ？ A: .card { margin: 0 auto; }（widthなし） / B: display: flex; justify-content: center; / C: text-align: center;（ブロック要素を中央寄せ）
A は width を指定しないと margin: 0 auto は効きません（要素が幅いっぱいに広がるため）。C の text-align はインライン要素にしか効かず、ブロック要素の中央寄せには使えません。B は正しく動きます。
Q11
transition: all 0.3s ease; を設定した要素で、ホバー時に色が滑らかに変わります。transition を設定する場所はどこが正しい？
transition は「変化の仕方」を定義するので、通常状態に書きます。:hover に書くとホバー時にだけ適用され、マウスを離したときに瞬時に戻ってしまいます。
Q12
要素を画面の左右中央に配置するとき、width を指定した上で左右の margin に設定する値は？
💡 ヒント
「自動で均等に」という意味の英単語です
margin: 0 auto; で左右の余白が自動で均等になり、要素が中央に配置されます。ただし width の指定が必須です。
Q13
flex-wrap: wrap; を設定すると何が起きますか？
flex-wrap: wrap を指定すると、子要素が親要素の幅を超えたとき次の行に折り返されます。カードの一覧表示などで画面幅に応じて列数が変わるレイアウトに使います。
Q14
@___ (max-width: 768px) { .nav { display: none; } } — メディアクエリのキーワードは？
@media はメディアクエリを宣言するキーワードです。画面幅などの条件に応じてCSSを切り替えるレスポンシブデザインの基本です。
Q15
gap: 16px; は Flexbox で何を設定しますか？
gap は Flexbox や Grid で子要素同士の間隔を設定します。margin と違い、最初と最後の要素の外側には余白がつきません。
Q16
文字を太字にするプロパティ名は？（値は bold を指定）
💡 ヒント
font（フォント）+ weight（重さ・太さ）
font-weight: bold で太字になります。数値（100〜900）でも指定でき、400が通常、700がboldに相当します。
Q17
background: linear-gradient(to right, #ff0000, #0000ff); はどんな表示になりますか？
linear-gradient は直線的なグラデーションを作ります。to right は左から右への方向を指定し、#ff0000（赤）から #0000ff（青）へ徐々に変化します。
Q18
.card { width: 300px; ___: 20px; border: 2px solid #ccc; } — 内側の余白を設定するプロパティは？
padding は要素の内側（コンテンツと border の間）の余白です。margin は外側の余白です。ボックスモデルの構造を理解して使い分けましょう。
Q19
スマホでは1列、PCでは3列のカードレイアウトを作る最も適切な方法はどれ？
Flexbox でレイアウトを組み、@media でブレークポイントごとに flex-direction や幅を変更するのがレスポンシブデザインの基本パターンです。