CSS Container Query
ジェネレーター
CSSの@containerクエリをGUIで視覚的に構築。container-type/name設定、ブレークポイント定義、6種のプリセット、リアルタイムプレビュー付き。メディアクエリからの変換機能も搭載。ブラウザ完結・登録不要。
コンテナ設定
プリセット
ブレークポイント
リアルタイムプレビュー
生成コード
🔄 メディアクエリ → コンテナクエリ変換
CSS Container Query ジェネレーターの概要
CSS Container Query ジェネレーターは、レスポンシブデザインの新たな標準である「@container」クエリを、GUIベースで視覚的に構築できる開発者向けツールです。メディアクエリが画面幅（ビューポート）に依存するのに対し、コンテナクエリは親要素の幅に依存するため、コンポーネント単位での柔軟なレイアウト切り替えが可能となります。
本ツールはcontainer-typeやcontainer-nameの設定から、各種ブレークポイントの追加、リアルタイムプレビューまでをシームレスに行えます。また、既存のメディアクエリをコンテナクエリに一括変換する機能も備えており、最新仕様への移行をスムーズに支援します。すべての処理はブラウザ内で完結するため、安全に利用できます。
ツールの使い方
コンテナの設定とブレークポイント追加
まずはコンテナのセレクタやcontainer-type（通常はinline-size）を設定します。次に「ブレークポイントを追加」し、コンテナ幅が一定サイズに達したときに適用したいCSSスタイルを入力します。プリセットを選択して開始することも可能です。
リアルタイムプレビューで動作確認
プレビュー領域の右端をドラッグしてコンテナの幅を変更し、設定したブレークポイントでのスタイル切り替えが正しく動作するか確認します。カスタムHTMLを入力して、自身のプロジェクトのマークアップでテストすることもできます。
コードの出力と既存コードの変換
設定が完了したら、生成されたCSSコードをコピーしてプロジェクトに貼り付けます。また、「メディアクエリ変換」機能を使えば、既存の@media記述を簡単に@containerへと置換でき、移行作業の手間を省けます。
コンテナクエリ用語集
- コンテナクエリ (@container)
- ビューポート（画面サイズ）ではなく、特定の親要素（コンテナ）のサイズに基づいてスタイリングを変更するためのCSS機能です。
- container-type
- 要素をクエリコンテナとして定義するプロパティです。inline-sizeはインライン軸（横幅）のみを基準にし、sizeはインライン・ブロック両方の軸を基準にします。
- container-name
- 複数のコンテナがネストしている場合などに、特定のコンテナを明示的に指定するための名前を定義するプロパティです。
- コンテインメント (Containment)
- コンテナクエリを有効にするために必要な概念で、要素のレイアウトやスタイルの計算を他のDOMから切り離す機能です。
- インライン軸 (Inline-axis)
- テキストが流れる方向の軸を指します。横書きの場合は左右の幅（width）に相当し、コンテナクエリで最も頻繁に使用されます。
- メディアクエリ (@media)
- 画面全体のサイズやデバイスの特性に応じてスタイルを適用する従来のCSS機能。ページ全体のレイアウトに向いています。
- cqw / cqh / cqi / cqb
- コンテナクエリ専用の相対単位。コンテナの幅（cqw）やインラインサイズ（cqi）の1%を表し、vwやvhのコンテナ版として機能します。
よくある質問
- Q.入力したコードやデータはサーバーに送信されますか？
- いいえ。本ツールは完全にクライアントサイド（ブラウザ内）で動作します。入力したHTML/CSSや生成されたコードが外部サーバーへ送信されることは一切ありません。
- Q.メディアクエリとコンテナクエリはどちらを使うべきですか？
- ページ全体のレイアウト（ヘッダー、メインコンテンツ、サイドバーの配置など）にはメディアクエリを、カードやボタンなど配置場所に依存せず自身でレイアウトを最適化すべきUIコンポーネントにはコンテナクエリを使用するのがベストプラクティスです。
- Q.ブラウザの対応状況はどうなっていますか？
- Chrome 105、Safari 16、Firefox 110以降など、2023年以降の主要なモダンブラウザすべてでサポートされています。IEなどのレガシーブラウザには対応していませんが、フォールバック（段階的拡張）を記述することで安全に導入可能です。
- Q.container-type に size を指定する場合の注意点は？
- sizeを指定すると高さ方向（ブロック軸）のコンテインメントも有効になるため、要素の高さを明示的に指定しないと高さがゼロに潰れてしまう場合があります。通常はinline-sizeの使用を推奨します。
- Q.カスタムHTMLプレビューはどのように隔離されていますか？
- 最新の実装ではShadow DOMを用いてプレビュー領域を隔離しており、ジェネレーター本体のCSSがプレビュー内のマークアップに影響を与えない設計になっています。
活用シーン
再利用可能なカードコンポーネント
メインエリアでは3カラム、サイドバーに配置した時は1カラムになるような、自己完結型のカードUIを設計する際に最適です。
CMSやウィジェットの組み込み
WordPressなどのCMSで、ユーザーがどの幅のウィジェットエリアにパーツを配置しても、自動で最適なレイアウトに変化するブロックを作成できます。
複雑なダッシュボードUI
パネルごとにサイズが可変するダッシュボード画面で、パネル内のグラフや統計データの配置を動的に最適化するシーンに役立ちます。
レガシーコードのモダン化
既存プロジェクトの膨大なメディアクエリを、保守性の高いコンポーネントベースのコンテナクエリへと移行・リファクタリングする際に変換機能が活躍します。
CSSコンテナクエリ技術解説
CSSコンテナクエリは、@container ルールと container-type プロパティを組み合わせて実現されます。従来のメディアクエリとは根本的に異なるアプローチです。
メディアクエリとの違い
メディアクエリ(@media)はビューポート全体の寸法に応じてスタイルを変更します。一方、コンテナクエリ(@container)は親コンテナの寸法に応じてスタイルを変更します。同じコンポーネントをサイドバーとメインコンテンツの両方に配置する場合、メディアクエリでは個別対応が必要でしたが、コンテナクエリなら自動的に適切なレイアウトが適用されます。
container-type の値
inline-size は横方向（インライン軸）のみクエリ可能で、最も一般的な選択肢です。size は横・縦の両方向でクエリ可能ですが、高さのコンテインメントが必要になるため注意が必要です。normal はデフォルト値で、コンテナクエリの対象外です。
ブラウザ対応状況
Chrome 105+、Safari 16+、Firefox 110+、Edge 105+で利用可能です。2023年以降、全モダンブラウザに対応済みです。非対応ブラウザでは @container ルールが無視されるため、レイアウトが崩れることはありません（プログレッシブ・エンハンスメント）。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。