CSS辞書

container-type

レイアウト・配置

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

構文

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

Tailwindでは

@containercontainer-type: inline-size

名前付きコンテナは @container/{name}。問い合わせる子側は @sm: / @md: などのコンテナバリアントを使う(container-queriesの項を参照)。

コード例

1

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

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

2

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

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

💡 TIPS

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

⚠️ よくある間違い

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

🤖 AIがよく間違えるポイント

AIはinline-sizeとsizeの違いを曖昧に説明しがちです。通常はinline-size(幅のみ監視)が正解で、size(高さも監視)は要素自身に明示的な高さが必要になるため、安易に使うと子のコンテンツで高さが決まるレイアウトが壊れます。またcontainer-typeを指定した要素自身のサイズはコンテナクエリで参照できません(参照できるのは子孫から)。

💬 AIへの頼み方

このサイドバーをコンテナ化したい。inline-sizeとsizeのどちらを使うべきか理由付きで実装して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
105+
Firefox
110+
Safari
16+
Edge
105+