「もうメディアクエリはいらない？」最新CSSで実現するレスポンシブ設計の新常識【2025年完全ガイド】

「レスポンシブ対応といえばメディアクエリ」——長年、Web制作者にとって当たり前だったこの常識が、今大きく変わろうとしています。

スマートフォン、タブレット、折りたたみデバイス、ウルトラワイドモニター。デバイスの多様化が進む中、従来の「768px」「1200px」といった固定ブレークポイントでは、もはや対応しきれなくなってきました。メディアクエリが山のように増え、CSSファイルは肥大化し、新しいデバイスが登場するたびに追加のブレークポイントが必要になる——そんな悪循環に悩まされていませんか？

実は、最新のCSS技術を活用すれば、メディアクエリに過度に依存することなく、より柔軟で保守性の高いレスポンシブデザインを実現できます。clamp()による流動的なタイポグラフィ、CSS Gridの自動カラム調整、そして2023年に全モダンブラウザでサポートされたContainer Queries。これらの技術は、「あらゆる画面サイズに対応する真のレスポンシブデザイン」への扉を開きます。

本記事では、メディアクエリに依存しない最新のレスポンシブ設計手法を、実装可能なコード例とともに徹底解説します。

明日から実践できる具体的なテクニックを、一緒に学んでいきましょう。

格安ドメイン取得サービス─ムームードメイン─

メディアクエリを使わないレスポンシブデザインとは？最新CSSトレンドを解説

「メディアクエリ非推奨」は本当？ 業界の最新動向とCSSの進化の確認

結論から言えば、メディアクエリ自体が非推奨になったわけではありません。問題視されているのは、メディアクエリに過度に依存し、固定されたブレークポイントで画面サイズを区切る従来型の設計手法です。

CSS の進化により、viewport の幅を基準にした @media クエリだけでなく、より柔軟で本質的なレスポンシブ対応が可能になりました。この新しい設計思想は「Intrinsic Web Design（本質的な Web デザイン）」と呼ばれ、Jen Simmons 氏によって提唱されました。

Intrinsic Web Design の核心は、コンテンツ自身が持つ特性に応じてレイアウトが自動的に調整される、より自然で流動的なデザインの実現です。具体的には以下のような技術が注目されています：

• Fluid Typography（流動的タイポグラフィ）:
  clamp() や calc() を使い、viewport に応じて滑らかにフォントサイズが変化する設計
• Flexible Layouts（柔軟なレイアウト）:
  CSS Grid の minmax() や Flexbox の flex-wrap により、コンテンツ量に応じて自動的にカラム数が調整されるレイアウト
• Container Queries（コンテナクエリ）:
  viewport ではなく親要素の幅を基準にしたレスポンシブ対応

これらの技術により、特定のデバイス幅を想定した「スマホ用」「タブレット用」「PC用」といった区分けから脱却し、あらゆる画面サイズに対応できる真のレスポンシブデザインが実現可能になっています。

メディアクエリを使わない設計が注目される理由とメリット

メディアクエリに依存しない設計が注目を集めている背景には、Web を取り巻く環境の変化があります。スマートフォン、タブレット、折りたたみデバイス、ウルトラワイドモニターなど、デバイスの多様化により、固定的なブレークポイント設計では対応しきれなくなってきました。

主なメリット

1. コードの大幅な削減と保守性の向上

従来の設計では、複数のブレークポイントごとに異なるスタイルを定義する必要がありました。例えば、フォントサイズだけでも以下のように冗長なコードになりがちです：

/* 従来の方法 */
.title {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .title {
    font-size: 2rem;
  }
}
@media (min-width: 1200px) {
  .title {
    font-size: 2.5rem;
  }
}

これを clamp() を使えば、たった1行で表現できます：

/* モダンな方法 */
.title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}

このようなコード削減は、CSS ファイル全体のサイズ削減につながり、結果的にページ読み込み速度の向上にも貢献します。

2. コンポーネント指向開発との高い親和性

React、Vue、Svelte などのモダンなフレームワークでは、再利用可能なコンポーネント単位での開発が主流です。Container Queries を活用すれば、コンポーネント自体が配置される場所の広さに応じて自動的にレイアウトを調整する「自己完結型コンポーネント」を作成できます。

これにより、同じコンポーネントをサイドバー内でもメインコンテンツエリアでも、追加の CSS を書くことなく適切に表示できるようになります。

3. 無限の画面サイズへの対応力（真のフルイドデザイン）

固定ブレークポイントでは、例えば「768px」と「1200px」の間の中途半端なサイズ（900px など）では、どちらかのスタイルが適用されるため、必ずしも最適な表示にはなりません。

clamp() や minmax() を使った設計では、あらゆる画面幅で滑らかに、連続的にレイアウトが変化するため、どのサイズでも最適な表示を実現できます。

4. デザインシステムの一貫性向上

CSS 変数（カスタムプロパティ）と組み合わせることで、デザインシステム全体で一貫したスペーシング、タイポグラフィ、レイアウトルールを維持しやすくなります。変更が必要な場合も、変数定義を修正するだけで全体に反映されるため、保守コストが大幅に削減されます。

従来のブレークポイント設計との違いと注意点

パラダイムシフト：デバイス基準からコンテンツ基準へ

従来のレスポンシブ設計は「デバイスファースト」の考え方に基づいていました。「iPhone のサイズは 375px」「iPad は 768px」「デスクトップは 1200px 以上」といった具合に、特定のデバイスを想定してブレークポイントを設定していました。

これに対し、モダンな設計は「コンテンツファースト」です。コンテンツ自体が「この幅以下では1カラム、それ以上では自動的に複数カラムに」といったルールを内包し、viewport やコンテナのサイズに応じて自律的にレイアウトを調整します。

従来設計が抱えていた問題点

1. ブレークポイントの乱立と管理コスト

プロジェクトが大規模化すると、各開発者が独自のブレークポイントを追加していき、最終的に10個以上のメディアクエリが混在することも珍しくありません。これは保守性を著しく低下させます。

2. デバイスの進化への追従困難

新しいデバイスが登場するたびに、新しいブレークポイントを追加する必要がありました。折りたたみスマホやウルトラワイドモニターなど、従来想定されていなかったサイズへの対応は後追いになりがちでした。

3. コンポーネントの再利用性の低さ

viewport 幅を基準にしたメディアクエリでは、同じコンポーネントを異なる幅のコンテナに配置した際、期待通りに動作しないことがありました。例えば、サイドバー内に配置したカードコンポーネントが、viewport は広いためデスクトップ用のスタイルが適用され、レイアウトが崩れるといった問題です。

注意点：完全な移行は段階的に

ただし、メディアクエリを完全に排除できるわけではありません。以下のようなケースでは、依然として @media が必要です：

• 印刷用スタイル: @media print
• ユーザー設定への対応:
  @media (prefers-color-scheme: dark) や @media (prefers-reduced-motion: reduce)
• 大規模なレイアウト変更:
  ヘッダーのナビゲーションを横並びからハンバーガーメニューに切り替えるような、根本的なレイアウト変更

重要なのは、メディアクエリを「最後の手段」として位置づけ、まずは clamp()、CSS Grid、Container Queries などの技術で対応できないか検討することです。この思考プロセスが、より柔軟で保守性の高い CSS を生み出します。

格安ドメイン取得サービス─ムームードメイン─

メディアクエリ不要で実現する！モダンCSSによるレスポンシブ対応の具体例

clamp()、min()、max()を使った可変フォントと柔軟な余白設計

CSS の比較関数（clamp()、min()、max()）は、メディアクエリなしでレスポンシブな値を設定できる強力なツールです。特に clamp() は、最小値・推奨値・最大値の3つを指定することで、viewport に応じて滑らかに変化する値を実現します。

Fluid Typography（可変フォント）の実装

従来、異なる画面サイズで適切なフォントサイズを設定するには、複数のメディアクエリが必要でした。clamp() を使えば、この問題を1行で解決できます。

/* 基本的な使い方 */
.heading {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

/*
  - 最小値: 1.5rem（小さい画面でも読みやすさを保証）
  - 推奨値: 2vw + 1rem（viewport幅の2% + 1rem で滑らかに拡大）
  - 最大値: 3rem（大画面でも巨大になりすぎない）
*/

この設定により、viewport 幅が変化するにつれて、フォントサイズが最小値と最大値の間で連続的に変化します。計算式 2vw + 1rem の部分がポイントで、viewport の幅に応じた動的な値と固定値を組み合わせることで、自然な拡大・縮小を実現しています。

実践的なタイポグラフィシステム

実務では、見出しレベルごとに異なる clamp() 値を設定します：

:root {
  /* タイポグラフィスケール */
  --font-size-xs: clamp(0.75rem, 0.5vw + 0.65rem, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.75vw + 0.75rem, 1rem);
  --font-size-base: clamp(1rem, 1vw + 0.85rem, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1.5vw + 0.9rem, 1.5rem);
  --font-size-xl: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --font-size-2xl: clamp(2rem, 3vw + 1.25rem, 3rem);
  --font-size-3xl: clamp(2.5rem, 4vw + 1.5rem, 4rem);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
p { font-size: var(--font-size-base); }
small { font-size: var(--font-size-sm); }

この方法により、デザインシステム全体で一貫したタイポグラフィスケールを維持しながら、すべての画面サイズに対応できます。

柔軟な余白（スペーシング）設計

clamp() は余白設計にも威力を発揮します。画面サイズに応じて余白が自動調整されることで、小さい画面では窮屈にならず、大きい画面では間延びしないレイアウトを実現できます。

:root {
  /* スペーシングシステム */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2rem, 4vw, 4rem);
  --space-2xl: clamp(3rem, 6vw, 6rem);
}

/* 実際の使用例 */
.section {
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
}

.card {
  padding: var(--space-lg);
  gap: var(--space-md);
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

min() と max() の活用

min() と max() は2つの値を比較し、小さい方（または大きい方）を選択します。主にコンテナの幅制限に使用されます。

/* コンテナ幅を画面幅の90%、または最大1200pxに制限 */
.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}

/* 画像を親要素に収めつつ、最小幅を確保 */
img {
  width: max(300px, 50%);
  height: auto;
}

/* 余白を画面幅の5%、最低20px確保 */
.element {
  padding: max(20px, 5vw);
}

Flexbox・CSS Gridでブレークポイントを使わずに自動レイアウト調整

CSS Grid と Flexbox の進化により、コンテンツ量に応じて自動的に列数が調整されるレスポンシブレイアウトを、メディアクエリなしで実現できるようになりました。

CSS Grid の auto-fit と minmax() による自動カラム調整

CSS Grid の真価は、repeat()、auto-fit（または auto-fill）、minmax() を組み合わせた自動レイアウトにあります。

/* 基本パターン：カードグリッド */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

/*
  動作説明：
  - repeat(auto-fit, ...): 利用可能な幅に応じて自動的に列数を調整
  - minmax(280px, 1fr): 各カラムは最小280px、最大で残りスペースを均等分割
  - 結果: 画面が広ければ3〜4列、狭ければ1列に自動調整
*/

このコードだけで、スマートフォンからウルトラワイドモニターまで、あらゆる画面サイズに対応できます。

auto-fit vs auto-fill の違い

両者は似ていますが、重要な違いがあります：

/* auto-fit: 空のトラックを削除し、既存アイテムで空間を埋める */
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* auto-fill: 空のトラックも保持し、余白として残す */
.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

実践的なグリッドレイアウトパターン

/* パターン1: レスポンシブ商品グリッド */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 30vw, 300px), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  padding: var(--space-md);
}

/* パターン2: 最小3カラム、最大6カラムに制限 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(200px, 100%/6), 1fr));
  gap: 1rem;
}

/* パターン3: アスペクト比を保つグリッド */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.image-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Flexbox の flex-wrap による自動折り返し

Flexbox も flex-wrap と適切な flex-basis を組み合わせることで、自動レスポンシブレイアウトを実現できます。

/* 基本パターン */
.flex-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.flex-cards > * {
  flex: 1 1 clamp(250px, 30%, 400px);
}

/*
  動作説明：
  - flex: 1 1 clamp(...): 伸縮可能、基準幅は可変
  - clamp(250px, 30%, 400px): 最小250px、推奨30%、最大400px
  - 結果: 画面幅に応じて自動的に1〜4列に調整
*/

Grid と Flexbox の使い分け

/* Grid: 二次元レイアウト（行・列の両方を制御） */
.two-dimensional-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 2rem;
}

/* Flexbox: 一次元レイアウト（主に一方向の配置） */
.one-dimensional-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.one-dimensional-layout > * {
  flex: 1 1 250px;
}

CSS変数（カスタムプロパティ）を活用した保守性の高いレスポンシブ設計

CSS 変数を clamp()、calc() と組み合わせることで、メンテナンス性の高いデザインシステムを構築できます。

デザイントークンとしての CSS 変数

:root {
  /* カラーシステム */
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-text: #1f2937;
  --color-background: #ffffff;

  /* タイポグラフィ */
  --font-size-base: clamp(1rem, 1vw + 0.85rem, 1.125rem);
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* スペーシング（8の倍数ベース） */
  --space-unit: 0.5rem;
  --space-xs: calc(var(--space-unit) * 1);  /* 4px */
  --space-sm: calc(var(--space-unit) * 2);  /* 8px */
  --space-md: calc(var(--space-unit) * 4);  /* 16px */
  --space-lg: calc(var(--space-unit) * 6);  /* 24px */
  --space-xl: calc(var(--space-unit) * 8);  /* 32px */
  --space-2xl: clamp(2rem, 4vw, 4rem);

  /* レイアウト */
  --container-width: min(90%, 1200px);
  --content-width: min(85%, 800px);
  --sidebar-width: clamp(200px, 25%, 300px);

  /* ボーダー・角丸 */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;

  /* シャドウ */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

動的な値計算による柔軟なシステム

:root {
  /* ベース値 */
  --fluid-min-width: 320;
  --fluid-max-width: 1200;
  --fluid-min-size: 16;
  --fluid-max-size: 20;

  /* 動的計算 */
  --fluid-bp: calc(
    (var(--fluid-max-width) - var(--fluid-min-width)) * 1px
  );
  --fluid-diff: calc(var(--fluid-max-size) - var(--fluid-min-size));

  /* 実際の値 */
  --font-size-fluid: calc(
    (var(--fluid-min-size) * 1px) +
    var(--fluid-diff) *
    (100vw - (var(--fluid-min-width) * 1px)) /
    var(--fluid-bp)
  );
}

body {
  font-size: clamp(
    calc(var(--fluid-min-size) * 1px),
    var(--font-size-fluid),
    calc(var(--fluid-max-size) * 1px)
  );
}

コンポーネント単位での変数活用

/* カードコンポーネント */
.card {
  --card-padding: clamp(1rem, 3vw, 2rem);
  --card-gap: clamp(0.75rem, 2vw, 1.5rem);
  --card-border-radius: var(--border-radius-md);

  padding: var(--card-padding);
  gap: var(--card-gap);
  border-radius: var(--card-border-radius);
  background: var(--color-background);
  box-shadow: var(--shadow-md);
}

/* ボタンコンポーネント */
.button {
  --button-padding-x: clamp(1rem, 2vw, 1.5rem);
  --button-padding-y: clamp(0.5rem, 1vw, 0.75rem);
  --button-font-size: clamp(0.875rem, 1vw, 1rem);

  padding: var(--button-padding-y) var(--button-padding-x);
  font-size: var(--button-font-size);
  border-radius: var(--border-radius-sm);
  background: var(--color-primary);
  color: white;
}

テーマ切り替えとダークモード

CSS 変数は、@media (prefers-color-scheme) と組み合わせることで、効率的なダークモード実装も可能です。

:root {
  --color-text: #1f2937;
  --color-background: #ffffff;
  --color-surface: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f9fafb;
    --color-background: #111827;
    --color-surface: #1f2937;
  }
}

/* すべてのコンポーネントで自動的にダークモード対応 */
body {
  color: var(--color-text);
  background: var(--color-background);
}

.card {
  background: var(--color-surface);
}

この設計により、変数定義を変更するだけで、サイト全体のテーマを一括で調整できます。メディアクエリは最小限に抑えつつ、ユーザー環境に応じた最適な表示を実現できるのです。

格安ドメイン取得サービス─ムームードメイン─

最新技術で進化するレスポンシブ ― Container Queries・@when/@elseの活用法

Container Queriesで「親要素ベース」のレスポンシブを実現する方法

Container Queries（コンテナクエリ）は、レスポンシブデザインにおける革命的な技術です。2023年2月にすべてのモダンブラウザでサポートされ、実務での採用が急速に進んでいます。

@media と @container の決定的な違い

従来の @media クエリは viewport（ブラウザウィンドウ全体）の幅 を基準に判定します。一方、@container は 親要素（コンテナ）の幅 を基準に判定します。

/* 従来の方法: viewport基準 */
@media (min-width: 768px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

/* モダンな方法: コンテナ基準 */
@container (min-width: 500px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

この違いにより、同じコンポーネントを異なる幅のコンテナに配置しても、それぞれのコンテナの幅に応じて適切にスタイルが適用される という、真にコンポーネント指向なレスポンシブデザインが実現します。

Container Queries の基本実装

Container Queries を使用するには、まず親要素を「コンテナ」として宣言する必要があります。

/* ステップ1: コンテナを定義 */
.container {
  container-type: inline-size;
  /* または container-type: size; (幅と高さ両方) */
}

/* ステップ2: コンテナクエリを記述 */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
  }
}

@container (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
  }
}

container-type の値：

• inline-size: インライン方向（通常は幅）のみをクエリ対象にする（最も一般的）
• size: 幅と高さの両方をクエリ対象にする
• normal: コンテナクエリを無効化（デフォルト値）

名前付きコンテナでより明示的な設計

複数のコンテナが入れ子になる場合、container-name で明示的に名前をつけることで、どのコンテナを参照するか明確にできます。

/* コンテナに名前をつける */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.main-content {
  container-type: inline-size;
  container-name: main;
}

/* 特定のコンテナを指定してクエリ */
@container sidebar (min-width: 300px) {
  .widget {
    padding: 1rem;
  }
}

@container main (min-width: 600px) {
  .widget {
    padding: 2rem;
  }
}

/* ショートハンド記法 */
.sidebar {
  container: sidebar / inline-size;
}

実践例：レスポンシブカードコンポーネント

Container Queries の真価は、どこに配置しても適切に表示される自己完結型コンポーネントの作成にあります。

/* カードの親要素をコンテナとして定義 */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* ベーススタイル（狭いコンテナ用） */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.25rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.card__description {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

/* コンテナが400px以上：横並びレイアウトに */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .card__image {
    width: 150px;
    height: 150px;
    aspect-ratio: 1;
    flex-shrink: 0;
  }

  .card__content {
    flex: 1;
  }

  .card__title {
    font-size: 1.5rem;
  }

  .card__description {
    font-size: 1rem;
  }
}

/* コンテナが600px以上：さらにリッチなレイアウトに */
@container card (min-width: 600px) {
  .card {
    gap: 2rem;
    padding: 2rem;
  }

  .card__image {
    width: 200px;
    height: 200px;
  }

  .card__title {
    font-size: 1.75rem;
  }

  .card__meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
  }
}

このカードコンポーネントは、サイドバー（狭い）、メインコンテンツ（広い）、モーダル（中程度）など、どこに配置してもその場所の幅に応じて最適なレイアウトを自動選択 します。

Container Query Units（コンテナクエリ単位）

Container Queries には専用の単位も用意されており、コンテナサイズに応じた相対的なサイズ指定が可能です。

.card-wrapper {
  container-type: inline-size;
}

.card {
  /* コンテナ幅の5% */
  padding: 5cqi;

  /* コンテナ幅の3% + 0.5rem */
  font-size: calc(3cqi + 0.5rem);
}

/* 利用可能な単位 */
/*
  cqw: コンテナ幅の1%
  cqh: コンテナ高さの1%
  cqi: インライン方向（通常は幅）の1%
  cqb: ブロック方向（通常は高さ）の1%
  cqmin: cqi と cqb の小さい方
  cqmax: cqi と cqb の大きい方
*/

Container Queries と clamp() の組み合わせ

最も強力なのは、Container Queries 内で clamp() を使用する方法です。

.card-wrapper {
  container-type: inline-size;
}

/* ベーススタイルで clamp() を使用 */
.card {
  padding: clamp(0.75rem, 3cqi, 2rem);
  gap: clamp(0.5rem, 2cqi, 1.5rem);
}

.card__title {
  font-size: clamp(1rem, 4cqi, 2rem);
}

/* 特定のレイアウト変更はコンテナクエリで */
@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
}

この組み合わせにより、細かい調整は clamp() で連続的に、大きなレイアウト変更は @container で段階的に という、最も柔軟なレスポンシブ設計が実現します。

@when / @else構文で複雑な条件分岐をシンプルに書くテクニック

@when と @else は CSS Conditional Rules Module Level 5 で提案されている新しい構文で、複雑な条件分岐を直感的に記述できるようになります。

現状とブラウザサポート

注意: @when / @else は 2025年11月時点で、まだ 実験的な機能 であり、主要ブラウザでの正式サポートは限定的です。実務での使用は、将来的な採用を見据えた学習・準備段階として位置づけるべきです。

/* 現在の対応状況（2024年11月時点）*/
/*
  - Chrome/Edge: 一部フラグ付きで実験的サポート
  - Firefox: 開発中
  - Safari: 開発中
*/

従来の複雑な条件記述の問題点

現在、複数の条件を組み合わせる場合、ネストが深くなり可読性が低下します。

/* 従来の方法：ネストが深く読みにくい */
@media (min-width: 768px) {
  @supports (display: grid) {
    @container (min-width: 400px) {
      .component {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}

/* 複数条件のORを表現するのも冗長 */
@media (hover: hover) {
  .button:hover {
    background: #2563eb;
  }
}

@media (hover: none) and (pointer: coarse) {
  .button:active {
    background: #2563eb;
  }
}

@when / @else による改善

@when と @else を使うと、条件分岐がより直感的に記述できます。

/* @when/@else の基本構文（将来の姿） */
@when media(min-width: 768px) and supports(display: grid) {
  .component {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
} @else {
  .component {
    display: flex;
    flex-wrap: wrap;
  }
}

/* 複数条件の分岐 */
@when media(min-width: 1200px) {
  .layout {
    grid-template-columns: 250px 1fr 250px;
  }
} @else media(min-width: 768px) {
  .layout {
    grid-template-columns: 200px 1fr;
  }
} @else {
  .layout {
    grid-template-columns: 1fr;
  }
}

Container Queries との組み合わせ

@when は Container Queries とも組み合わせ可能で、より複雑な条件判定を簡潔に表現できます。

/* コンテナクエリと機能検出の組み合わせ */
@when container(min-width: 500px) and supports(aspect-ratio: 16/9) {
  .media-card__image {
    aspect-ratio: 16 / 9;
  }

  .media-card__content {
    padding: 2rem;
  }
} @else container(min-width: 500px) {
  .media-card__image {
    height: 250px;
  }

  .media-card__content {
    padding: 1.5rem;
  }
} @else {
  .media-card {
    flex-direction: column;
  }

  .media-card__content {
    padding: 1rem;
  }
}

現時点での代替手法

@when / @else が正式サポートされるまでは、CSS変数とカスケードを活用した疑似的な条件分岐が有効です。

/* CSS変数による疑似的な条件分岐 */
:root {
  --layout-columns: 1;
}

@media (min-width: 768px) {
  :root {
    --layout-columns: 2;
  }
}

@media (min-width: 1200px) {
  :root {
    --layout-columns: 3;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), 1fr);
  gap: 1.5rem;
}

実務で使えるコンポーネント単位のモジュール化設計例

Container Queries の登場により、真の意味での「自己完結型コンポーネント」設計が可能になりました。ここでは、実務で即使える設計パターンを紹介します。

BEM + Container Queries によるコンポーネント設計

BEM（Block Element Modifier）と Container Queries を組み合わせることで、保守性の高いコンポーネントを作成できます。

/* ブロック：プロダクトカード */
.product-card {
  container-type: inline-size;
  container-name: product;
}

.product-card__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2cqi, 1.5rem);
  padding: clamp(1rem, 3cqi, 2rem);
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* エレメント */
.product-card__image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.25rem;
}

.product-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-card__title {
  font-size: clamp(1rem, 3cqi, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: #111827;
}

.product-card__description {
  font-size: clamp(0.875rem, 2.5cqi, 1rem);
  line-height: 1.5;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__price {
  font-size: clamp(1.25rem, 4cqi, 1.75rem);
  font-weight: 700;
  color: #3b82f6;
}

.product-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.product-card__button {
  flex: 1;
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-align: center;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
}

.product-card__button--primary {
  background: #3b82f6;
  color: white;
}

.product-card__button--secondary {
  background: transparent;
  color: #3b82f6;
  border: 1px solid #3b82f6;
}

/* コンテナクエリによるレスポンシブ対応 */
@container product (min-width: 350px) {
  .product-card__inner {
    flex-direction: row;
  }

  .product-card__image-wrapper {
    width: 140px;
    flex-shrink: 0;
  }

  .product-card__description {
    -webkit-line-clamp: 3;
  }
}

@container product (min-width: 500px) {
  .product-card__image-wrapper {
    width: 180px;
  }

  .product-card__actions {
    flex-direction: row;
  }
}

/* ホバー効果（デバイス対応） */
@media (hover: hover) {
  .product-card__inner:hover .product-card__image {
    transform: scale(1.05);
  }

  .product-card__button--primary:hover {
    background: #2563eb;
  }

  .product-card__button--secondary:hover {
    background: #eff6ff;
  }
}

Atomic Design パターンとの統合

Atomic Design の原則に従い、小さなコンポーネントから大きなコンポーネントを組み立てる設計も、Container Queries と相性が良いです。

/* Atoms（原子）：ボタン */
.btn {
  padding: clamp(0.5rem, 2cqi, 0.75rem) clamp(1rem, 3cqi, 1.5rem);
  font-size: clamp(0.875rem, 2cqi, 1rem);
  font-weight: 600;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}

/* Molecules（分子）：検索バー */
.search-bar {
  container-type: inline-size;
  container-name: search;
}

.search-bar__form {
  display: flex;
  gap: 0.5rem;
}

.search-bar__input {
  flex: 1;
  padding: clamp(0.5rem, 2cqi, 0.75rem);
  font-size: clamp(0.875rem, 2cqi, 1rem);
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}

@container search (min-width: 400px) {
  .search-bar__form {
    gap: 1rem;
  }

  .search-bar__filters {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
}

/* Organisms（有機体）：ヘッダー */
.header {
  container-type: inline-size;
  container-name: header;
}

.header__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

@container header (min-width: 768px) {
  .header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
  }

  .header__nav {
    display: flex;
    gap: 2rem;
  }
}

レイアウトコンテナとコンポーネントコンテナの分離

実務では、レイアウト用のコンテナとコンポーネント用のコンテナを明確に分離することで、より柔軟な設計が可能になります。

/* レイアウトコンテナ：グリッドシステム */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 3vw, 2rem);
}

.layout-sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.layout-main {
  container-type: inline-size;
  container-name: main;
}

/* コンポーネント：どのコンテナでも動作 */
.widget {
  container-type: inline-size;
  padding: clamp(1rem, 3cqi, 2rem);
  background: white;
  border-radius: 0.5rem;
}

.widget__title {
  font-size: clamp(1.125rem, 4cqi, 1.5rem);
  margin-bottom: clamp(0.75rem, 2cqi, 1rem);
}

@container (min-width: 400px) {
  .widget__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

この設計により、同じウィジェットコンポーネントを、サイドバー内でもメインコンテンツ内でも、それぞれの幅に応じて最適に表示できます。メディアクエリでは不可能だった、真にモジュール化されたコンポーネント設計が実現しているのです。

格安ドメイン取得サービス─ムームードメイン─

メディアクエリを使わない設計の課題・限界とその対策

メディアクエリが効かない・競合するトラブルの原因と解決法

メディアクエリを減らす設計を進めるうえで、完全に排除できないケースや、トラブルシューティングの知識は不可欠です。ここでは実務で遭遇する問題とその解決策を解説します。

メディアクエリを完全に排除できないケース

以下のような場面では、@media クエリが依然として必要です：

1. 印刷スタイルの制御

印刷時には、画面表示とは根本的に異なるスタイルが必要になります。

/* 画面表示用の通常スタイル */
.navigation {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

/* 印刷時は不要な要素を非表示 */
@media print {
  .navigation,
  .sidebar,
  .footer {
    display: none;
  }

  .content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* ページ分割の制御 */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  /* リンクURLの表示 */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

2. ユーザー環境設定への対応

アクセシビリティやユーザー体験向上のため、OS・ブラウザ設定に応じた対応が必要です。

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #111827;
    --color-text: #f9fafb;
    --color-surface: #1f2937;
  }
}

/* モーション低減設定への対応 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* コントラスト強調設定への対応 */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000000;
    --color-text: #000000;
    --box-shadow: none;
  }

  .button {
    border: 2px solid currentColor;
  }
}

/* データ節約モード */
@media (prefers-reduced-data: reduce) {
  /* 背景画像を非表示 */
  .hero {
    background-image: none;
    background-color: #f3f4f6;
  }

  /* 動画を静止画に置き換え */
  video {
    display: none;
  }

  video + img {
    display: block;
  }
}

3. 非常に大規模なレイアウト変更

ヘッダーナビゲーションを横並びからハンバーガーメニューに変更するような、根本的なUI変更では、メディアクエリが依然として有効です。

/* モバイル：ハンバーガーメニュー */
.header__nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background: white;
  padding: 2rem;
  transition: right 0.3s;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.header__nav.is-open {
  right: 0;
}

.header__toggle {
  display: block;
  width: 2rem;
  height: 2rem;
}

/* デスクトップ：通常の横並びナビゲーション */
@media (min-width: 768px) {
  .header__nav {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: transparent;
    padding: 0;
    box-shadow: none;
    display: flex;
    gap: 2rem;
  }

  .header__toggle {
    display: none;
  }
}

詳細度による競合の回避

メディアクエリと新しいCSS技術を併用する際、スタイルの競合が発生することがあります。!important を使わずに解決する方法を紹介します。

問題のあるコード例：

/* ベーススタイル */
.card {
  padding: 1rem;
}

/* Container Query */
@container (min-width: 400px) {
  .card {
    padding: 2rem;
  }
}

/* 後から追加されたメディアクエリが上書きしてしまう */
@media (min-width: 768px) {
  .card {
    padding: 1.5rem; /* Container Queryの効果が失われる */
  }
}

解決策1：詳細度を高める

/* Container Queryの詳細度を上げる */
.card-wrapper .card {
  padding: 1rem;
}

@container (min-width: 400px) {
  .card-wrapper .card {
    padding: 2rem;
  }
}

/* メディアクエリも同じ詳細度にする */
@media (min-width: 768px) {
  .card-wrapper .card {
    padding: 1.5rem;
  }
}

解決策2：レイヤーで優先順位を明示

CSS Cascade Layers（@layer）を使用すると、詳細度に関わらず優先順位を制御できます。

/* レイヤーの定義（後に定義したレイヤーが優先） */
@layer base, container, media;

@layer base {
  .card {
    padding: 1rem;
  }
}

@layer container {
  @container (min-width: 400px) {
    .card {
      padding: 2rem;
    }
  }
}

@layer media {
  @media (min-width: 768px) {
    .card {
      padding: 1.5rem;
    }
  }
}

解決策3：設計レベルでの分離

そもそも競合が起きないよう、責任範囲を明確に分離します。

/* Container Queryは「コンポーネント内部」のレイアウトのみ制御 */
@container (min-width: 400px) {
  .card__inner {
    display: flex;
    flex-direction: row;
  }
}

/* メディアクエリは「ページ全体」のレイアウトのみ制御 */
@media (min-width: 768px) {
  .page-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
  }
}

デバッグのベストプラクティス

スタイルが期待通りに適用されない場合のデバッグ手順：

/* 1. 条件が正しく評価されているか確認 */
@container (min-width: 400px) {
  .card {
    /* デバッグ用：目立つスタイルで動作確認 */
    outline: 3px solid red;
    padding: 2rem;
  }
}

/* 2. コンテナが正しく定義されているか確認 */
.card-wrapper {
  container-type: inline-size;
  /* デバッグ用：コンテナの境界を可視化 */
  outline: 2px dashed blue;
}

/* 3. 詳細度の問題を一時的に回避して確認 */
@container (min-width: 400px) {
  .card {
    padding: 2rem !important; /* 一時的にのみ使用 */
  }
}

ブラウザの開発者ツールで「Computed」タブを確認し、どのルールが最終的に適用されているかを特定することが重要です。

メディアクエリ削減によるSEO・パフォーマンス・アクセシビリティへの影響

メディアクエリに依存しない設計は、サイトの品質に複数の面でポジティブな影響をもたらします。

パフォーマンス向上への影響

1. CSSファイルサイズの削減

従来の設計では、各ブレークポイントごとに重複したスタイル定義が必要でした。

/* 従来の方法：約100行 */
.title { font-size: 1.5rem; }
.description { font-size: 1rem; }
.button { padding: 0.5rem 1rem; }
/* ...他多数のプロパティ */

@media (min-width: 768px) {
  .title { font-size: 2rem; }
  .description { font-size: 1.125rem; }
  .button { padding: 0.75rem 1.5rem; }
  /* ...同じプロパティを再定義 */
}

@media (min-width: 1200px) {
  .title { font-size: 2.5rem; }
  .description { font-size: 1.25rem; }
  .button { padding: 1rem 2rem; }
  /* ...さらに再定義 */
}

/* モダンな方法：約10行 */
.title { font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem); }
.description { font-size: clamp(1rem, 1.5vw + 0.75rem, 1.25rem); }
.button { padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem); }

実際のプロジェクトでは、30〜50%のCSS削減が期待できます。これはファイル転送量の削減、パース時間の短縮につながります。

2. Core Web Vitalsへの好影響

• LCP（Largest Contentful Paint）:
  CSSファイルの軽量化により、クリティカルレンダリングパスが短縮され、初期表示が高速化します
• CLS（Cumulative Layout Shift）:
  clamp() による滑らかなサイズ変更で、急激なレイアウトシフトが減少します
• FID（First Input Delay）:
  CSS処理時間の削減により、JavaScriptの実行開始が早まります

/* CLSを防ぐ：画像の予約スペース確保 */
.image-container {
  /* aspect-ratioで領域を事前確保 */
  aspect-ratio: 16 / 9;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* フォントサイズの急激な変化を防ぐ */
.text {
  font-size: clamp(1rem, 1.5vw + 0.75rem, 1.25rem);
  /* 滑らかに変化するため、レイアウトシフトが最小化 */
}

3. レンダリングパフォーマンス

メディアクエリの評価回数が減ることで、リサイズ時のブラウザ負荷が軽減されます。

/* 従来：リサイズのたびに10個のメディアクエリを評価 */
@media (min-width: 320px) { /* ... */ }
@media (min-width: 375px) { /* ... */ }
@media (min-width: 425px) { /* ... */ }
/* ...計10個 */

/* モダン：clamp()は一度計算されるだけ */
.element {
  font-size: clamp(1rem, 2vw, 1.5rem);
  /* ブラウザが効率的に処理 */
}

SEOへの影響

直接的なSEO効果はありませんが、以下の間接的なメリットがあります：

1. ページ速度の向上 → Googleのランキング要因の一つ
2. モバイルユーザビリティの向上 → モバイルファーストインデックスで有利
3. コンテンツの可読性向上 → ユーザー体験指標（滞在時間、直帰率）の改善

/* SEOに配慮したタイポグラフィ */
h1 {
  /* 読みやすいサイズを維持 */
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  line-height: 1.2;
  /* 適切な余白でスキャナビリティ向上 */
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

p {
  /* 最適な1行あたりの文字数（45-75文字）を維持 */
  max-width: 65ch;
  font-size: clamp(1rem, 1.25vw + 0.75rem, 1.125rem);
  line-height: 1.7;
}

アクセシビリティの向上

ユーザー環境設定クエリを活用することで、より包括的なアクセシビリティ対応が可能です。

1. prefers-reduced-motion：動きに敏感なユーザーへの配慮

/* デフォルト：滑らかなアニメーション */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* モーション低減設定時：アニメーションを最小化 */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
    /* 色の変化のみで視覚的フィードバック */
    outline: 2px solid #3b82f6;
  }
}

2. prefers-color-scheme：視覚疲労の軽減

:root {
  --color-background: #ffffff;
  --color-text: #111827;
  --color-border: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #111827;
    --color-text: #f9fafb;
    --color-border: #374151;
  }
}

/* すべてのコンポーネントで自動対応 */
body {
  background: var(--color-background);
  color: var(--color-text);
}

3. prefers-contrast：視認性の向上

@media (prefers-contrast: high) {
  :root {
    /* コントラスト比を高める */
    --color-text: #000000;
    --color-link: #0000ee;
    --color-border: #000000;
  }

  .button {
    /* 明確な境界線 */
    border: 2px solid currentColor;
  }

  /* 薄いグラデーションを無効化 */
  .gradient-background {
    background: var(--color-background);
  }
}

4. フォーカス表示の強化

/* キーボードナビゲーション用の明確なフォーカス表示 */
:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* マウスクリックでは表示しない */
:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-contrast: high) {
  :focus-visible {
    outline-width: 4px;
    outline-color: #000000;
  }
}

既存サイトを安全に「メディアクエリレス」にリファクタリングするステップ

既存のサイトを一度にリファクタリングするのはリスクが高いため、段階的なアプローチが推奨されます。

ステップ1：タイポグラフィのclamp()化

最もリスクが低く、効果が大きいのがタイポグラフィの改善です。

実施手順：

/* BEFORE：従来のメディアクエリベース */
body { font-size: 16px; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }

@media (min-width: 768px) {
  body { font-size: 18px; }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
}

@media (min-width: 1200px) {
  body { font-size: 20px; }
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
}

/* AFTER：clamp()による流動的なタイポグラフィ */
:root {
  --font-size-base: clamp(1rem, 1.25vw + 0.75rem, 1.25rem);
  --font-size-h2: clamp(1.25rem, 2vw + 1rem, 2rem);
  --font-size-h1: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
}

body { font-size: var(--font-size-base); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }

ステップ2：スペーシングの変数化

次に、余白システムを統一します。

/* BEFORE */
.section { padding: 20px; }
.card { padding: 15px; margin-bottom: 20px; }

@media (min-width: 768px) {
  .section { padding: 40px; }
  .card { padding: 25px; margin-bottom: 30px; }
}

/* AFTER */
:root {
  --space-xs: clamp(0.5rem, 1vw, 1rem);
  --space-sm: clamp(0.75rem, 1.5vw, 1.5rem);
  --space-md: clamp(1rem, 2vw, 2rem);
  --space-lg: clamp(1.25rem, 2.5vw, 2.5rem);
}

.section { padding: var(--space-lg); }
.card {
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
}

ステップ3：グリッドレイアウトのminmax()化

カードグリッドやリストレイアウトを、自動調整型に変更します。

/* BEFORE */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* AFTER */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

段階的な移行方法：

/* 過渡期：両方を併用してフォールバック */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@supports (width: min(100%, 300px)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1rem, 2vw, 2rem);
  }
}

@media (min-width: 768px) {
  @supports not (width: min(100%, 300px)) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

ステップ4：コンポーネント単位で@containerを導入

最後に、Container Queriesを段階的に導入します。

/* ステップ4-1：コンテナを定義 */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* ステップ4-2：既存のメディアクエリをコピーして、@containerに変更 */
@media (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

/* 並行して@containerを追加（段階的な移行） */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

/* ステップ4-3：十分にテストした後、@mediaを削除 */

この段階的アプローチにより、リスクを最小化しながら、モダンなレスポンシブ設計へ移行できます。

月額99円から。容量最大1TB！ブログ作成におすすめのWordPressテーマ「Cocoon」も簡単インストール

よくある質問（FAQ）

まとめ

メディアクエリを使わないレスポンシブデザインは、「メディアクエリが不要」という意味ではなく、過度な依存から脱却し、より本質的で柔軟な設計を目指すという考え方です。clamp()、CSS Grid、Container Queriesといったモダンな技術を活用することで、無限の画面サイズに対応できる真のレスポンシブデザインが実現できます。

これらの技術により、従来比30〜50%のCSS削減が期待でき、Core Web Vitalsの改善にもつながります。ただし、印刷スタイルやユーザー環境設定（ダークモード、モーション低減など）への対応では、メディアクエリが依然として必要です。

既存サイトのリファクタリングは、いきなり全体を変更するのではなく、タイポグラフィ→スペーシング→グリッド→Container Queriesという段階的なアプローチが安全です。各ステップで視覚的回帰テストを実施し、ブラウザサポート状況を確認しながら進めることで、リスクを最小化できます。

今日からできる第一歩として、まずはclamp()を使ったFluid Typographyの導入から始めてみましょう。この小さな一歩が、より保守性が高く、未来志向なレスポンシブデザインへの扉を開きます。