データはサーバーに送信されません
6種類のテンプレートで即座に開始
メディアクエリを自動変換
CSS Container Query ジェネレーターは、CSSの最新仕様「@container」クエリをGUIで視覚的に構築するツールです。
従来のメディアクエリがビューポート（画面全体）の幅に基づくのに対し、コンテナクエリは親要素の幅に基づいてスタイルを切り替えます。これにより、コンポーネント単位でレスポンシブに対応でき、再利用性の高いUIを実現できます。
container-type・container-nameの設定、ブレークポイントの追加、プリセットからの選択、リアルタイムプレビューでの確認、メディアクエリからの自動変換まで、すべてブラウザ内で完結。サーバーへのデータ送信は一切ありません。
コンテナ設定
「コンテナ設定」でcontainer-typeとcontainer-nameを指定します。最も一般的なinline-sizeがデフォルトで選択されています。
ブレークポイント追加
「ブレークポイント」を追加し、条件（min-width等）と適用CSSスタイルを入力します。プリセットから一括設定も可能です。
プレビュー確認
プレビューエリアのコンテナ幅をドラッグで変更し、コンテナクエリの効果をリアルタイムで確認します。フルスクリーンで広い幅も検証可能。
コードをコピー
「生成コード」セクションから完成したCSSコードを📋ボタンでコピーして使用します。
- container-type
- 要素をクエリコンテナとして定義するプロパティ。inline-sizeで横幅、sizeで両方向がクエリ可能になります。
- container-name
- コンテナに名前を付けるプロパティ。名前付きコンテナを使うと、特定のコンテナに対してのみクエリを適用できます。
- @container
- コンテナクエリを記述するアットルール。コンテナの寸法に基づいて子要素のスタイルを切り替えます。
- container ショートハンド
- container: name / type の形式で container-name と container-type を一括指定できます。
- コンテインメント (Containment)
- 要素の描画やレイアウト計算を隔離するCSS仕様。container-type を設定するとコンテインメントが自動適用されます。
- inline-size
- インライン軸（横方向）のサイズのみをクエリ対象にするcontainer-typeの値。最も一般的に使用されます。
CSSコンテナクエリは、@container ルールと container-type プロパティを組み合わせて実現されます。従来のメディアクエリとは根本的に異なるアプローチです。
メディアクエリとの違い
メディアクエリ(@media)はビューポート全体の寸法に応じてスタイルを変更します。一方、コンテナクエリ(@container)は親コンテナの寸法に応じてスタイルを変更します。同じコンポーネントをサイドバーとメインコンテンツの両方に配置する場合、メディアクエリでは個別対応が必要でしたが、コンテナクエリなら自動的に適切なレイアウトが適用されます。
container-type の値
inline-size は横方向（インライン軸）のみクエリ可能で、最も一般的な選択肢です。size は横・縦の両方向でクエリ可能ですが、高さのコンテインメントが必要になるため注意が必要です。normal はデフォルト値で、コンテナクエリの対象外です。
ブラウザ対応状況
Chrome 105+、Safari 16+、Firefox 110+、Edge 105+で利用可能です。2023年以降、全モダンブラウザに対応済みです。非対応ブラウザでは @container ルールが無視されるため、レイアウトが崩れることはありません（プログレッシブ・エンハンスメント）。
- Q. データはサーバーに送信されますか？
- A. いいえ。すべての処理はお使いのブラウザ内で完結します。生成されたCSSコードを含め、一切のデータがサーバーに送信されることはありません。
- Q. コンテナクエリとメディアクエリの違いは？
- A. メディアクエリはビューポート（画面全体）の幅に反応しますが、コンテナクエリは親要素の幅に反応します。コンポーネント単位のレスポンシブデザインが可能になります。
- Q. すべてのブラウザで使えますか？
- A. Chrome 105+、Safari 16+、Firefox 110+、Edge 105+で対応しています。2023年以降、全モダンブラウザでサポートされています。Internet Explorerは非対応です。
- Q. 既存のメディアクエリをコンテナクエリに変換できますか？
- A. はい。本ツールの「メディアクエリ変換」機能で @media を @container に自動変換できます。
- Q. container-type の inline-size と size の違いは？
- A. inline-size は横方向のみ、size は横・縦の両方向でクエリ可能です。通常は inline-size で十分です。
- Q. スマートフォンでも使えますか？
- A. はい。レスポンシブ対応済みですが、プレビューのリサイズ操作はPC環境が最適です。
- Q. 無料で利用できますか？
- A. はい。完全無料で、利用回数の制限もありません。
コンポーネントUI
同じカードコンポーネントがサイドバーとメインエリアで異なるレイアウトになるレスポンシブ対応に。配置先を問わず適切に表示されます。
デザインシステム
配置場所を問わず適切に表示されるコンテナ対応コンポーネントの設計に。一度定義すればどこでも再利用可能です。
CMSウィジェット
WordPress等のウィジェットエリアの幅に応じて自動調整されるパーツ作成に。サイドバーやフッターに対応します。
ダッシュボード
パネルサイズに応じてグラフや統計表示を最適化するダッシュボードUIに。リサイズ可能なパネルに最適です。
- CSS Flexbox/Grid レイアウトジェネレーター
- CSS box-shadow ジェネレーター｜複数レイヤー・プリセット対応
- CSS clip-path ジェネレーター｜ドラッグ操作＆プリセットで直感的に作成
- CSSスプライトアニメーション ジェネレーター｜steps()コード自動生成
- CSSスクロールアニメーション ジェネレーター｜JS不要でスクロール連動
- CSS Clamp計算ジェネレーター｜レスポンシブなフォントサイズを自動生成
- SVG背景パターンCSSジェネレーター｜Data URI変換＆軽量化
- CSSテキストアニメーションジェネレーター｜Reveal効果をコピペで実装
- モダンUI CSSジェネレーター｜グラスモーフィズム対応
- CSSアニメーションジェネレーター｜@keyframes コード出力
- CSSグラデーション＆背景パターンジェネレーター｜コード出力＆プレビュー