# @container

> コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。

- カテゴリ: レスポンシブ・関数
- URL: https://www.css-dictionary.com/property/container-queries/

## 構文

```css
@container <container-name> (<container-query>) { ... }
```

## Tailwindでは

- バリアント: `@sm: / @md: / @lg:` を先頭に付けて使う
- `@sm:flex-row` → @container (min-width: 24rem) { flex-direction: row }
- 補足: 親に @container を指定した上で使う。ビューポート基準の sm: とは別物。任意幅は @min-[420px]:。

## ブラウザ対応

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

## コード例

### 例1: カードコンテナが400px以上の時にグリッドレイアウトに変更

```css
.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
```

### 例2: 名前付きコンテナで高さに応じてフォントサイズを調整

```css
.sidebar {
  container-type: size;
  container-name: sidebar;
}

@container sidebar (max-height: 300px) {
  .nav-item {
    font-size: 0.8rem;
  }
}
```

## TIPS

メディアクエリよりも柔軟で再利用可能。コンポーネント指向の開発に最適。

## よくある間違い

container-typeの指定を忘れると動作しない。

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

AIはレスポンシブ対応を反射的に@media（画面幅基準）で書きますが、コンポーネント単位なら@container（親要素基準）が正解の場面が増えています。AI生成コードの最頻バグは親へのcontainer-type指定漏れで、これがないと@containerは一切動きません。cqw/cqi等のコンテナクエリ単位もAIの知識が浅い領域です。

## AIへの依頼文例

- このカードコンポーネントを、置かれた場所の幅に応じてレイアウトが変わるように@containerで書き直して。container-typeの指定も忘れずに
- メディアクエリとコンテナクエリの使い分け方針を、このプロジェクトの構成に合わせて提案して

## 関連プロパティ

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