CSS Container Query Builder

CSS Container Query Builderは、container-type、container-name、 @containerルールの構文を記憶することなくCSSコンテナ クエリを構築できる無料のブラウザベースツールです。 仕様を参照する代わりに、ドロップダウンからオプションを 選択し値を入力するだけで、すぐに使えるCSSが即座に生成 されます。

コンテナクエリを使うと、コンポーネントはビューポートではなく 最も近い包含コンテキストのサイズに応じて反応できます。 これによりコンポーネントが真に再利用可能になります。 カードコンポーネントは、画面幅に関係なく、親要素が 提供するスペースに応じてスタックレイアウトから横並び レイアウトに切り替えることができます。

ビルダーは3つのコンテナタイプをサポートします：inline-size （幅のみ追跡、最も一般的）、size（幅と高さの両方を追跡）、 normal（包含なし、オプトアウト用）。コンテナに名前を付けて 特定の祖先をターゲットし、複数のサイズ条件（min-width、 max-width、min-height、max-height、orientationなど）を andで組み合わせたり、orで個別の@containerルールに 分けたりできます。

すべての処理はブラウザ内で完全に実行されます。データは サーバーに一切送信されず、アカウントも不要です。

このツールは、従来のビューポートベースのレスポンシブデザインのための CSS @media Query Builder、 グリッドやフレックスボックスレイアウトを構築するための CSS Layout Generator、 Tailwind CSS v3.2+でコンテナクエリブレークポイントを設定するための Tailwind Config Builderと 組み合わせて使えます。

1. ドロップダウンからContainer Typeを選択します：inline-size（幅のみ）、size（幅+高さ）、normal（包含なし）。
2. Container Nameを入力します（例：card、sidebar）。空のままにすると名前なしのコンテナクエリになります。
3. Add Conditionをクリックして、min-width: 400pxやmax-width: 800pxなどのサイズ条件を追加します。
4. 必要に応じて条件を追加します。各条件の横のチェックボックスで有効/無効を切り替えられます。
5. 条件をand（すべて一致）またはor（個別の@containerルール）で組み合わせるかを選択します。
6. 右側（モバイルでは下部）の出力パネルで生成されたCSSを確認します。
7. CopyをクリックまたはCtrl+Shift+Cを押してクリップボードにコピーします。またはCommon Presetをクリックして人気のパターンを即座に読み込みます。