CSSコンテナクエリ

design/css-container-queries

CSSコンテナクエリの基本構文、container-type、名前なし例、メディアクエリとの差を確認できます。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

CSSコンテナクエリでは、CSSコンテナクエリの基本構文、container-type、名前なし例、メディアクエリとの差を確認できます。
関連する観点として container query、コンテナクエリ、CSS container を確認し、結果をコピーして別の作業に使えます。

結果

--- 基本の書き方 ---
.parent {
  container-type: inline-size;
  container-name: card;
}

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

--- container-type ---
normal        コンテナクエリ無効 (デフォルト)
size          幅と高さの両方で判定
inline-size   インライン方向(通常は幅)で判定

--- 名前なしでもOK ---
.parent { container-type: inline-size; }

@container (min-width: 300px) {
  .child { font-size: 1.2rem; }
}

--- メディアクエリとの違い ---
@media     → ビューポート(画面)のサイズで判定
@container → 親コンテナのサイズで判定

--- ブラウザ対応 ---
Chrome 105+, Firefox 110+, Safari 16+
すべてのモダンブラウザで利用可能

使い方

結果欄の基本の書き方で、.parent の container-type と container-name を確認します。
@container card (min-width: 400px) のブロックで、子要素に適用する書き方を読みます。
container-type欄で normal、size、inline-size の違いを見ます。
名前なし例、@mediaとの差、ブラウザ対応のメモまで確認し、必要ならCopyボタンを使います。

入力例・出力例

INPUT

container-type

OUTPUT

normal コンテナクエリ無効 (デフォルト) size 幅と高さの両方で判定 inline-size インライン方向(通常は幅)で判定

INPUT

@media

OUTPUT

@media → ビューポート(画面)のサイズで判定

INPUT

ブラウザ対応

OUTPUT

Chrome 105+, Firefox 110+, Safari 16+ すべてのモダンブラウザで利用可能

よくある利用シーン

カードやサイドバー内コンポーネントを、ビューポートではなく親幅で切り替えたいとき。
container-name付きと名前なしの@container構文を同じメモで確認したいとき。
メディアクエリとの判断軸を、短い説明としてチーム内に共有したいとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
container query、コンテナクエリ、CSS containerの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

CSSコンテナクエリの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

コンテナクエリはメディアクエリとどう違いますか？

メディアクエリはビューポート幅などのグローバル条件を見ますが、コンテナクエリは@containerルールで特定の祖先要素の幅を参照します。同じコンポーネントをサイドバーにもメインコンテンツにも配置して、親の幅に応じてレイアウトを変えることができます。

container-typeにはどのような値がありますか？

container-typeにはinline-size（横幅でクエリ）・size（横幅と高さの両方）・normalの3値があります。inline-sizeが最もよく使われます。container: sidebar / inline-sizeのようにcontainerショートハンドで名前と型を同時に指定できます。

コンテナクエリでコンテナ自身のスタイルは変更できますか？

いいえ。@container内のスタイルはコンテナの子孫要素にのみ適用されます。コンテナ自身のスタイルを変えたい場合は、そのコンテナを囲む外側の要素にcontainer-typeを指定してください。

CSSコンテナクエリ

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール

CSSコンテナクエリ

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール