# @media と @container の違い

> ページ全体のレイアウト分岐は@media、置かれた場所の幅で変わるべき「部品」は@container。コンポーネント指向の開発では@containerが主役になりつつあります。

- URL: https://www.css-dictionary.com/compare/media-vs-container/

## 比較表

| 観点 | @media | @container |
| --- | --- | --- |
| 判定の基準 | ビューポート（画面）のサイズや特性 | 指定した祖先コンテナのサイズ |
| 事前準備 | 不要 | 親にcontainer-typeの指定が必須 |
| 得意分野 | ページの骨格、グローバルな出し分け | カード等の再利用部品、配置場所依存のUI |
| 専用単位 | vw / vh など | cqw / cqi など |
| 画面幅以外の判定 | hover可否、prefers-*（ダークモード等）も判定可能 | サイズとスタイル（style()） |

## 使い分けの指針

「このカードはサイドバーに置いても本文に置いても正しく振る舞ってほしい」なら@containerです。逆にダークモード検知やhover可否の判定は@mediaにしかできません。両者は競合ではなく階層の違い——ページは@media、部品は@containerと覚えるのが実用的です。

## AIがよくやる取り違え

AIはコンポーネント単位の分岐まで@mediaで書きがちで、コンテナクエリの提案は明示しないと出にくいです。またcontainer-typeの指定漏れはAI生成コードの定番バグです。

## それぞれの詳しい解説

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