CSSの未来：Container QueriesとCSS Nestingが実現するモダンなレイアウト設計

Container Queriesとは何か？

Container Queriesは、親要素（コンテナ）のサイズに応じてスタイルを変更できるCSS機能です。従来の@mediaクエリではビューポートのサイズに依存していたため、コンポーネント単位の柔軟なレスポンシブ設計が困難でした。

この仕様はCSS Container Queries Module Level 1として策定されており、2022年6月に初期サポートがChrome 105で登場し、以降、主要ブラウザへの対応が進んでいます。

• 仕様書：https://drafts.csswg.org/css-contain-3/#container-queries
• Can I use：https://caniuse.com/css-container-queries

Polyfill情報

Container Queriesに関しては、cqfillというPolyfillライブラリが提供されていますが、あくまで開発中であり、完全な代替ではありません。本番運用ではブラウザ対応状況を確認した上での使用が推奨されます。

基本構文

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

@container card (min-width: 500px) {
    .card-content {
        flex-direction: row;
    }
}

サンプル：カードコンポーネントのレイアウト切り替え

<div class="card">
    <div class="card-content">
        <img src="..." alt="">
        <p>テキスト</p>
    </div>
</div>

.card {
    container-type: inline-size;
    container-name: card;
    padding: 1rem;
    border: 1px solid #ccc;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@container card (min-width: 600px) {
    .card-content {
        flex-direction: row;
    }
}

このように、ビューポートではなく「そのカード要素の幅」に応じてレイアウトが変化します。

CSS Nestingとは何か？

CSS Nestingは、セレクタのネスト（入れ子）記法をCSS標準でサポートする仕様です。Sassなどのプリプロセッサを使わずに、構造を明確に保ちつつCSSを記述できます。

この仕様はCSS Nesting Module Level 1として策定され、2023年初頭にChrome 112およびSafari 16.5でサポートが始まりました。現在は最新のChrome、Edge、Safari、Firefoxでも対応が進んでいます。

• 仕様書：https://drafts.csswg.org/css-nesting-1/
• Can I use：https://caniuse.com/css-nesting

Polyfill情報

CSS Nestingについては、ネイティブ対応が進んでいるため特別なPolyfillは不要になりつつありますが、古いブラウザのサポートが必要な場合はPostCSSのpostcss-nestingプラグインが有効です。

基本構文

.card {
    padding: 1rem;

    .card-title {
        font-size: 1.5rem;
        color: navy;
    }

    &:hover {
        background-color: #f5f5f5;
    }
}

これはSassと似ていますが、CSSとしてそのまま使えるのが大きな利点です。

注意点

• 現状、一部の古いブラウザでは未対応の可能性があります。
• @nestを使用してネストのスコープを明確にすることも可能です：

.card {
    color: black;

    @nest .card-title {
        font-weight: bold;
    }
}

Container QueriesとNestingの組み合わせ活用

両者を組み合わせることで、コンポーネント単位の再利用性と保守性が高いレイアウト設計が可能になります。

実践例：レスポンシブな記事カード

<article class="post-card">
    <h2 class="post-title">タイトル</h2>
    <p class="post-excerpt">概要テキスト...</p>
</article>

.post-card {
    container-type: inline-size;

    padding: 1rem;
    border: 1px solid #ccc;

    .post-title {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .post-excerpt {
        font-size: 1rem;
        color: #666;
    }

    @container (min-width: 600px) {
        .post-title {
            font-size: 1.5rem;
        }

        .post-excerpt {
            font-size: 1.1rem;
        }
    }
}

ネストとコンテナクエリの併用により、構造と条件が同じセクションにまとまり、コードの可読性が飛躍的に向上します。

まとめ：CSSの未来を体感しよう

Container QueriesとCSS Nestingは、「親のサイズ」や「コンポーネント単位の構造」に基づく設計を可能にし、これまでの「全体に対する調整」から「局所的な最適化」へとCSSのパラダイムを変えつつあります。
これらを活用することで、再利用しやすく、スケーラブルなレイアウト設計が実現できます。新しいプロジェクトでは積極的に取り入れてみてはいかがでしょうか？