Container Query Builder

使い方

1. コンテナ名を入力します。空にすると匿名のクエリになります。
2. container-type を選びます。inline-size は幅で判定でき、size は高さも扱えますが確定した高さが必要です。
3. 1 つ目の条件（例：min-width 400px）を設定し、必要なら 2 つ目も有効にします。
4. 関係を選びます。and は両方、or はどちらか、not は 1 つ目の条件のみを反転します。
5. CSS をコピーします。1 つ目のブロックがラッパーの宣言、2 つ目がコンポーネントのルールです。

よくある用途

• コンポーネント単位のレイアウト — カードをスロットの幅に応じて縦積みと横並びで切り替えます。
• 再利用ウィジェット — ビューポートではなく与えられた幅でスタイルを決めます。
• サイドバーを意識した表示 — 配置された列が狭くなったときに一覧の並びを変えます。
• コンテナ構文の学習 — 宣言とクエリの対応関係を確認してから手書きできます。

よくある質問

Q: container-type を設定しても変化しないのはなぜですか？ A: コンテナクエリは宣言したコンテナの子孫にしか適用されません。スタイルを当てたい要素が container-type を持つラッパーの内側にあるか、別の枝にないかを確認してください。

Q: inline-size ではなく size を使うべき場面は？ A: 幅で判定するなら inline-size で十分です。size はコンテナの高さが内容に依存しない場合にのみ使ってください。そうでないと高さの判定が自動高さに対して行われ、期待どおりに動きません。

Q: コンテナクエリでビューポートを見られますか？ A: できません。コンテナクエリが測るのは、一致する container-type を持つ直近の祖先コンテナです。ビューポートに反応させたい場合はメディアクエリを使ってください。