CSSのレスポンシブ新常識！メディアクエリとコンテナクエリの違いを徹底解説

コンテナクエリ（@container）との違いと使い分け

先生と生徒の会話形式で理解しよう

生徒

「画面の大きさに合わせてデザインを変えるのは『メディアクエリ』ですよね？最近『コンテナクエリ』というのも聞いたのですが、何が違うんですか？」

先生

「メディアクエリは『画面全体の幅』を見ますが、コンテナクエリは『親要素の幅』を見てデザインを変えられる技術ですよ。」

生徒

「親要素の幅？画面全体じゃなくて、特定の箱のサイズで見た目が変わるってことですか？」

先生

「その通りです！これを使えば、同じ部品でも置く場所によって見た目を自動調整できるんです。詳しく解説しますね！」

1. メディアクエリとコンテナクエリの根本的な違いとは？

ウェブサイトを制作する際、スマートフォンやパソコンなど、デバイスの種類に合わせて見た目を整えることを「レスポンシブデザイン」と呼びます。これまで、その主役は「メディアクエリ（@media）」でした。メディアクエリは、ブラウザの画面全体の幅（ウィンドウの端から端まで）を基準にして、スタイルを切り替えます。例えば「画面の幅が６００ピクセル以下なら、文字を小さくする」といった具合です。

一方で、新しく登場した「コンテナクエリ（@container）」は、画面全体の幅ではなく、その要素が入っている「親の箱（コンテナ）」の幅を基準にします。パソコンを触ったことがない方でも、部屋全体（画面）の大きさを気にするのがメディアクエリ、机の上（特定の箱）の広さを気にするのがコンテナクエリだと考えるとイメージしやすいでしょう。これにより、パーツ単位での自由度が劇的に向上しました。

2. メディアクエリの限界とコンテナクエリが必要な理由

なぜメディアクエリだけでは不十分なのでしょうか。例えば、ニュース記事のリストを表示する部品（パーツ）を作ったとします。このパーツを「画面の端から端まで使う広いエリア」に置いたときと、「画面の端っこにある狭いサイドバー」の中に置いたときを想像してみてください。画面全体がパソコン用の大きなサイズであっても、サイドバーの中はとても狭いですよね。

メディアクエリを使っていると、「画面がパソコンサイズだから、横に広く表示しよう」という命令が出てしまい、狭いサイドバーの中でデザインが崩れてしまいます。コンテナクエリを使えば、「もし自分が入れられている箱が狭いなら、縦並びになろう」という賢い判断がパーツ自身でできるようになります。これが、現代のプログラミングにおける大きな進化なのです。


<style>
/* 従来のメディアクエリの書き方 */
.media-box {
    background-color: #e3f2fd;
    padding: 15px;
    border: 2px solid #2196f3;
}

/* 画面全体の幅が600px以下のときに変化 */
@media (max-width: 600px) {
    .media-box {
        background-color: #fff9c4;
        border-color: #fbc02d;
    }
}
</style>

<div class="media-box">
    <i class="bi bi-display"></i> 私は「画面全体の幅」に反応します。
</div>
<p>ブラウザ自体の横幅を変えると色が変わります。</p>

ブラウザ表示

3. コンテナクエリを使うための準備と設定方法

コンテナクエリを使い始めるには、まず「基準となる親の箱」を指定する必要があります。これをプログラミング用語で「コンテナを定義する」と言います。ＣＳＳの中に「コンテナ・タイプ（container-type）」という命令を書き込み、その箱がサイズの基準であることをブラウザに教えます。

基本的には「ｃｏｎｔａｉｎｅｒ－ｔｙｐｅ：ｉｎｌｉｎｅ－ｓｉｚｅ」という設定をよく使います。これは「横幅の変化をチェックしてね」という意味です。この設定を親要素にしておくことで、その中に守られている子要素たちは、親の背中（幅）を見て自分の見た目を決めることができるようになります。初心者の方は、まずこの「親への設定」が必須であることを覚えておきましょう。


<style>
/* 1. 親の箱を「基準」として設定する */
.parent-container {
    container-type: inline-size;
    width: 100%;
    border: 3px dashed #ccc;
    padding: 10px;
}

/* 2. 中にある部品のデザイン */
.child-card {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
}

/* 3. 親の幅が400px以下になったら見た目を変える */
@container (max-width: 400px) {
    .child-card {
        background-color: #ffc107;
        font-size: 14px;
    }
}
</style>

<div class="parent-container">
    <div class="child-card">
        <i class="bi bi-box-seam"></i> 私は「親の箱の幅」に反応します。
    </div>
</div>

ブラウザ表示

4. コンテナクエリが役立つ具体的な利用シーン

最も役立つのは、カード型のデザインをサイトのあちこちで使い回すときです。ブログのトップページでは三列並びで小さく表示し、特集記事ページでは一列で大きく表示したい、ということがよくあります。メディアクエリではそれぞれのページごとに特別な設定を書く必要がありましたが、コンテナクエリならパーツ側の設定一つで済みます。

また、サイドバーやメインコンテンツなど、配置場所によって勝手に「縦並び」と「横並び」を切り替えてくれる自律的なパーツを作ることができます。これは「コンポーネント指向」と呼ばれる、最新のプログラミングの考え方に非常に合致しています。一度作ればどこに置いても美しく見える、魔法のような部品が作れるようになるのです。

5. コンテナ単位の単位であるcqwとcqhの活用

コンテナクエリを使うようになると、新しい「単位」も使えるようになります。例えば「ｃｑｗ」という単位です。これは「コンテナ・クエリ・幅（Width）」の略で、親の箱の幅を１００としたときの大きさを表します。画面全体の幅を基準にする「ｖｗ」という単位に似ていますが、より狭い範囲での指定が可能です。

これを使うと、「親の箱の幅に対して１０パーセントの文字サイズにする」といった、非常に緻密な調整が可能になります。画面全体の大きさに関係なく、箱の大きさにぴったりフィットする文字や余白を設定できるため、デザインの完成度が一段と高まります。パソコン初心者のうちは難しいかもしれませんが、こうした便利な定規があることを頭の片隅に置いておいてください。


<style>
.flexible-parent {
    container-type: inline-size;
    resize: horizontal; /* ブラウザ上で幅を変えられるように設定 */
    overflow: auto;
    width: 80%;
    margin: 20px auto;
    background: #eee;
}

.flexible-text {
    /* 親の幅の5%を文字サイズにする */
    font-size: 5cqw;
    padding: 2cqw;
    color: #d63384;
}
</style>

<div class="flexible-parent">
    <div class="flexible-text">
        <i class="bi bi-arrows-angle-expand"></i> 親の幅に合わせて文字も伸縮します
    </div>
</div>

ブラウザ表示

6. メディアクエリとコンテナクエリを併用する設計術

「コンテナクエリがあるならメディアクエリは不要なの？」と思うかもしれませんが、そうではありません。これらは役割分担が重要です。メディアクエリは「サイト全体のレイアウト（例えば二段組みにするか一段にするか）」を決めるために使い、コンテナクエリはその中にある「個々のパーツの詳細な見た目」を決めるために使います。

この二つを組み合わせることで、最強のレスポンシブサイトが完成します。全体の大枠をメディアクエリで整え、中身の具材をコンテナクエリで最適化する。この使い分けができるようになれば、あなたはもう初心者卒業です。プログラミングのコードもすっきりと整理され、後から修正するのも格段に楽になるはずです。

7. ブラウザの対応状況と注意点を知っておこう

コンテナクエリは比較的新しい技術であるため、非常に古いブラウザを使っているユーザーには正しく表示されないことがあります。しかし、現在主流となっているグーグルクローム、サファリ、エッジといった最新のブラウザであれば、ほぼ全ての機能が問題なく動作します。

もし古いスマートフォンを使っているユーザーも大切にしたい場合は、コンテナクエリが効かなくても最低限の情報が読めるようにしておく「フォールバック」という考え方が必要になります。最初は完璧を目指さず、まずは最新のブラウザで意図した通りに動くことを目標に練習してみましょう。新しい技術を積極的に取り入れる姿勢が、上達への一番の近道です。

8. 実際に手を動かして違いを体感してみよう

理屈を理解したら、最後は実際にコードを書いて試してみるのが一番です。自分で親の箱を作り、その幅をマウスで動かしてみて、中の色がパッと変わる瞬間を確認してください。自分の書いた命令をブラウザが忠実に守って動く様子は、プログラミングの醍醐味です。

コンテナクエリをマスターすれば、より柔軟で、どんな場所でも美しく見えるプロ級のホームページを作ることができるようになります。まずは簡単なカード型のデザインから挑戦して、徐々に複雑なレイアウトにステップアップしていきましょう。あなたの創造力を形にするための強力な武器として、この新しいＣＳＳの機能をぜひ可愛がってあげてください！


<style>
/* 仕上げのデモンストレーション */
.wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.col {
    flex: 1;
    min-width: 250px;
    container-type: inline-size;
}

.item {
    padding: 15px;
    background: #fdf2f2;
    border-radius: 8px;
}

@container (min-width: 400px) {
    .item {
        background: #f2fdf2;
        display: flex;
        align-items: center;
        gap: 15px;
    }
}
</style>

<div class="wrapper">
    <div class="col">
        <div class="item">
            <img src="/img/sample120-120.jpg" alt="画像">
            <p>幅が広いと横並びになります。</p>
        </div>
    </div>
    <div class="col">
        <div class="item" style="max-width:350px;">
            <img src="/img/sample120-120.jpg" alt="画像">
            <p>幅が狭いと縦並びのままです。</p>
        </div>
    </div>
</div>

ブラウザ表示

2026年最新スキルアップ・実践セミナー