モダン CSS

このスキルは、モダンで堅牢かつ効率的な CSS を書くためのリファレンスを提供します。

レイアウト & レスポンシブデザイン

コンテナクエリ

.card {
  container: --my-card / inline-size;
}

@container --my-card (width < 40ch) {
  /* Component-based responsive design */
}

@container (20ch < width < 50ch) {
  /* Range syntax */
}

コンテナユニット: cqi, cqb, cqw, cqh - コンテナサイズに相対的なサイズ

アンカー付きコンテナクエリ: アンカーフォールバック状態に基づいて配置要素をスタイル設定

.tooltip {
  container-type: anchored;
}

@container anchored(top) {
  /* Styles when positioned at top */
}

メディアクエリの範囲構文

@media (width <= 1024px) { }
@media (360px < wid

...