メディアクエリはもう古い？
CSSコンテナクエリの使い方と実例

メディアクエリは「画面全体の幅」に応じてスタイルを切り替えます。しかし、同じコンポーネントがサイドバーにもメインエリアにも配置される場合、画面幅だけでは最適なレイアウトを判断できません。
そこで登場したのが CSSコンテナクエリ（@container）。親要素のサイズに応じてレイアウトを切り替える、次世代のレスポンシブデザイン手法です。

メディアクエリ vs コンテナクエリ

基本の使い方

ステップは2つだけ。①親要素に container-type を指定、②子要素のスタイルを @container で切り替えます。

/* ステップ1：親要素をコンテナとして宣言 */
.card-wrapper {
    container-type: inline-size;
}

/* ステップ2：コンテナの幅に応じてスタイルを変更 */
.card {
    display: flex;
    gap: 12px;
    align-items: center;
}

@container (min-width: 300px) {
    .card {
        flex-direction: column;
        text-align: center;
    }
}

実践デモ：同じカードを異なる幅で配置

同じカードコンポーネントを、狭い列と広い列の両方に配置しました。コンテナクエリにより、親の幅に応じて自動的にレイアウトが切り替わります。

名前付きコンテナ

ネストされたコンテナがある場合、container-name で名前をつけて区別できます。

.sidebar {
    container-type: inline-size;
    container-name: sidebar;
}

.main-content {
    container-type: inline-size;
    container-name: main;
}

@container sidebar (max-width: 250px) {
    .widget { font-size: 0.8rem; }
}

@container main (min-width: 600px) {
    .article-card { display: grid; grid-template-columns: 1fr 2fr; }
}

まとめ

• コンテナクエリ → 親要素の幅でレイアウトを切り替え
• container-type: inline-size → コンテナとして宣言
• @container → メディアクエリと同じ記法で条件指定
• container-name → ネスト時の区別

コンテナクエリは「コンポーネント駆動のレスポンシブデザイン」を可能にします。同じコンポーネントを画面のどこに配置しても、最適なレイアウトで表示される——それが次世代のCSSです。