コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。
@container <container-name> (<container-query>) { ... }バリアント @sm: / @md: / @lg: を先頭に付けて使います
| @sm:flex-row | @container (min-width: 24rem) { flex-direction: row } |
親に @container を指定した上で使う。ビューポート基準の sm: とは別物。任意幅は @min-[420px]:。
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-content {
display: grid;
grid-template-columns: 1fr 1fr;
}
}カードコンテナが400px以上の時にグリッドレイアウトに変更
.sidebar {
container-type: size;
container-name: sidebar;
}
@container sidebar (max-height: 300px) {
.nav-item {
font-size: 0.8rem;
}
}名前付きコンテナで高さに応じてフォントサイズを調整
メディアクエリよりも柔軟で再利用可能。コンポーネント指向の開発に最適。
container-typeの指定を忘れると動作しない。
AIはレスポンシブ対応を反射的に@media（画面幅基準）で書きますが、コンポーネント単位なら@container（親要素基準）が正解の場面が増えています。AI生成コードの最頻バグは親へのcontainer-type指定漏れで、これがないと@containerは一切動きません。cqw/cqi等のコンテナクエリ単位もAIの知識が浅い領域です。
このカードコンポーネントを、置かれた場所の幅に応じてレイアウトが変わるように@containerで書き直して。container-typeの指定も忘れずに
メディアクエリとコンテナクエリの使い分け方針を、このプロジェクトの構成に合わせて提案して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。