CSS Container Query ジェネレーター
CSSコンテナクエリ（@container）を視覚的にシミュレートし、実務で使えるHTML/CSSコードを自動生成するツールです。親コンテナの幅をスライダーで変化させながら、ブレークポイントの挙動をリアルタイムでプレビューできます。
プリセット
コンテナ幅
コンテナタイプ
コンテナ名
省略時は
.card-container が使われます
ブレークポイント
@container (min-width:
px)
→ 横並びレイアウトに切り替え
← スライダーを動かしてコンテナ幅を変えると、ブレークポイントでレイアウトが切り替わります →
Parent Container
930px
.card-container { container-type: inline-size }
Design
コンテナクエリで作るレスポンシブカード
親要素の幅に応じてレイアウトが変わるコンポーネント設計の基本を解説します。
CSS
@container と @media の決定的な違い
ビューポート幅ではなく親要素の幅を基準にするという発想の転換について。
Layout
Gridジェネレーターと組み合わせて使う
コンテナクエリとCSSグリッドを組み合わせた柔軟なレイアウトパターン集。
コンテナ幅 460px — ブレークポイント(480px)未満
CSS Container Query ジェネレーターとは？
CSS Container Query ジェネレーターは、コンテナクエリ（
@container）のコードをブラウザ上で視覚的に生成できる無料ツールです。親要素の横幅をスライダーで変化させながら、設定したブレークポイントでカードのレイアウトがどのように切り替わるかをリアルタイムでプレビューできます。生成されたCSS・HTMLコードはワンクリックでコピーでき、Web制作の現場にそのまま貼り付けて使用可能です。container-type の切り替えやコンテナ名の設定にも対応しており、コンテナクエリの基本構造をこのツール一つで体験・習得できます。
各機能の説明
-
コンテナ幅スライダー親要素（コンテナ）の幅を300px〜900pxの範囲でリアルタイムに変更できます。プレビューエリアの右端にあるドラッグハンドルを引っ張っても幅を変えられます。
-
container-type 切り替え
inline-size（横幅のみ監視）・size（縦横両方を監視）・normal（クエリ無効）の3種類から選択できます。実務ではinline-sizeが最もよく使われます。 -
container-name 設定コンテナに任意の名前を付けて、子要素側の
@containerで名前指定ができるコードを生成します。複数のコンテナが入れ子になる場合に特に有効です。 -
ブレークポイント設定
@container (min-width: ○○px)の閾値を数値入力フォームで自由に設定できます。設定値に応じてプレビューのインジケーターがリアルタイムで点灯します。 -
プリセット切り替え「ブログカード」「EC商品リスト」「プロフィール」の3種類のコンポーネントプリセットを用意しています。実務で頻出するパターンのコードをそのまま取得できます。
-
CSS / HTML コードのワンクリックコピーコード出力エリアのCSS・HTMLタブをそれぞれコピーボタンで取得できます。親要素用の
.card-containerと子要素用の.cardスタイルが明確に分かれた状態で出力されます。
使い方の手順
- プリセットボタンから作りたいコンポーネントの種類（ブログカード・EC商品リスト・プロフィール）を選択します。
- 「container-name」欄に任意のコンテナ名を入力します（プロジェクトのクラス名に合わせて変更してください）。
- 「ブレークポイント」欄に、レイアウトを切り替えたい幅（px）を入力します。
- スライダーを動かしてプレビューを確認します。インジケーターが緑色になった時点でブレークポイントを超えています。
- 「CSS」「HTML」タブのコードを「コピー」ボタンで取得し、ご自身のプロジェクトに貼り付けます。
こんなときに使う
-
サイドバーありのカードレイアウトを組むときページ幅ではなく親コンテナの幅に応じてカードを1列・多列に切り替えたい場合に、コンテナクエリのコードをすばやく生成できます。
-
コンポーネント単位でレスポンシブを設計するときメディアクエリはビューポート幅を基準にしますが、コンテナクエリは親要素の幅を基準にするため、コンポーネントを複数の場所に使い回す際に真価を発揮します。
-
コンテナクエリの構文を素早く確認したいとき
container-typeを親に書いて@containerを子に書く2ステップの記述構造を、このツールのコード出力で即座に確認できます。 -
ECサイトやブログの商品・記事カードを設計するときプリセットにECカードとブログカードを用意しています。ブレークポイントを調整するだけで実務に近いコードを出力できます。
-
コンテナクエリを同僚やクライアントに説明するときスライダーで幅を動かして挙動を見せるだけで、コンテナクエリの概念を直感的に説明できます。
よくある質問
-
container-type の
inline-sizeとsizeの違いは何ですか？inline-sizeは横幅（インライン方向）のみを監視対象にします。sizeは横幅と高さの両方を監視します。実務ではほとんどのケースでinline-sizeを使います。sizeを指定すると要素が高さをコンテンツから自動計算できなくなる制約があるため、注意が必要です。 -
container-name は省略できますか？
省略可能です。名前なしのコンテナは「unnamed container」として機能し、子要素の
@containerは直近の祖先コンテナを自動的に参照します。複数のコンテナが入れ子になる複雑なレイアウトでは、名前を付けることでどのコンテナを参照するかを明示的に指定できます。 -
コンテナクエリはどのブラウザで使えますか？
Chrome 105・Safari 16・Firefox 110 以降で対応しています（2023年時点でモダンブラウザは全対応済み）。IE11は非対応です。Can I Use の「CSS Container Queries」ページで最新の対応状況を確認できます。対応ブラウザのグローバルシェアは現在90%を超えており、実務での採用障壁はほぼなくなっています。
-
メディアクエリ（@media）との使い分けは？
@mediaはビューポート（ブラウザウィンドウ）全体の幅を基準にします。@containerは親要素の幅を基準にします。サイドバーあり・なしのレイアウトで同じカードコンポーネントを使い回す場合など、コンポーネントを置く「場所」に依存したスタイルを書きたいときはコンテナクエリが適しています。 -
入力したデータはサーバーに送信されますか？
送信されません。このツールはすべての処理をブラウザ内のJavaScriptで完結しています。入力値やプレビュー内容が外部サーバーに送信されることはなく、オフライン環境でも動作します。