2025/11/02

CSSの常識が変わる！コンテナクエリ入門 – 初心者でもわかる次世代レスポンシブデザイン

これまでWebサイトのレスポンシブ対応といえば、画面全体の幅を基準にする「メディアクエリ」が当たり前でした。しかし、近年登場した「コンテナクエリ」によって、その常識が大きく変わろうとしています。

この記事では、CSSの新しい機能であるコンテナクエリについて、「何ができるようになったのか」「どう便利なのか」を中心に、初心者の方にも分かりやすく解説します。具体的なコード例も交えながら、次世代のレスポンシブデザインをマスターしましょう！

コンテナクエリとは？メディアクエリとの決定的な違い

コンテナクエリとは、親要素（コンテナ）のサイズに応じて、子要素のスタイルを変更できるCSSの機能です。

従来のメディアクエリとの一番の違いは、「何を基準にスタイルを変えるか」という点にあります。

メディアクエリ (@media): 画面全体（ビューポート）の幅や高さを基準にスタイルを変更します。「画面幅が768px以下になったらサイドバーを非表示にする」といったページ全体のレイアウト調整に適しています。
コンテナクエリ (@container): 特定の親要素（コンテナ）の幅や高さを基準にスタイルを変更します。これにより、コンポーネント単位での柔軟なレスポンシブデザインが可能になります。

一言でいうと…
メディアクエリは「ページ全体を見て調整する」、コンテナクエリは「パーツ（部品）を見て調整する」ための機能です。

なぜコンテナクエリが必要なの？できるようになったこと

コンポーネントベース（再利用可能な部品を組み合わせてWebページを作る手法）の開発が主流になる中で、メディアクエリだけでは限界がありました。例えば、同じ「商品カード」コンポーネントを、幅の広いメインエリアと幅の狭いサイドバーの両方に配置したいケースを考えてみましょう。

メディアクエリでは画面幅でしか判断できないため、どちらの場所でも同じスタイルが適用されてしまい、サイドバーではレイアウトが崩れてしまうことがありました。

コンテナクエリを使えば、この問題をエレガントに解決できます。コンポーネントが置かれた場所（親要素）の幅に応じて、最適なスタイルを自動で適用できるのです。これにより、以下のようなメリットが生まれます。

再利用性の向上: どんなレイアウトの場所にも配置できる、自己完結したコンポーネントを作成できます。
メンテナンス性の向上: コンポーネントのスタイルがその部品内に閉じるため、CSSの見通しが良くなり、修正も容易になります。
より柔軟なレイアウト設計: 画面幅に縛られず、コンポーネントが置かれる文脈に応じた最適なデザインを実現できます。

コンテナクエリの基本的な使い方

コンテナクエリの使い方はとてもシンプルで、2つのステップで実装できます。

ステップ1: 親要素を「コンテナ」として定義する

まず、基準としたい親要素に container-type プロパティを指定します。これにより、ブラウザはその要素を「コンテナ」として認識するようになります。

CSS
.card-container {
    container-type: inline-size; /* 横幅を基準にするコンテナとして定義 */
}

container-type には主に以下の値を指定します。

inline-size: コンテナのインライン方向（通常は横幅）のサイズに応じてスタイルを適用します。最もよく使われる値です。
size: コンテナのインライン方向（横幅）とブロック方向（高さ）の両方のサイズに応じてスタイルを適用します。

また、container-name を使ってコンテナに固有の名前をつけることもでき、特定のコンテナだけを対象にスタイルを指定する際に便利です。

CSS
.card-container {
    container-type: inline-size;
    container-name: card-host; /* コンテナに名前を付ける */
}

ステップ2: `@container` でスタイルを記述する

次に、メディアクエリの @media と同じように、@container を使って条件とスタイルを記述します。

CSS
/* card-hostという名前のコンテナの幅が400px以上の場合に適用 */
@container card-host (min-width: 400px) {
    .card {
        display: flex;
    }
}

これで、.card-container の幅が400pxを超えた時だけ、その中の .card に display: flex; が適用されるようになります。

【実例】カード型コンポーネントを作ってみよう

言葉だけでは分かりにくいので、具体的な実例を見ていきましょう。ここでは、メインコンテンツとサイドバーに同じカードコンポーネントを配置するデモを作成します。

メインコンテンツ（広い領域）ではカードが横並びレイアウトに、サイドバー（狭い領域）では縦積みレイアウトに自動で切り替わります。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

HTML構造

HTML
<div class="demo-container">
    <div class="main-content card-container">
        <strong>メインコンテンツ (広いコンテナ)</strong>
        <div class="card">
            <div class="card-content">
                <div class="card-image">Image</div>
                <div class="card-body">
                    <h3 class="card-title">カードタイトル</h3>
                    <p class="card-text">コンテナが広いので、画像とテキストが横並びになります。</p>
                </div>
            </div>
        </div>
    </div>
    <div class="sidebar card-container">
        <strong>サイドバー (狭いコンテナ)</strong>
        <div class="card">
            <div class="card-content">
                <div class="card-image">Image</div>
                <div class="card-body">
                    <h3 class="card-title">カードタイトル</h3>
                    <p class="card-text">コンテナが狭いので、縦積みレイアウトになります。</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSSコード

CSS
.demo-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 20px;
        }
        .main-content, .sidebar {
            border: 2px dashed #bdc3c7;
            padding: 20px;
            border-radius: 5px;
        }

        /* --- コンテナクエリ デモ --- */
        .card-container {
            container-type: inline-size;
            container-name: card-host; /* コンテナに名前を付ける */
        }
        .card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .card-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .card-image {
            width: 100%;
            height: 150px;
            background-color: #ecf0f1;
            border-radius: 4px;
            display: grid;
            place-items: center;
            color: #95a5a6;
        }
        .card-title {
            margin: 0;
            font-size: 1.2em;
        }
        .card-text {
            margin: 0;
        }
        /* コンテナの幅が300px以上になったらスタイルを変更 */
        @container card-host (min-width: 300px) {
            .card-content {
                flex-direction: row;
                align-items: center;
            }
            .card-image {
                width: 150px;
                height: 100px;
                flex-shrink: 0;
            }
        }

このコードのポイントは、画面幅(メディアクエリ)を一切使っていないことです。.card-container という親要素の幅だけを見て、カード自身のレイアウトを決定しています。これにより、このカードコンポーネントはどこに置いても最適な見た目を保つことができます。