DanLevy.net

クイズ: モダンCSS知ってますか？(2025年向け)

フロントエンドに堪えますか？

クイズ: CSSマスターですか？

1. 

ウォームアップ

CSS変数--main-colorを使用して要素の背景色を設定する正しい方法はどれですか？

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

CSS変数はvar関数を使って使用します。正しい答えはbackground-color: var(--main-color);です。この構文で--main-colorの値を取得して適用します。

他の選択肢はSassやLessなどのプリプロセッサ記法に似た構文です。

2. 

CSS関数

親要素/コンテナの幅が400pxの場合、以下の要素の計算済み幅はどのようになりますか？

div {
  width: min(250px, 50%);
}

min()関数は、250pxと親要素の幅の50%のうち小さい方の値を選びます。

計算値を理解するには、相対単位をピクセルに変換する必要があります：

  • 400pxの50%は200px
  • 250pxはすでにピクセル単位です
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

min()関数は特にレスポンシブデザインで役立ち、コンポーネント（またはフォントサイズ）が特定の上限を超えないように保証できます。

3. 

CSS関数

コンテナの幅が200pxの場合、<div>の計算幅はどれになるか？

div {
  width: max(50px, 10%, 6rem);
}

max()関数は2つ以上の入力を受け取り、自動的に最大値を適用する。ルートフォントサイズがブラウザのデフォルト値16pxと仮定すると、幅は96pxとなる。

計算値を理解するには、相対単位をピクセルに変換する必要がある：

  • 50pxはすでにピクセル単位
  • 200pxの10%は20px
  • 6remは6 * 16px（デフォルトフォントサイズ）となり96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

CSS Grid 関数

CSSグリッドトラックでminmax(100px, 200px)を使用した場合の効果は？

grid-template-columns: minmax(100px, 200px);

minmax(100px, 200px)を使用すると、グリッドトラックは100pxから200pxの範囲でリサイズ可能になります。利用可能なスペースに応じて自動調整されますが、100px以下や200px以上にはなりません。

repeat()やauto-fill/auto-fitと組み合わせると、制約内でできるだけ多くのトラックを生成する自動調整レイアウトが作れます。この柔軟性がCSS Gridの強みです。

5. 

CSS変数

次のCSSの背景色は何色になりますか？

div {
  background: var(--primary, olivedrab);
}

var()関数は変数が定義されていない場合にフォールバック値を指定できます。このケースでは--primaryが定義されていないため、背景色はolivedrab(#6b8e23)になります。

変数が存在しない場合やサポートされていない環境でもスタイルが崩れないようにするための重要なテクニックです。

6. 

CSS関数

clamp()はどのような動作をするか？

.card {
  width: clamp(200px, 50vw, 500px);
}

clamp()関数は50vwを基準に幅をスケーリングしつつ、200px〜500pxの範囲内で固定します。

つまり50vwが200px未満の場合は200px、500pxを超える場合は500px、その間は線形に変化します。

これにより自動的にリスポンシブデザインが実現できます！clampの特徴は固定単位とリスポンシブ/計算単位を組み合わせることです。

通常はビューポート単位をフォントサイズに使いたくないですが、clamp()を使えばフォントサイズが小さすぎる/大きすぎるのを防げます。

7. 

CSSネスティング

CSSはネスティングをネイティブでサポートしていますか？

はい！ついにネイティブCSSネスティングが実装されました！CSSは近年（2023年）にネイティブネスティング構文を導入し、CSS内で階層的なスタイル設定が可能になりました。

8. 

CSSネスティング

これはネイティブなCSSネスティングの正しい使い方ですか？

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

.titleクラスが.containerクラス内でネストされ、予期通りプロパティが適用されています。

これは関連するスタイルをまとめて長すぎるセレクタを避けるための素晴らしい方法です。

9. 

CSSネスト

.containerの直接の子要素であるdivに適用される背景色は？

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

ネストルール内の>セレクターは、.container内の直接の子要素であるdivにのみbackground-color: whiteを適用します。

最後のbackground-color: blue !important;はちょっとした罠です。これはネストルールの外にあり、すべての.container要素に適用されます。

10. 

CSS変数

実行時にCSS変数の値を変更するにはどうしますか？

CSS変数はクラスやJavaScriptを使って設定できます。技術的に使用された後に定義されることも可能です。

document.documentElement.style.setProperty('--main-color', 'blue');

これは--main-colorの値をドキュメント全体でblueに変更します。

CSS変数は変更可能です。JavaScriptを使って実行時に変更できます。

また、クラスの追加・削除によっても変更でき、テーマ切り替えのよくあるパターンです。

11. 

CSS変数

要素の計算後の幅はどれ？

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

calc()関数は--base-width(100px)に追加の10pxを加算し、幅110pxを計算します。

Loading comments...