container-type

レイアウト・配置

要素をコンテナクエリのコンテナとして定義し、どの軸のサイズ変化を監視するかを指定するプロパティです。子要素がコンテナのサイズに応じてスタイルを変更できるようになります。

構文

Syntax
container-type: normal | size | inline-size

コード例

1

container-type: inline-size;
実行結果
inline-size監視
幅の変化を監視

インライン方向のサイズ(幅)を監視

2

container-type: size;
実行結果
size監視
幅と高さを監視

両方向のサイズ(幅と高さ)を監視

💡 TIPS

inline-sizeは横幅のみ監視(最も一般的)。sizeは幅と高さ両方を監視するが、無限ループの可能性があるため慎重に使用。container-nameと組み合わせて複数コンテナを管理できる。

⚠️ よくある間違い

container-typeを指定しないとコンテナクエリが動作しない。sizeを使う際は高さの循環参照に注意。

関連プロパティ

ブラウザサポート

Chrome 105+, Firefox 110+, Safari 16+