2025.07.20

CSSの新単位cqwとは？画面幅ではなく“コンテナ幅”で考えるレイアウト実践ガイド

みなと

CSSでレスポンシブなレイアウトを組むとき、

UI実装担当

vw は画面全体が基準になっちゃうから思いどおりにならないし、
% も、基準にされる要素がコロコロ変わって扱いづらい…。

そんなふうに感じたことはないでしょうか。

コンポーネント単位で設計する場面では、「このエリアは、親の幅に応じて全体がそのまま拡縮してくれたらいいのに」と感じることがあります。

こうしたケースに対応する新しい選択肢が、cqw という「コンテナに対する相対単位」です。あらかじめ親要素を「コンテナ」として定義しておくことで、その幅を基準に値を指定できるようになります。

本記事では、この cqw を中心に、

どのような仕組みで動くのか
どんなケースで使うと効果的か
実務でどのように設計・導入すればいいか

といった観点から、具体例やデモとともにわかりやすく解説していきます。

Contents

cqwとは？仕組みと基本的な意味
実践：cqwを使うための基本セットアップ
- 親要素に container-type を設定
- 子要素に cqw を適用
例で学ぶ：cqwを活かしたスタイル設計パターン
Sassでcqwベースのデザインを効率化する方法
ブラウザ対応状況
まとめ

cqwとは？仕組みと基本的な意味

cqw は、CSSに新しく追加された「コンテナクエリ単位」のひとつです。その正式名称は container query width。名前のとおり、特定の親コンテナの「幅」に対して相対的な値を指定できる単位です。

コンテナクエリとは？

レイアウトを組んでいると、「この要素、親が狭くなったらサイズも小さくしたいな」と思うことがありますよね。

これまでのCSSでは、そういった調整をするのは意外と難しく、画面全体の幅に合わせてしか変化をつけられないケースが多くありました。

そこで登場したのが「コンテナクエリ」という新しい仕組みです。これは、「ある特定の親要素（＝“コンテナ”と指定した要素）のサイズ」に合わせて、柔軟にスタイルを調整できるようにするための考え方です。

cqw はこの「コンテナの横幅」を基準に、数値を相対的に指定できる単位です。

みなと

cqw は、% や vw のような相対単位と違い、“サイズの基準を自分で決められる”ところが魅力です！

定義：1cqw = 親コンテナの幅の1%

たとえば、親コンテナの幅が800pxである場合、1cqw はその1%である 8px を意味します。したがって、60cqw と指定すれば 480px に相当します。

この仕組みによって、親要素のサイズが変化しても、それに応じて子要素のサイズや余白、フォントサイズなどを動的に調整できます。

相対単位との違い：vw, %, cqw の比較

cqw は「親コンテナの幅」を基準にした相対単位ですが、CSSには他にも相対的な単位が存在します。特によく使われるのが vw と % です。これらは一見似ているように見えますが、基準となる対象と使い方には明確な違いがあります。

以下の表で比較してみましょう。

単位	基準	使用対象	変化のトリガー
%	親要素	width, padding等	親要素のサイズ変化
vw	ビューポート幅	画面全体	ウィンドウサイズ
cqw	コンテナ幅	コンポーネント内	親コンテナのサイズ変化

このように、cqw は % と同じく「親要素」に基づいていますが、どの親を基準にするかが CSSで明示的に制御できる点が大きな違いです。container-type: inline-size を指定した要素がその「基準」となり、意図した通りの相対指定が可能になるため、より構造的で保守しやすいスタイル設計が実現できます。

また、vw のようなビューポート基準の単位では、コンポーネント単位での柔軟なレスポンシブ対応が難しいという課題もありました。cqw を使えば、ページ全体ではなく、“今ここ”の親サイズに応じて柔軟にデザインを調整できるという新しい選択肢が生まれるわけです。

みなと

親が max-width: 800px で止まっていても、vw を使うと子要素が画面幅に応じて大きくなり続けることがあります。cqw なら、親のサイズを超えない範囲で拡縮できるので、調整の手間も減らせます。

他のcq単位について簡単に紹介

cqw は一連のコンテナクエリ単位の中の1つで、他にも次のような単位が存在します。

cqh：親コンテナの高さの1%
cqi：インライン軸の1%
cqb：ブロック軸の1%
cqmin：インラインとブロックのうち「小さい方」の1%
cqmax：同様に「大きい方」の1%

これらの単位を使うことで、幅だけでなく高さや書字方向の軸に対しても、柔軟なレイアウト指定が可能になります。今回の記事では cqw にフォーカスしていますが、他の単位もあわせて使えるようになると、レイアウトの幅がさらに広がります。

実践：cqwを使うための基本セットアップ

それでは実際に、cqw を使ったスタイル設計の基本パターンを見ていきましょう。

cqw は「親コンテナの幅の1%」を表す単位です。これを使うには、まず対象となる要素の親に containerの指定が必要です。container-type を使って「この要素を基準にサイズを測る」という明示的な宣言を行います。

親要素に container-type を設定

まずは親要素に次のようなスタイルを指定します。

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

この設定によって、.container 要素が、その中にある要素たちのスタイル指定におけるサイズ基準になります。

ここで指定している inline-size は、「横幅（インライン方向）」を基準にする値です。container-type には他にも、縦横の両方を基準にできる size という指定もありますが、cqw のように横幅を使う単位を扱う場合は、inline-size を指定すればOKです。

子要素に cqw を適用

子要素では、通常の数値指定と同じように cqw 単位を使います。たとえば、幅やパディング、フォントサイズなどに以下のように指定できます。

.card {
  width: 60cqw;
  padding: 3cqw;
  font-size: 1.8cqw;
}

この設定により、親要素の幅が変化すると、それに連動して子要素のサイズも変わるようになり、レスポンシブな見た目が作りやすくなります。

例で学ぶ：cqwを活かしたスタイル設計パターン

ここでは、cqw を使ったスタイル設計の実践例をご紹介します。

今回取り上げるのは、画像を背景に、タイトルやリード文を配置する定番の構成です。ファーストビューや紹介セクションなどでよく使われる、背景画像の上にテキストを重ねるレイアウトを想定しています。

まずはデモをご覧ください

以下のボタンから、cqw を活用したデモページを開くことができます。画面幅を変えながら、テキストの大きさや位置がどのように変化するか、ぜひ確認してみてください。

デモページを開く

HTML

<div class="kv-wrapper">
  <div class="kv-box">
    <div class="kv-content">
      <h1 class="kv-title">CQWの動作デモ</h1>
      <p class="kv-lead">container-type を指定したこの領域では、<br class="only-pc">子要素が親の幅に応じて拡縮します。<br class="only-pc">ウィンドウ幅を変えて動きを確認してみてください。</p>
    </div>
  </div>
</div>

CSS

.kv-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 50px 120px;
}

@media (max-width: 767px) {
  .kv-wrapper {
    padding: 50px 20px 100px;
  }
}

.kv-box {
  container-type: inline-size; /* cqwなどのコンテナ単位を有効にする：この要素の横幅を基準にする */
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  background: url(images/demo-image.webp) no-repeat 50%/cover;
  overflow: hidden;
}

@media (max-width: 767px) {
  .kv-box {
    aspect-ratio: 3 / 4;
    background-image: url(images/demo-image_sp.webp);
  }
}

/* --- cqw 換算の凡例 ----------------------------------------
  [PC → 基準幅 740px
    例）50px → 50 ÷ 740 × 100 = 6.76cqw

  [スマホ → 基準幅 335px
    例）20px → 20 ÷ 335 × 100 = 5.97cqw
------------------------------------------------------------ */

.kv-content {
  position: absolute;
  left: 6.76cqw;
  top: 14.86cqw;
}

@media (max-width: 767px) {
  .kv-content {
    left: 5.97cqw;
    top: 65.67cqw;
    width: calc(100% - 11.94cqw);
  }
}

.kv-title {
  font-size: 7.43cqw;
  font-weight: 900;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .kv-title {
    font-size: 10.45cqw;
  }
}

.kv-lead {
  margin-top: 5.41cqw;
  font-size: 2.43cqw;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .kv-lead {
    margin-top: 5.97cqw;
    font-size: 4.78cqw;
  }
}

ポイント解説

このデモでは、背景画像上にテキストを配置する構成において、以下のような要素に cqw を使用しています。

見出し (.kv-title) のフォントサイズ
リード文 (.kv-lead) のフォントサイズと余白
テキストブロック全体 (.kv-content) の位置（top / left）

これにより、背景エリア（親要素）のサイズに応じて、テキストもスムーズにスケーリングする構造になっています。

また、cqwを正しく機能させるために、親要素には container-type: inline-size; を指定しています。この指定により、cqwが「ビューポート」ではなく「親要素の横幅」を基準に動作するようになります。

さらに、このデモでは、cqw の基準となる .kv-box の親要素 .kv-wrapper に max-width を指定しています。これにより、画面がいくら広がっても .kv-box の幅が制限され、それに従う子要素（cqwで指定）も一緒にスケールが止まるという挙動になります。vw との違いが、ここではっきりと体感できます。

実務のニーズから見る「cqw」と基準幅の関係

実際の現場でコーディングをしていると、こんなふうに思うことがよくあります。

UI実装担当

このエリアは、画面幅に合わせて全体が縮小・拡大してくれたらな…。でも、ただ vw を使うだけだと周りの構造とズレるし、% だと基準がブレやすい…。

そんなときに使えるのが、container-type と cqw の組み合わせです。

たとえば、デザインカンプ上で「このエリアの幅が 740px に設定されている」とします。このエリアを container-type: inline-size; で「コンテナ化」することで、その 740px を100cqwとして扱えるようになるんです。

そこから、テキストサイズや余白、位置などをすべて「比率」で換算すればOK。

/* --- cqw 換算の凡例 ----------------------------------------
  [PC → デザインカンプ上の基準幅：740px]
    例）50px → 50 ÷ 740 × 100 = 6.76cqw

  [スマホ → 基準幅：335px]
    例）20px → 20 ÷ 335 × 100 = 5.97cqw
------------------------------------------------------------ */

この方法の良いところは、デザイン通りの見た目を維持しつつ、画面幅に応じて自然に縮小・拡大してくれる点です。従来の vw や % では難しかった、「構造に依存したスケーリング」を、親要素単位で制御できるのは大きな魅力です。

Sassでcqwベースのデザインを効率化する方法

cqw を使ったレイアウトは非常に柔軟ですが、デザインカンプでは通常、各要素のサイズが px で指定されています。そのため、どの数値を cqw に換算するかを毎回計算するのは、少し手間がかかります。

そんなときに便利なのが、Sass関数を使ったpxからcqwへの換算です。

デザインカンプの数値をcqwで再現するには？

たとえば、デザイン上のカードの横幅が 480px、親コンテナが 800px だったとしましょう。このとき、cqwでの換算は次のようになります。

(480 / 800) * 100 = 60cqw

このような比率計算を毎回手動でするのは大変なので、Sassに関数を定義しておくことで効率化できます。

Sass関数でcqw換算を自動化する

以下は、pxからcqwへの換算を行うシンプルな関数です。

@function cqw($px, $container: 800) {
  @return ($px / $container) * 100 + cqw;
}

使い方はとても直感的です。

.card {
  width: cqw(480); // → 60cqw 相当
  padding: cqw(24); // → 3cqw 相当
}

スワン

この書き方なら普段のpx指定とほとんど変わらない手間で書けるし、あとから値の見直しや調整がしやすい！

コンテナごとに柔軟に対応できる

この関数のポイントは、コンテナの基準幅（ここでは800）を引数で変えられることです。もし別のモジュールが600pxのコンテナに収まる設計であれば、次のように書けます。

.module {
  padding: cqw(30, 600); // → 5cqw
}

これにより、複数のデザインカンプやコンポーネントに対応しながら、cqwベースの設計を一貫して行うことができます。

Sassの関数や基本機能についてもっと詳しく知りたい方は、以下の記事もあわせてご覧ください。

ブラウザ対応状況

cqw（および他のコンテナクエリ単位）は比較的新しいCSS仕様ですが、現在では主要ブラウザで安定してサポートされています。2025年7月現在、Chrome、Edge、Firefox、Safari（macOS / iOS）ではいずれも問題なく動作するため、通常の開発環境であれば安心して利用可能です。

また、Can I use のデータによると、全体の対応率は約93% に達しており、十分な普及率といえます。

実際に筆者の開発環境でも、いくつかの主要ブラウザやOSにて動作確認を行いました。

筆者の確認環境と動作結果（2025年7月現在）

デバイス	OS・ブラウザ	動作状況
PC	Chrome（バージョン138）	正常動作
	Edge（バージョン138）	正常動作
	Firefox（バージョン140）	正常動作
	Safari（バージョン18.1）	正常動作
スマホ	iPhone 15（iOS 18.5、Safari）	正常動作
スマホ	Xperia（Android 13、Chrome）	正常動作
タブレット	iPad（第5世代、iPadOS 16.7、Safari）	正常動作