Dan Levy

クイズ: CSSの基礎は知ってる？（2025）

フロントエンドだけど大丈夫？

クイズ: CSSを知っているか？

1. 

ウォームアップ: フォント

次の 唯一の無効な ❌ font-size を選択してください:

10cx は無効です。cx は実在しない CSS 単位です。（執筆時点では。）

よく使われる単位にはおなじみの px、rem、em があります。

新しい単位は動的でレスポンシブなレイアウトに便利です。

  • ch - 0 文字の幅
  • vmin - ビューポートの最小値
  • vmax - ビューポートの最大値
  • vh - ビューポートの高さ
  • vw - ビューポートの幅

さらに、常に存在しているもののあまり使われない単位もあります。例えばセンチメートルの cm、ミリメートルの mm、インチの in、ポイントの pt などです

2. 

ウォームアップ: 色

有効な👍 16進数コードを1つ見つけられますか？

16進数コードは CSS で色を表すのに使えます。# で始まり、3、4、6、または 8 桁の十六進数が必要です。

3 桁のコードは 6 桁コードの省略形で、各文字が 2 回繰り返されます。4 桁コードは透明度用のアルファチャンネルを含みます。

例えば #ABC は #AABBCC と同じで、#ABCD は #AABBCCDD と同じです。16進数の扱い方をもっと知りたい場合は、私のJavaScript numbers quiz.をご覧ください。

3. 

ウォームアップ: 単位

次の単位のうち、無効な ❌ CSS 単位はどれですか？

ch、vmin、vmax、vh、vw のような新しい単位は、動的/レスポンシブなレイアウトに非常に便利です。

また、常に存在しているもののほとんど使われない単位もあります。たとえばセンチメートルの cm、mm、インチの in、ポイントの pt、pc、大文字のサイズを表す cap、そして文字 x の高さに相当する ex などです。

一般的に使われる単位には、ピクセルの px、要素のフォントサイズに対する相対単位の em、そして rem があります。rem は90年代のバンド R.E.M. への隠れたオマージュだと言われますが（実際は単にルート要素を基準にした相対 em 単位です）。

4. 

セレクタ: 基礎

次のHTMLに最も適合するセレクタはどれですか？

  <a id="home" name="home" href="/home">Home</a>

正解は a#home[name='home'] で、同じリンクの id と name の両条件にマッチします。標準モードのHTMLではIDの値は大文字小文字を区別するため、#Home は id="home" にマッチしません。スペースは子孫結合子であり、同じ要素の条件を組み合わせるのではなく、祖先の内側にある別の要素を選びます。

:contains() は標準CSSのセレクタではありませんが、一部のJavaScriptライブラリで使われます。

5. 

セレクタ: 基礎

次のHTMLボタンにマッチするセレクタはどれですか？

  <button onclick="openModal()">Contact</button>

正解は button[onclick] で、属性 onclick が存在することを対象とします。

なお、:link は未訪問の href リンクのみを対象とし、::click は有効な疑似要素ではなく、:focus はフォーカスされている要素だけを対象とします。

6. 

セレクタ: 基礎

これらのセレクタのうち、どれが無効ですか？

セレクタ c > > d {} は、2つの > 記号の間にセレクタがなく子コンビネータが連続しているため無効です。

他のセレクタは有効です。c {} のようなタイプセレクタは、たとえ c が標準の HTML 要素でなくても構文的に有効な CSS です。

7. 

セレクタ: 基礎

次のHTMLで最後のリンクにマッチするセレクタはどれですか？

  <nav>
    <a name="home" href="/home">Home</a>
    <a name="login" href="/login">Login</a>
    <a name="help" href="/help">Help</a>
  </nav>

正しいセレクタは a:last-child で、これは親要素の最後の子要素である <a> にマッチします。nav:nth-child(3) は、親要素の3番目の子である <nav> 要素にマッチします。

8. 

セレクタ: 詳細度

どのセレクタが優先されますか？

ID がタグやクラスベースのセレクタよりも詳細度が高いため、a#quote セレクタが優先されます。

9. 

レイアウト: 中央揃え

横書きの通常のブロック内で、インラインテキストを水平方向に中央揃えする宣言はどれですか？

横書きのブロック内でテキストを水平方向に中央揃えするには text-align: center; を使います。align と text-content はCSSプロパティではありません。margin: 0 auto; は幅を持つブロック自体の中央揃えに使い、align-content は内容のブロック方向の配置などを制御します。

10. 

レイアウト: 中央揃え

モダンなフロー レイアウトで、ブロック コンテナ内のコンテンツを垂直方向に中央揃えするにはどうすればいいですか？

align-content を使うのが、フロー レイアウトでブロック コンテナの内容を垂直方向に中央揃えするモダンな方法です。

align-items と justify-content プロパティはフレックスボックスやグリッド レイアウトで使用され、フローでは使いません。

margin: 0 auto; と margin: auto; はブロック要素を水平方向に中央揃えしますが、垂直方向には揃えません。

11. 

レイアウト: 単位

以下のHTMLにおける <a> リンクのテキストのピクセルサイズは何ですか？

  <body style="font-size: 40px !important;">
    <nav style="font-size: 50%;">
      <a style="font-size: 25%;">HOME</a>
    </nav>
  </body>

<a> の font-size は 5px と計算されます: 40px（body）* 50%（nav）= 20px、次に 20px * 25% = 5px。

12. 

単位: REM

以下のHTMLで「HOME」リンクの 1.2rem は何ピクセルになるでしょうか？

  <html style="font-size: 10px;">
    <body style="font-size: 20px;">
      <a style="font-size: 1.2rem;">HOME</a>
    </body>
  </html>

1.2rem は12pxになります。なぜなら rem 単位はルート（<html>）のフォントサイズを基準にしており、ここでは10pxに設定されているからです。

13. 

単位: EM

前の質問と同様に、以下のHTMLで「HOME」リンクの 1.2em のピクセルサイズは何ピクセルになりますか？

  <html style="font-size: 10px;">
    <body style="font-size: 20px;">
      <a style="font-size: 1.2em;">HOME</a>
    </body>
  </html>

1.2em は 24px に相当します。なぜなら em 単位は継承されたフォントサイズ（ここでは 20px）を基準にするからです。

14. 

セレクタ: 詳細度

どのセレクタが最も詳細度が低いですか？

:where(.card) .title が最も詳細度が低いです。:where() 疑似クラスとその中身はすべて 0-0-0 とみなされるので、.title だけがカウントされます。:is(.card) .title は .card の詳細度を保持し、.card .title はクラスが2つ、#card .title は ID を含みます。

Loading comments...