CreaTools LogoCreaTools
Tech Notes
Unit Converter

Container Query Units完全ガイド｜cqw / cqh / cqi が必要な場面と判断基準

2026-02-27

結論：この3行で即決

画面幅に応じたサイズ → vw 親要素の幅に応じたサイズ → cqw / cqi 迷ったら → まだ vw + rem で十分

Container Query Units は「コンポーネントが置かれる場所によってサイズを変えたい」ときだけ使う。

vw では解決できない問題

┌──────────────────────────────────────────┐
│ ページ全体（1200px）                      │
│                                          │
│ ┌────────┐  ┌───────────────────────────┐│
│ │サイドバー│  │ メインコンテンツ（800px）  ││
│ │  300px  │  │                           ││
│ │         │  │  ┌─────────┐ ┌─────────┐ ││
│ │         │  │  │ カードA │ │ カードB │ ││
│ │         │  │  └─────────┘ └─────────┘ ││
│ └────────┘  └───────────────────────────┘│
└──────────────────────────────────────────┘

カードの文字サイズを font-size: 2vw にすると、サイドバーの有無に関係なく画面幅で決まる。

サイドバーがあるとカードは狭いのにフォントは大きいまま。これが vw の限界。

cqw なら親コンテナの幅に連動する。 カードが狭い場所に置かれれば、自動でフォントも小さくなる。

Container Query Units 一覧

単位基準意味
cqwコンテナの幅の1%container query width
cqhコンテナの高さの1%container query height
cqiコンテナのインライン軸の1%container query inline
cqbコンテナのブロック軸の1%container query block
cqmincqi と cqb の小さい方container query min
cqmaxcqi と cqb の大きい方container query max

実務で使うのは cqi（または cqw）だけ

横書きなら cqi = cqw。迷ったら cqi を使う。 論理方向（writing-mode）に対応するため。

使い方：3ステップ

Step 1: コンテナを宣言

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

Step 2: 子要素で cqi を使う

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

Step 3: 完了

これだけ。 @container ルールなしでも単位だけで使える。

実用パターン

パターン1: カードコンポーネント

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

.card-title {
  font-size: clamp(0.875rem, 5cqi, 1.5rem);
}

.card-body {
  font-size: clamp(0.75rem, 3.5cqi, 1rem);
}

.card-image {
  height: 30cqi;
}

カードが3列なら小さく、1列なら大きく。自動で調整される。

パターン2: サイドバー対応レイアウト

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

.hero-heading {
  font-size: clamp(1.5rem, 6cqi, 3rem);
}

サイドバーの開閉でメインコンテンツの幅が変わっても、見出しが自動で追従する。

パターン3: ダッシュボードのウィジェット

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

.widget-value {
  font-size: clamp(1rem, 8cqi, 3rem);
}

ウィジェットがリサイズされても、数値が収まるサイズになる。

cqw vs vw：判断フロー

┌─────────────────────────────────────────┐
│ サイズを何に連動させたい？               │
└─────────────────────────────────────────┘
        ↓
┌─────────────────────────────────────────┐
│ 画面全体の幅？                           │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ vw（または clamp + vw）               │
└─────────────────────────────────────────┘

        ↓ No
┌─────────────────────────────────────────┐
│ 親コンテナの幅？                         │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ cqi（または clamp + cqi）             │
└─────────────────────────────────────────┘

        ↓ No
┌─────────────────────────────────────────┐
│ 固定値でいい？                           │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ rem / px                              │
└─────────────────────────────────────────┘

clamp と併用が必須

/* ✗ 危険：コンテナが極小/極大で破綻 */
font-size: 5cqi;

/* ✓ 安全：上限と下限を設定 */
font-size: clamp(0.875rem, 5cqi, 2rem);

cqi を裸で使うな。 コンテナが予想外に狭い／広い場合に文字が極小／極大になる。

vw と同じリスク。必ず clamp() で挟む。

container-type の選び方

値監視する軸使用可能な単位
inline-sizeインライン軸（横幅）cqi, cqw
size両軸（幅＋高さ）cqi, cqw, cqb, cqh
normalなし（デフォルト）使用不可

inline-size を使う（99%のケース）

/* ✓ 推奨 */
container-type: inline-size;

/* △ 高さも必要な場合のみ */
container-type: size;

size は高さのコンテインメントを強制する。レイアウト崩れの原因になりやすい。

注意点とハマりどころ

1. container-type を忘れる

/* ✗ 親に container-type がないと無視される */
.parent { /* container-type なし */ }
.child { font-size: 5cqi; } /* ビューポート幅にフォールバック */

/* ✓ 親にコンテナ宣言が必要 */
.parent { container-type: inline-size; }
.child { font-size: 5cqi; }

container-type を宣言しないと、cqi はビューポート幅にフォールバックする（vw と同じ動作）。エラーは出ない。気づきにくいバグ。

2. container-type: size の高さ崩れ

/* ✗ 高さが auto のコンテナに size を使うと崩れる */
.wrapper {
  container-type: size;
  /* height: auto → コンテンツの高さが0になる */
}

/* ✓ inline-size で十分 */
.wrapper {
  container-type: inline-size;
}

3. ネストしたコンテナ

cqi は最も近い祖先コンテナを参照する。意図しないコンテナを参照していないか確認。

.outer { container-type: inline-size; } /* 幅: 1200px */
.inner { container-type: inline-size; } /* 幅: 400px */
.text  { font-size: 5cqi; }            /* 400px × 5% = 20px */

ブラウザ対応

ブラウザ対応バージョン
Chrome105+（2022年9月〜）
Firefox110+（2023年2月〜）
Safari16+（2022年9月〜）
Edge105+（2022年9月〜）

2023年以降の主要ブラウザはすべて対応。 IE対応が不要ならプロダクションで使える。

フォールバック

.title {
  /* フォールバック（古いブラウザ） */
  font-size: clamp(1rem, 3vw, 2rem);
  /* Container Query Units対応ブラウザ */
  font-size: clamp(1rem, 5cqi, 2rem);
}

後に書いたプロパティが優先される。未対応ブラウザは1行目を使う。

まとめ

判断結論
画面幅に連動vw
コンテナ幅に連動cqi
固定サイズrem / px
clamp() 併用必須
container-typeinline-size
迷ったらまだ rem + vw で十分

cqi が必要になるのは「同じコンポーネントが異なる幅の親に置かれる」場合だけ。

そうでなければ、vw + rem で問題ない。

計算は Unit Converter で。レスポンシブなフォントサイズは Clamp Generator で。

関連記事