# container-type

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

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/container-type/

## 構文

```css
container-type: normal | size | inline-size
```

## Tailwindでは

- `@container` → container-type: inline-size
- 補足: 名前付きコンテナは @container/{name}。問い合わせる子側は @sm: / @md: などのコンテナバリアントを使う（container-queriesの項を参照）。

## ブラウザ対応

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

## コード例

### 例1: インライン方向のサイズ（幅）を監視

```css
container-type: inline-size;
```

### 例2: 両方向のサイズ（幅と高さ）を監視

```css
container-type: size;
```

## TIPS

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

## よくある間違い

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

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

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

## AIへの依頼文例

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

## 関連プロパティ

- [container-queries](https://www.css-dictionary.com/property/container-queries.md)