DanLevy.net

クイズ: 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 の両方にマッチします。CSS セレクタは大文字小文字を区別するので #Home は機能せず、スペースは子要素を意味しますが、ここでは該当しません。

:contains() セレクタは標準の CSS セレクタではありませんが、いくつかの JS ライブラリで利用可能です。

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. 

レイアウト: 中央揃え

ボックス内の「shit」をどうやって中央に配置しますか？

ブロック要素内のテキストを中央揃えにする正しい方法は text-align: center; を使うことです。align プロパティはフレックスボックスレイアウトで使用され、margin: 0 auto; はブロック要素を水平方向に中央に配置するために使います。

align-content プロパティはグリッドレイアウトで使用され、text-content は有効な CSS プロパティではありません。

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...