上級
← カテゴリ一覧へ戻るステージ一覧へ戻る
STAGE 1
1〜10問目 • 10問
  • Q1

    CSS変数（カスタムプロパティ）を定義する正しい書き方はどれですか？

    ANSWER
    --main-color: blue;
    クリックして解説を表示
    EXPLANATION

    CSS変数は--で始まる名前で定義します。例：--main-color: blue;

  • Q2

    CSS変数を使用する正しい書き方はどれですか？

    ANSWER
    color: var(--main-color);
    クリックして解説を表示
    EXPLANATION

    var(--変数名)関数でCSS変数を使用します。例：color: var(--main-color);

  • Q3

    CSS変数にフォールバック値を指定する方法はどれですか？

    ANSWER
    var(--color, blue)
    クリックして解説を表示
    EXPLANATION

    var(--変数名, フォールバック値)で変数が未定義の場合のデフォルト値を指定できます。

  • Q4

    :rootセレクタは何を選択しますか？

    ANSWER
    ドキュメントのルート要素（html）
    クリックして解説を表示
    EXPLANATION

    :rootはドキュメントのルート要素（HTMLでは<html>）を選択します。グローバルなCSS変数を定義するのによく使います。

  • Q5

    CSS変数のスコープについて正しい説明はどれですか？

    ANSWER
    定義した要素とその子孫でのみ有効
    クリックして解説を表示
    EXPLANATION

    CSS変数はカスケード（継承）します。要素で定義した変数はその子孫要素で使用できます。

  • Q6

    BEM命名規則で、Blockの中のElementを表す書き方はどれですか？

    ANSWER
    block__element
    クリックして解説を表示
    EXPLANATION

    BEMではElementはblock__elementのようにアンダースコア2つで区切ります。

  • Q7

    BEM命名規則で、Modifierを表す書き方はどれですか？

    ANSWER
    block--modifier
    クリックして解説を表示
    EXPLANATION

    BEMではModifierはblock--modifierまたはblock__element--modifierのようにハイフン2つで区切ります。

  • Q8

    CSSの詳細度（Specificity）で最も優先度が高いのはどれですか？

    ANSWER
    インラインスタイル
    クリックして解説を表示
    EXPLANATION

    詳細度の優先順位は「インラインスタイル > IDセレクタ > クラス/属性/擬似クラス > 要素/擬似要素」です。

  • Q9

    :is()擬似クラスの用途は何ですか？

    ANSWER
    セレクタをグループ化して簡潔にする
    クリックして解説を表示
    EXPLANATION

    :is()は複数のセレクタをグループ化し、コードを簡潔にします。例：:is(h1, h2, h3) { }

  • Q10

    :where()と:is()の違いは何ですか？

    ANSWER
    :where()は詳細度が0、:is()は最も高い詳細度を継承
    クリックして解説を表示
    EXPLANATION

    :where()は詳細度が0になりますが、:is()は含まれるセレクタの中で最も高い詳細度を持ちます。

STAGE 2
11〜20問目 • 10問
  • Q11

    :has()擬似クラスは何をしますか？

    ANSWER
    特定の子要素を持つ親要素を選択する
    クリックして解説を表示
    EXPLANATION

    :has()は特定の子要素や後続要素を持つ要素を選択する「親セレクタ」として機能します。

  • Q12

    次のCSSは何を選択しますか？

    article:has(img) { }
    ANSWER
    imgを含むarticle
    クリックして解説を表示
    EXPLANATION

    img要素を子孫に持つarticle要素を選択します。親セレクタとして機能します。

  • Q13

    :not()擬似クラスは何をしますか？

    ANSWER
    指定セレクタに一致しない要素を選択
    クリックして解説を表示
    EXPLANATION

    :not()は指定したセレクタに一致しない要素を選択します。否定擬似クラスです。

  • Q14

    CSS Gridのauto-fillとauto-fitの違いは何ですか？

    ANSWER
    auto-fitは空のトラックを折りたたみ、auto-fillは保持する
    クリックして解説を表示
    EXPLANATION

    auto-fillは空のトラックを保持し、auto-fitは空のトラックを折りたたんで残りのトラックを拡大します。

  • Q15

    minmax()関数の用途は何ですか？

    ANSWER
    グリッドトラックの最小値と最大値を指定する
    クリックして解説を表示
    EXPLANATION

    minmax(最小値, 最大値)はグリッドトラックのサイズ範囲を指定します。レスポンシブなグリッドに便利です。

  • Q16

    次のCSSは何をしますか？

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    ANSWER
    レスポンシブに列数が変わるグリッドを作成
    クリックして解説を表示
    EXPLANATION

    最小200px、最大1frの列を自動的に作成し、空のトラックは折りたたまれます。完全にレスポンシブなグリッドを作成します。

  • Q17

    grid-auto-flowプロパティは何を制御しますか？

    ANSWER
    自動配置アイテムの配置方向
    クリックして解説を表示
    EXPLANATION

    grid-auto-flowは自動配置されるアイテムの配置方向（行/列）と密度を制御します。

  • Q18

    grid-auto-flow: dense;は何をしますか？

    ANSWER
    空きスペースを埋めるように配置する
    クリックして解説を表示
    EXPLANATION

    denseは空いたスペースを埋めるように小さいアイテムを前に詰めて配置します。

  • Q19

    サブグリッドとは何ですか？

    ANSWER
    親グリッドのトラック定義を継承するグリッド
    クリックして解説を表示
    EXPLANATION

    サブグリッドは親グリッドのトラック定義を継承するグリッドです。grid-template-columns: subgrid;で指定します。

  • Q20

    コンテナクエリとは何ですか？

    ANSWER
    親コンテナのサイズに基づくスタイル
    クリックして解説を表示
    EXPLANATION

    コンテナクエリは親コンテナのサイズに基づいてスタイルを適用する機能です。メディアクエリはビューポートベースです。

STAGE 3
21〜30問目 • 10問
  • Q21

    コンテナクエリを使用するための親要素の設定はどれですか？

    ANSWER
    container-type: inline-size;
    クリックして解説を表示
    EXPLANATION

    container-typeプロパティでコンテナとしてマークします。inline-sizeは幅に基づくクエリを有効にします。

  • Q22

    コンテナクエリの書き方はどれですか？

    ANSWER
    @container (min-width: 400px) { }
    クリックして解説を表示
    EXPLANATION

    @containerルールでコンテナクエリを記述します。構文はメディアクエリに似ています。

  • Q23

    containプロパティの用途は何ですか？

    ANSWER
    要素の影響範囲を制限しパフォーマンスを向上
    クリックして解説を表示
    EXPLANATION

    containは要素を独立させ、レイアウト、スタイル、ペイントの影響範囲を制限します。パフォーマンス最適化に使います。

  • Q24

    content-visibility: auto;の効果は何ですか？

    ANSWER
    画面外の要素のレンダリングをスキップする
    クリックして解説を表示
    EXPLANATION

    content-visibility: auto;は画面外の要素のレンダリングをスキップし、初期読み込みのパフォーマンスを向上させます。

  • Q25

    will-changeプロパティの用途は何ですか？

    ANSWER
    ブラウザに最適化のヒントを与える
    クリックして解説を表示
    EXPLANATION

    will-changeは要素が変化する予定であることをブラウザに伝え、最適化を促します。アニメーションのパフォーマンス向上に使います。

  • Q26

    will-changeを使用する際の注意点は何ですか？

    ANSWER
    多用するとメモリ使用量が増加する
    クリックして解説を表示
    EXPLANATION

    will-changeは多用するとメモリ使用量が増加します。必要な要素にのみ、アニメーション直前に適用するのがベストです。

  • Q27

    scroll-snap-typeプロパティの用途は何ですか？

    ANSWER
    スクロール後に要素が特定位置に吸着する
    クリックして解説を表示
    EXPLANATION

    scroll-snap-typeはスクロールスナップを有効にし、スクロール後に要素が特定の位置に吸着するようにします。

  • Q28

    scroll-snap-alignプロパティは何を指定しますか？

    ANSWER
    スナップ時の要素の配置位置
    クリックして解説を表示
    EXPLANATION

    scroll-snap-alignはスナップ時の要素の配置位置（start、center、endなど）を指定します。

  • Q29

    overscroll-behaviorプロパティの用途は何ですか？

    ANSWER
    スクロールが境界に達したときの動作を制御する
    クリックして解説を表示
    EXPLANATION

    overscroll-behaviorはスクロールが境界に達したときの動作（チェーンスクロール、バウンス効果など）を制御します。

  • Q30

    writing-modeプロパティの用途は何ですか？

    ANSWER
    テキストの書字方向を指定する
    クリックして解説を表示
    EXPLANATION

    writing-modeはテキストの書字方向を指定します。縦書き（vertical-rl、vertical-lr）なども設定できます。

STAGE 4
31〜40問目 • 10問
  • Q31

    logical propertiesとは何ですか？

    ANSWER
    書字方向に基づいた論理的な方向のプロパティ
    クリックして解説を表示
    EXPLANATION

    論理プロパティは物理的な方向（left/right）ではなく、書字方向に基づいた論理的な方向（inline-start/inline-end）を使用します。

  • Q32

    margin-inline-startは何に対応しますか？

    ANSWER
    書字方向に応じてmargin-leftまたはmargin-right
    クリックして解説を表示
    EXPLANATION

    margin-inline-startは横書きLTRではmargin-left、RTLではmargin-rightに対応する論理プロパティです。

  • Q33

    @layerルールの用途は何ですか？

    ANSWER
    CSSをレイヤーに分割して優先度を制御する
    クリックして解説を表示
    EXPLANATION

    @layerはCSSをレイヤーに分割し、詳細度に関係なくレイヤーの順序でスタイルの優先度を制御できます。

  • Q34

    @layerの優先順位について正しいのはどれですか？

    ANSWER
    後に定義されたレイヤーが優先
    クリックして解説を表示
    EXPLANATION

    後に定義されたレイヤーの方が優先されます。また、レイヤーに属さないスタイルはすべてのレイヤーより優先されます。

  • Q35

    @supportsルールの用途は何ですか？

    ANSWER
    CSSプロパティのサポート状況を検出する
    クリックして解説を表示
    EXPLANATION

    @supportsはブラウザが特定のCSSプロパティ/値をサポートしているかを検出し、条件付きでスタイルを適用します。

  • Q36

    次のCSSは何を意味しますか？

    @supports (display: grid) {
  .container { display: grid; }
}
    ANSWER
    グリッドがサポートされている場合のみ適用する
    クリックして解説を表示
    EXPLANATION

    ブラウザがdisplay: gridをサポートしている場合のみ、中のスタイルを適用します。

  • Q37

    CSSでダークモードを検出するメディアクエリはどれですか？

    ANSWER
    @media (prefers-color-scheme: dark)
    クリックして解説を表示
    EXPLANATION

    prefers-color-scheme: darkでシステムのダークモード設定を検出できます。

  • Q38

    prefers-reduced-motionメディアクエリの用途は何ですか？

    ANSWER
    アニメーション軽減設定を検出する
    クリックして解説を表示
    EXPLANATION

    ユーザーがシステムでアニメーションの軽減を設定しているかを検出し、アクセシビリティ向上のためアニメーションを控えめにします。

  • Q39

    アクセシビリティのためにフォーカス表示を保持しつつカスタマイズする方法として推奨されるのはどれですか？

    ANSWER
    :focus-visibleで代替スタイルを提供する
    クリックして解説を表示
    EXPLANATION

    outline: none;でデフォルトを消すだけでなく、代替のフォーカススタイル（:focus-visibleなど）を提供すべきです。

  • Q40

    :focus-visibleと:focusの違いは何ですか？

    ANSWER
    :focus-visibleはキーボード操作時のみ適用
    クリックして解説を表示
    EXPLANATION

    :focus-visibleはキーボード操作時のみ適用され、マウスクリック時は適用されません。:focusは両方に適用されます。

STAGE 5
41〜50問目 • 10問
  • Q41

    aria-*属性とCSSの関係について正しいのはどれですか？

    ANSWER
    属性セレクタでaria属性に基づくスタイルを適用できる
    クリックして解説を表示
    EXPLANATION

    属性セレクタを使ってaria-*属性に基づいてスタイルを適用できます。例：[aria-hidden="true"] { display: none; }

  • Q42

    スクリーンリーダー用に視覚的に非表示にするが、アクセシブルに保つ方法はどれですか？

    ANSWER
    position: absoluteで画面外に配置しサイズを最小に
    クリックして解説を表示
    EXPLANATION

    .sr-onlyクラスなどでposition: absolute; width: 1px; height: 1px; overflow: hidden;などを使用します。display: none;はスクリーンリーダーからも隠れます。

  • Q43

    mix-blend-modeプロパティの用途は何ですか？

    ANSWER
    要素と背景のブレンド方法を指定する
    クリックして解説を表示
    EXPLANATION

    mix-blend-modeは要素の内容と背景のブレンド（混合）方法を指定します。Photoshopのレイヤー効果に似ています。

  • Q44

    background-blend-modeプロパティの用途は何ですか？

    ANSWER
    複数の背景同士のブレンド方法
    クリックして解説を表示
    EXPLANATION

    background-blend-modeは複数の背景画像や背景色同士のブレンド方法を指定します。

  • Q45

    isolation: isolate;の効果は何ですか？

    ANSWER
    新しいスタッキングコンテキストを作成する
    クリックして解説を表示
    EXPLANATION

    isolation: isolate;は新しいスタッキングコンテキストを作成し、mix-blend-modeの影響範囲を制限します。

  • Q46

    clip-pathプロパティの用途は何ですか？

    ANSWER
    要素の表示領域を切り抜く
    クリックして解説を表示
    EXPLANATION

    clip-pathは要素の表示領域をクリッピング（切り抜き）します。様々な形状でマスクできます。

  • Q47

    次のCSSは何をしますか？

    clip-path: circle(50%);
    ANSWER
    要素を円形にクリッピングする
    クリックして解説を表示
    EXPLANATION

    要素を円形にクリッピングします。50%は要素の中心から半径50%の円になります。

  • Q48

    maskプロパティとclip-pathの違いは何ですか？

    ANSWER
    maskは画像やグラデーションでマスク可能、clip-pathは形状のみ
    クリックして解説を表示
    EXPLANATION

    maskはグラデーションや画像で複雑なマスクを作成でき、半透明も可能です。clip-pathは形状での切り抜きのみです。

  • Q49

    shape-outsideプロパティの用途は何ですか？

    ANSWER
    フロート要素の周りのテキスト流し込み形状を定義する
    クリックして解説を表示
    EXPLANATION

    shape-outsideはフロートした要素の周りにテキストを流し込む形状を定義します。

  • Q50

    perspectiveプロパティの用途は何ですか？

    ANSWER
    3D変形に奥行き感を与える
    クリックして解説を表示
    EXPLANATION

    perspectiveは3D変形した子要素に奥行き感を与えます。値が小さいほど遠近感が強くなります。

STAGE 6
51〜60問目 • 10問
  • Q51

    transform-style: preserve-3d;の効果は何ですか？

    ANSWER
    子要素を3D空間内に配置する
    クリックして解説を表示
    EXPLANATION

    preserve-3dは子要素が3D空間内で配置されるようにします。デフォルトのflatでは子要素は平面化されます。

  • Q52

    backface-visibility: hidden;の用途は何ですか？

    ANSWER
    要素の裏面を非表示にする
    クリックして解説を表示
    EXPLANATION

    backface-visibility: hidden;は要素の裏面を非表示にします。カードのフリップアニメーションなどで使用します。

  • Q53

    CSSカウンターを作成するプロパティはどれですか？

    ANSWER
    counter-reset / counter-increment
    クリックして解説を表示
    EXPLANATION

    counter-resetでカウンターを初期化し、counter-incrementで増加させ、counter()関数で値を表示します。

  • Q54

    CSSカウンターの値を表示する方法はどれですか？

    ANSWER
    content: counter(name);
    クリックして解説を表示
    EXPLANATION

    content: counter(カウンター名);でカウンターの値を擬似要素などで表示できます。

  • Q55

    ::marker擬似要素の用途は何ですか？

    ANSWER
    リストマーカーをスタイリングする
    クリックして解説を表示
    EXPLANATION

    ::markerはリストアイテムのマーカー（箇条書きの点や番号）をスタイリングするための擬似要素です。

  • Q56

    ::selection擬似要素の用途は何ですか？

    ANSWER
    ユーザーが選択したテキストをスタイリングする
    クリックして解説を表示
    EXPLANATION

    ::selectionはユーザーが選択したテキスト部分のスタイルをカスタマイズします。

  • Q57

    accent-colorプロパティの用途は何ですか？

    ANSWER
    フォームコントロールのアクセントカラーを設定する
    クリックして解説を表示
    EXPLANATION

    accent-colorはチェックボックス、ラジオボタン、プログレスバーなどのUIコントロールのアクセントカラーを設定します。

  • Q58

    color-schemeプロパティの用途は何ですか？

    ANSWER
    サポートするカラースキームを指定する
    クリックして解説を表示
    EXPLANATION

    color-schemeは要素がサポートするカラースキーム（light/dark）を指定し、ブラウザのUIもそれに合わせて調整されます。

  • Q59

    @propertyルールの用途は何ですか？

    ANSWER
    CSS変数の型や初期値を定義する
    クリックして解説を表示
    EXPLANATION

    @propertyでCSS変数の型、初期値、継承の有無を定義でき、アニメーションなどより高度な制御が可能になります。

  • Q60

    次のCSSは何を定義していますか？

    @property --my-color {
  syntax: '<color>';
  initial-value: blue;
  inherits: false;
}
    ANSWER
    型付きCSS変数の定義
    クリックして解説を表示
    EXPLANATION

    --my-colorという色型のCSS変数を定義し、初期値を青、継承を無効にしています。

STAGE 7
61〜70問目 • 10問
  • Q61

    @propertyでCSS変数を定義するメリットは何ですか？

    ANSWER
    CSS変数のアニメーションが可能になる
    クリックして解説を表示
    EXPLANATION

    型を指定することで、CSS変数の中間値を計算できるようになり、カラーやサイズのスムーズなアニメーションが可能になります。

  • Q62

    hsl()とrgb()の違いは何ですか？

    ANSWER
    rgbは赤緑青、hslは色相・彩度・明度で指定
    クリックして解説を表示
    EXPLANATION

    rgb()は赤緑青の値で色を指定し、hsl()は色相・彩度・明度で指定します。hsl()の方が直感的に色を調整しやすいです。

  • Q63

    oklch()やoklab()などの新しい色空間の特徴は何ですか？

    ANSWER
    人間の知覚により近く、広い色域をサポート
    クリックして解説を表示
    EXPLANATION

    これらの色空間は人間の知覚により近く、より均一な明るさの変化や、より広い色域（P3など）をサポートします。

  • Q64

    color-mix()関数の用途は何ですか？

    ANSWER
    2つの色を混合する
    クリックして解説を表示
    EXPLANATION

    color-mix()は2つの色を指定した比率で混合します。例：color-mix(in srgb, red 50%, blue)

  • Q65

    relative colors（相対色）とは何ですか？

    ANSWER
    既存の色から新しい色を派生させる機能
    クリックして解説を表示
    EXPLANATION

    相対色は既存の色から新しい色を派生させる機能です。例：hsl(from red h s 50%)で赤の明度を変更できます。

  • Q66

    nesting（ネスト）構文のメリットは何ですか？

    ANSWER
    関連するスタイルをグループ化し可読性を向上
    クリックして解説を表示
    EXPLANATION

    CSSネストはSassのようにセレクタをネストでき、関連するスタイルをグループ化して可読性を向上させます。

  • Q67

    CSSネストの正しい構文はどれですか？

    ANSWER
    .card { & .title { } }
    クリックして解説を表示
    EXPLANATION

    &は親セレクタを参照します。ネストされたセレクタが要素名で始まる場合は&が必要です。

  • Q68

    anchor positioning（アンカーポジショニング）とは何ですか？

    ANSWER
    他の要素を基準に配置する機能
    クリックして解説を表示
    EXPLANATION

    アンカーポジショニングは他の要素（アンカー）を基準に要素を配置する新しいCSS機能です。ポップオーバーやツールチップに便利です。

  • Q69

    Popover APIとCSSの関係について正しいのはどれですか？

    ANSWER
    :popover-openや::backdropでスタイリング可能
    クリックして解説を表示
    EXPLANATION

    Popover APIではpopover属性を持つ要素を:popover-open擬似クラスでスタイリングし、::backdropで背景をスタイリングできます。

  • Q70

    view-timelineプロパティの用途は何ですか？

    ANSWER
    スクロールベースのアニメーションタイムラインを定義する
    クリックして解説を表示
    EXPLANATION

    view-timelineはスクロールに基づくアニメーション（スクロールドリブンアニメーション）のタイムラインを定義します。

STAGE 8
71〜80問目 • 10問
  • Q71

    スクロールドリブンアニメーションのanimation-timelineに指定できる値として正しいのはどれですか？

    ANSWER
    scroll() / view()
    クリックして解説を表示
    EXPLANATION

    scroll()関数でスクロールに、view()関数で要素の表示に基づいたタイムラインを指定できます。

  • Q72

    printメディアタイプの用途は何ですか？

    ANSWER
    印刷時のスタイルを定義する
    クリックして解説を表示
    EXPLANATION

    @media printは印刷時に適用されるスタイルを定義します。不要な要素を非表示にしたり、印刷用のレイアウトを指定します。

  • Q73

    CSSでページ区切りを制御するプロパティはどれですか？

    ANSWER
    break-before / break-after / break-inside
    クリックして解説を表示
    EXPLANATION

    break-before、break-after、break-insideでページ区切りや段組み区切りを制御できます。

  • Q74

    CSSのallプロパティの用途は何ですか？

    ANSWER
    すべてのCSSプロパティを一括で設定する
    クリックして解説を表示
    EXPLANATION

    allプロパティは要素のすべてのCSSプロパティを一括でリセットまたは継承させます。例：all: unset;

  • Q75

    revert値とinitial値の違いは何ですか？

    ANSWER
    initialは仕様の初期値、revertはブラウザのデフォルトに戻す
    クリックして解説を表示
    EXPLANATION

    initialはプロパティの初期値に、revertはユーザーエージェント（ブラウザ）のデフォルトスタイルに戻します。

  • Q76

    revert-layer値の用途は何ですか？

    ANSWER
    前のレイヤーの値に戻す
    クリックして解説を表示
    EXPLANATION

    revert-layerは@layerで定義されたスタイルを前のレイヤーの値に戻します。

  • Q77

    font-displayプロパティのswap値の効果は何ですか？

    ANSWER
    読み込み中はフォールバックを表示し、完了後に置き換える
    クリックして解説を表示
    EXPLANATION

    font-display: swap;はフォントの読み込み中にフォールバックフォントを表示し、読み込み完了後に置き換えます。

  • Q78

    text-wrap: balance;の効果は何ですか？

    ANSWER
    テキスト行の長さをバランスよく調整する
    クリックして解説を表示
    EXPLANATION

    text-wrap: balance;は見出しなどのテキスト行の長さをバランスよく調整し、最後の行だけ短くなることを防ぎます。

  • Q79

    text-wrap: pretty;の効果は何ですか？

    ANSWER
    孤立した単語を避けて美しく折り返す
    クリックして解説を表示
    EXPLANATION

    text-wrap: pretty;は孤立した単語（widows/orphans）を避けるなど、より美しいテキストの折り返しを行います。

  • Q80

    initial-letterプロパティの用途は何ですか？

    ANSWER
    ドロップキャップ（大きな頭文字）を作成する
    クリックして解説を表示
    EXPLANATION

    initial-letterは段落の最初の文字（ドロップキャップ）のサイズと配置を制御します。