比較記事一覧に戻る
@media と @container の違い
TL;DR — ひとことで言うと
ページ全体のレイアウト分岐は@media、置かれた場所の幅で変わるべき「部品」は@container。コンポーネント指向の開発では@containerが主役になりつつあります。
比較表
| 観点 | @media | @container |
|---|---|---|
| 判定の基準 | ビューポート（画面）のサイズや特性 | 指定した祖先コンテナのサイズ |
| 事前準備 | 不要 | 親にcontainer-typeの指定が必須 |
| 得意分野 | ページの骨格、グローバルな出し分け | カード等の再利用部品、配置場所依存のUI |
| 専用単位 | vw / vh など | cqw / cqi など |
| 画面幅以外の判定 | hover可否、prefers-*（ダークモード等）も判定可能 | サイズとスタイル（style()） |
使い分けの指針
「このカードはサイドバーに置いても本文に置いても正しく振る舞ってほしい」なら@containerです。逆にダークモード検知やhover可否の判定は@mediaにしかできません。両者は競合ではなく階層の違い——ページは@media、部品は@containerと覚えるのが実用的です。
🤖 AIがよくやる取り違え
AIはコンポーネント単位の分岐まで@mediaで書きがちで、コンテナクエリの提案は明示しないと出にくいです。またcontainer-typeの指定漏れはAI生成コードの定番バグです。