要素をコンテナクエリのコンテナとして定義し、どの軸のサイズ変化を監視するかを指定するプロパティです。子要素がコンテナのサイズに応じてスタイルを変更できるようになります。
container-type: normal | size | inline-size.card {
container-type: inline-size;
}
@container (min-width: 300px) {
.card-title {
font-size: 1.5rem;
}
}カードの幅に応じてタイトルのフォントサイズを変更
.widget {
container-type: size;
}
@container (min-height: 200px) and (min-width: 400px) {
.widget-content {
display: grid;
grid-template-columns: 1fr 1fr;
}
}ウィジェットの幅と高さ両方を監視してレイアウトを変更
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (max-width: 250px) {
.nav-item {
font-size: 0.8rem;
padding: 0.25rem;
}
}サイドバーが狭い時にナビゲーションアイテムをコンパクトに
inline-sizeは横幅のみ監視（最も一般的）。sizeは幅と高さ両方を監視するが、無限ループの可能性があるため慎重に使用。container-nameと組み合わせて複数コンテナを管理できる。
container-typeを指定しないとコンテナクエリが動作しない。sizeを使う際は高さの循環参照に注意。
Chrome 105+, Firefox 110+, Safari 16+