コンテナクエリスニペットジェネレーターとは
コンテナクエリを使用すると、ビューポートではなく親コンテナのサイズに基づいてCSSスタイルを適用できます。これはメディアクエリがブラウザウィンドウに応答するのとは異なります。再利用可能なコンポーネントの場合、コンテナクエリは同じコンポーネントが狭いサイドバーでも広いメインコンテンツエリアでも、スタイルを複製することなく正しくレンダリングできることを意味します。
クイックアンサー
コンテナクエリを使用して、ビューポートではなく親コンテナのサイズに基づいて要素をスタイリングします。これらはメディアクエリのコンポーネントレベルの同等物であり、再利用可能なウィジェットレイアウトに便利です。
Last updated: 2026-05-25
制限事項
- コンテナクエリにはChrome 105以上、Edge 105以上、Firefox 110以上、Safari 16以上が必要です。古いブラウザはこの機能を完全に無視します。
- container-nameプロパティはDOM内のcontainer-type祖先を参照する必要があります。コンテナツリー外の要素はクエリできません。
- コンテナクエリ単位（cqw、cqh、cqi、cqb、cqmin、cqmax）は@containerブロック内でのみ意味を持ち、外部では予期しない値を生成する可能性があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- クエリ基準となる親要素にcontainer-typeとオプションのcontainer-nameを設定します。
- min-width、max-width、またはinline-size範囲などのブレークポイント条件を選択します。
- 条件が満たされたときに適用されるCSSルールを記述します。
- 生成された@containerブロックをコピーし、コンポーネントのスタイルシート内に配置します。
主な用途
- カードコンポーネントがコンテナの縮小に応じて水平から垂直レイアウトに切り替わるようにする。
- 狭いコンテナではフィールドを積み重ね、広いコンテナではインラインに配置するフォーム行を構築する。
- ビューポートとは独立して、コンテナ幅に基づいてフォントとスペーシングをサイズ変更するウィジェットを作成する。