CSSのメディアクエリをネストする！最新の書き方とSCSS・PostCSS活用術

@media のネスト書き方（SCSS・PostCSS対応含む）

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

生徒

「ＣＳＳでスマホ用の設定を書くとき、いつも同じ名前を何度も書くのが面倒です。もっと簡単に書く方法はありませんか？」

先生

「それなら『ネスト（入れ子）』という書き方が便利ですよ。最新のＣＳＳでは、デザインの命令の中に直接メディアクエリを書き込めるようになったんです。」

生徒

「デザインの中に書き込む？なんだか箱の中にさらに箱を入れるみたいですね。」

先生

「まさにその通りです！ＳＣＳＳや最新のＣＳＳ標準で使えるこの便利な書き方を、基礎から丁寧に解説しますね。」

1. CSSのネスト構造とは何を指すのか？

プログラミングの世界で「ネスト」という言葉は、ロシアの人形「マトリョーシカ」のように、あるものの中に別のものを入れる状態を指します。日本語では「入れ子」とも呼びます。これまでの普通のＣＳＳでは、パソコン用のデザインを書いたあと、わざわざ別の場所に「ここからはスマホ用ですよ」と書き直す必要がありました。

しかし、ネストを使うと「このボタンの設定」という大きな箱の中に、「普通の時はこれ」「スマホの時はこれ」という風に、関連する命令をまとめて入れておくことができます。これにより、コードの見た目が整理され、どこに何が書いてあるかが一瞬でわかるようになります。パソコンを触ったことがない方でも、整理整頓のルールさえ覚えれば、非常に読みやすいプログラムを書くことができるようになります。

2. 従来の書き方とネストした書き方の違いを比較

これまでの書き方では、デザインの対象となる名前（クラス名といいます）を何度も繰り返さなければなりませんでした。例えば、「カード（.card）」という部品があった場合、外側にメディアクエリの枠を作り、その中にまた「.card」と書く必要がありました。これでは、名前を書き間違えるリスクが高まります。

最新の書き方では、最初の「.card」の波括弧（中括弧）の中に、直接アットマークメディア（@media）を書き込めます。これをすることで、どのデザインに対するスマホ設定なのかが誰の目にも明らかになります。名前を一回書くだけで済むので、ミスも減り、作業時間も短縮できるというわけです。これが現代の効率的なホームページ制作のスタイルです。


<style>
/* 最新のネスト（入れ子）の書き方 */
.nest-box {
    background-color: #f0f8ff;
    padding: 20px;
    border: 2px solid #007bff;

    /* 箱の中に直接スマホ設定を入れる */
    @media (max-width: 600px) {
        background-color: #fff0f5; /* スマホではピンク色に */
        border-color: #ff69b4;
    }
}
</style>

<div class="nest-box">
    <i class="bi bi-box"></i> ネストされた要素
</div>
<p>画面を縮めると、箱の色がピンクに変わります。</p>

ブラウザ表示

3. SCSSでのネストはさらに便利で強力

「ＳＣＳＳ（エス・シー・エス・エス）」とは、ＣＳＳをより便利にパワーアップさせた言語です。プログラミングの現場では、このＳＣＳＳが長らく主流として使われてきました。ＳＣＳＳの最大の特徴は、このメディアクエリのネストを非常に柔軟に扱える点にあります。

ＳＣＳＳを使えば、特定の部品だけの色や大きさを、その場でササッとスマホ用に書き換えることができます。最近のブラウザは普通のＣＳＳでもネストができるようになってきましたが、ＳＣＳＳには「アンパサンド（&）」という記号を使って、さらに複雑な条件をネストする機能があります。未経験の方はまず「ネストはＳＣＳＳという便利な道具から広まった素晴らしい文化なんだ」と知っておくだけでも十分です。


<style>
/* SCSS風の構造を意識した最新CSSの書き方 */
.menu-item {
    color: #555;
    font-size: 18px;
    display: block;
    padding: 10px;

    /* スマホ（最大幅600px）のとき */
    @media (max-width: 600px) {
        font-size: 14px;
        color: #e67e22;
        background-color: #fdf2e9;
    }
}
</style>

<div class="menu-item">
    <i class="bi bi-list"></i> メニュー項目
</div>
<p>スマホサイズになると、文字が小さくなりオレンジ色になります。</p>

ブラウザ表示

4. PostCSSで古いブラウザにも対応させる仕組み

「ＰｏｓｔＣＳＳ（ポスト・シー・エス・エス）」とは、最新の便利な書き方で書かれたコードを、古いパソコンやスマホでも読める「昔ながらのＣＳＳ」に自動で翻訳してくれる道具のことです。プログラミングに慣れていない方にとって、「翻訳」と言われると難しく感じるかもしれませんが、要は「最新語を標準語に直してくれる自動変換器」のようなものです。

ネストしたメディアクエリはとても便利ですが、あまりに古いブラウザだと理解できないことがあります。そこで、このポストＣＳＳという道具を使って、私たちが書いた綺麗なネスト構造を、古いブラウザが理解できる形式に分解して出力します。これによって、私たちは最新の快適な方法でプログラムを書きつつ、世界中のあらゆる人に正しくサイトを見せることができるのです。

5. ネストを使うと修正作業が劇的に楽になる理由

サイトを作っていると「このボタン、やっぱりスマホのときだけもう少し大きくしたいな」といった修正が必ず発生します。もしネストを使わずに書いていると、数千行あるコードの中からスマホ用の設定エリアを探し出し、さらにその中からボタンの名前を見つけ出さなければなりません。これはまるでおもちゃ箱の中からたった一個の小さな部品を探すような苦労です。

しかし、ネストを使っていれば、パソコン用のボタンの設定が書いてある場所に、必ずスマホ用の設定も一緒に置いてあります。探す手間がゼロになり、変更したい場所だけをすぐに書き換えることができます。この「一箇所にまとまっている」という安心感こそが、プログラムを長く続けていくための秘訣です。整理整頓が苦手な方ほど、このネストの恩恵を感じることができるでしょう。

6. ネストの階層が深くなりすぎないように注意しよう

便利なネストですが、やりすぎには注意が必要です。箱の中に箱を入れ、さらにその中に箱を入れ……と繰り返していくと、今度は逆に何がどこに入っているのか分からなくなってしまいます。これを「ネストが深い」と表現します。あまりに深くなると、まるで迷路のように複雑なコードになってしまいます。

一般的には、２回から３回くらいの入れ子にとどめておくのがベストだと言われています。メディアクエリをネストするのは非常に良い習慣ですが、その中にさらに別の細かい設定を何重にも入れないように気をつけましょう。シンプルであればあるほど、後から見たときに自分も他人も助かります。何事もほどほどが大切です。


<style>
/* 読みやすいネストの例 */
.card-sample {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;

    /* メディアクエリのネスト */
    @media (min-width: 768px) {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 30px; /* PCでは余白を広く */
    }
}

.card-sample h4 {
    margin: 0;
    color: #333;
}
</style>

<div class="card-sample">
    <h4><i class="bi bi-chat-dots"></i> 適切なネスト量</h4>
    <p>PCで見ると影がついて、余白がゆったりと広がります。</p>
</div>

ブラウザ表示

7. 最新のCSS標準機能（Native Nesting）の現状

かつてはＳＣＳＳなどの特別な道具を使わなければできなかったネストが、今ではブラウザの標準機能（ネイティブ・ネスティング）として使えるようになっています。グーグルクロームやエッジ、サファリといった主要なブラウザは、すでにこの書き方を理解できます。つまり、特別な道具の準備をしなくても、今日からあなたのパソコンでこの新しい書き方を試すことができるのです。

ただし、数年以上前の非常に古いスマートフォンを使っているユーザーには、この書き方が効かない場合があることも覚えておきましょう。もしあなたが世界中の誰にでも完璧に見せたい本格的なサイトを作るなら、先ほどお話しした「翻訳機（PostCSS）」を併用するのが安心です。でも、個人のブログや学習用であれば、まずはこの最新の書き方で自由に楽しく書いてみることをお勧めします。

8. 実機やブラウザでネストの効果を確認しよう

実際にコードを書いたら、ブラウザで確認してみましょう。画面の右クリックから「検証」を選んで、画面の幅をぐーっと縮めてみてください。ネストされたメディアクエリが正しく動いていれば、ある瞬間にパッと色や形が変わるはずです。この変化を自分の目で見ることが、プログラミング学習において何よりの喜びになります。

もし上手く動かないときは、括弧（｛｝）がきちんとペアになっているかを確認してください。ネストは括弧の数が増えるため、一つ忘れるだけで全体の動きがおかしくなることがあります。最初は難しく感じるかもしれませんが、一度慣れてしまえば「もう前の書き方には戻れない！」と思うほど便利です。最新の技術を味方につけて、快適なウェブ制作ライフをスタートさせましょう！


<style>
/* 画面サイズでアイコンの色を切り替えるネスト例 */
.icon-container {
    font-size: 50px;
    text-align: center;
    color: #6c757d;

    @media (max-width: 480px) {
        color: #dc3545; /* とても狭い画面では赤色に */
    }

    @media (min-width: 1024px) {
        color: #28a745; /* 広い画面では緑色に */
    }
}
</style>

<div class="icon-container">
    <i class="bi bi-info-circle-fill"></i>
    <p style="font-size: 16px;">幅を変えると色が変わります</p>
</div>

ブラウザ表示

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