メディアクエリはどのようにレスポンシブデザインを実現していますか？

Question

Accepted Answer

**メディアクエリ** は、デバイスの特性（ほとんどの場合 **viewport の幅** ）に基づいて CSS を条件付きで適用し、1つのスタイルシートがスマートフォン、タブレット、デスクトップに対応できるようにします。

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## モバイルファースト（min-width）対デスクトップファースト（max-width）

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**モバイルファースト** (`min-width`) が一般的に推奨されます。小さいスクリーンに対してシンプルな基本スタイルを書き、その後より大きなスクリーンに向けて段階的に複雑性を追加します。この方法はより整理された軽い CSS を生成する傾向があり、コンテンツの再フローの方法と一致しています。

## その他の有用なクエリ

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` と `prefers-color-scheme` は画面サイズではなくユーザーの *環境設定* に応答します。アクセシビリティとテーマ処理に重要です。

## 条件を組み合わせる

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## 将来についての注記：コンテナクエリ

メディアクエリは **viewport** に応答します。より新しい **container queries** (`@container`) は *親要素の* サイズに応答します。これは真にリユーザブルなコンポーネントに最適です。コンテナクエリはメディアクエリの補完であり、置き換えではありません。

## なぜ重要なのか

メディアクエリはレスポンシブデザインの基盤です。画面サイズに合わせてレイアウト、スペーシング、カラムを適応させます。

モバイルファースト `min-width` のアプローチで CSS を管理しやすく保ち、環境設定クエリ（`prefers-reduced-motion`、`prefers-color-scheme`）は反応性をアクセシビリティとテーマ処理に拡張します。