CSSメディアクエリの重複を回避！レスポンシブ設計で崩れないサイトを作るコツ

メディアクエリの重複・競合を防ぐ設計のコツ

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

生徒

「スマホ用の設定を書いたはずなのに、なぜかパソコン用の色が混ざって表示されてしまいます。ＣＳＳが喧嘩しているみたいです。」

先生

「それはメディアクエリの設定が重複していたり、競合（ぶつかり合い）が起きているサインですね。命令を出す順番や範囲の指定方法にルールが必要なんです。」

生徒

「ルールがあるんですね。どうすれば命令がスムーズに伝わるようになりますか？」

先生

「初心者でも失敗しないための『設計のコツ』があります。整理整頓のやり方を一緒に学んでいきましょう！」

1. メディアクエリの重複や競合が起きる原因を知ろう

ウェブサイトの制作において、画面サイズに合わせて見た目を変えるメディアクエリは欠かせない存在です。しかし、プログラミングに慣れていない方が陥りやすいのが「命令のダブり」です。例えば、「幅が６００ピクセル以下の時は赤色」という命令と、「幅が４００ピクセル以下の時は青色」という命令を、深く考えずに並べてしまうと、４００ピクセルの画面ではどちらの命令を聞けばいいのかブラウザが迷ってしまいます。

このように、複数の命令が同じ要素（ボタンや文字など）に対して同時に出されてしまう状態を「競合（きょうごう）」と呼びます。パソコンを触ったことがない方でも、二人の上司から同時に違う指示をされたら困ってしまいますよね。ブラウザも同じです。この混乱を防ぐためには、命令を出す「範囲」を明確に分けるか、命令を聞く「優先順位」をはっきりさせる必要があります。

2. 上から下に読み込まれるCSSの性質を理解する

ＣＳＳ（スタイルシート）には、「後から書いた命令が優先される」という非常にシンプルな基本ルールがあります。これを専門用語で「カスケード（滝のように流れる）」と言います。メディアクエリを使ってレスポンシブデザインを作る際も、この性質をうまく利用することが整理整頓の鍵となります。

もし同じ強さの命令が二つあった場合、必ず下の行に書かれたものが勝つ仕組みになっています。したがって、画面サイズが小さい順（または大きい順）に並べて書くという習慣をつけるだけで、意図しない上書きや競合を劇的に減らすことができます。バラバラの場所に思いついた順で書いてしまうのが、初心者が最もやってしまいがちな失敗ですので注意しましょう。


<style>
/* 基本はスマホ（小さい画面）から書く */
.base-card {
    background-color: #f8f9fa;
    padding: 15px;
    border: 1px solid #ddd;
}

/* 600px以上になったら（タブレット向け） */
@media (min-width: 600px) {
    .base-card {
        background-color: #d1e7dd; /* 後から書いたこちらが優先される */
    }
}

/* 1000px以上になったら（パソコン向け） */
@media (min-width: 1000px) {
    .base-card {
        background-color: #cfe2ff; /* さらに大きな画面ではこちらが優先 */
    }
}
</style>

<div class="base-card">
    <i class="bi bi-layers"></i> 命令の順番が大事です
</div>
<p>画面幅を広げると、グレーから緑、そして青へと順番に変わります。</p>

ブラウザ表示

3. モバイルファースト設計でコードをシンプルにする

「モバイルファースト」とは、まずスマートフォンのような小さな画面用のデザインを基本として書き、必要に応じて大きな画面用の設定を追加していく手法のことです。この設計方法の最大のメリットは、メディアクエリの重複を最小限に抑えられる点にあります。

多くの要素は、スマホでは縦に並び、パソコンでは横に並びます。スマホ用の縦並び設定を「外側（メディアクエリの中に入れない場所）」に書き、パソコン用の横並び設定だけを「＠ｍｅｄｉａ」の中に書くようにします。こうすることで、「スマホの時はこれ、パソコンの時はこれ」と両方に命令を書く手間が省け、コードがスッキリと整理されます。スッキリしたコードは、間違いを見つけるのも簡単になります。

4. 範囲を限定する演算子を正しく使い分けよう

メディアクエリを書くときは、「ｍｉｎ－ｗｉｄｔｈ（～以上）」と「ｍａｘ－ｗｉｄｔｈ（～以下）」という二つの指定方法を使い分けます。競合を防ぐためのコツは、これらを混ぜて使わないことです。基本的には「ｍｉｎ－ｗｉｄｔｈ」だけを使って、階段を登るように設定を積み上げていくのが最も安全です。

もし「ｍａｘ－ｗｉｄｔｈ」と「ｍｉｎ－ｗｉｄｔｈ」を同じファイルの中でバラバラに使うと、どこかで範囲が重なってしまい、どちらの命令が有効なのか人間にもブラウザにも分からなくなってしまいます。パソコン操作に慣れていないうちは、「～以上の時だけ変える」というルール一つに絞って制作を進めることを強くお勧めします。これが混乱を防ぐ一番の特効薬です。


<style>
/* 範囲を限定して競合を防ぐ書き方 */
.status-bar {
    text-align: center;
    padding: 10px;
    color: white;
}

/* 599pxまでのスマホ専用設定 */
@media (max-width: 599px) {
    .status-bar {
        background-color: #dc3545; /* 赤色 */
    }
}

/* 600px以上のパソコン専用設定 */
@media (min-width: 600px) {
    .status-bar {
        background-color: #198754; /* 緑色 */
    }
}
</style>

<div class="status-bar">
    <i class="bi bi-check-circle"></i> 範囲を分けているので競合しません
</div>
<p>600pxを境目に、色がパッと切り替わります。</p>

ブラウザ表示

5. ブレイクポイントの数値を共通化してバラツキをなくす

「ブレイクポイント」とは、デザインが切り替わる瞬間の数値（ピクセル数）のことです。サイト全体でこの数値がバラバラだと、重複や競合が起きやすくなります。ある場所では７６８ピクセルで切り替え、別の場所では８００ピクセルで切り替えるといった具合です。これでは管理が追いつかなくなります。

設計のコツは、サイト全体で使う数値を３つから４つ程度に固定してしまうことです。例えば、「スマホは５７６ｐｘ」「タブレットは７６８ｐｘ」「パソコンは１０２４ｐｘ」といった共通のルールを作ります。パソコンの初心者の方でも、あらかじめ決めた「定規」を使って長さを測るようにすれば、迷うことはありません。この共通のルールが、重複した変な動きを未然に防いでくれます。

6. 重なりを防ぐための引き算の考え方

デザインを修正するとき、ついつい新しい命令をどんどん追加してしまいがちですが、これが重複の原因になります。実は、不必要な命令を「消す」という引き算の考え方が大切です。以前に書いた古いメディアクエリが残っているのに、新しく下の方に別のメディアクエリを書き足すと、古い命令が亡霊のように悪さをすることがあります。

「うまく動かないな」と思ったら、新しいコードを書く前に、今あるコードの中で同じ名前（クラス名）の命令が他にないか確認してみましょう。ウェブ制作は、足し算よりも整理整頓が重要です。不要な命令を削除して、一つの要素に対するメディアクエリを最小限に保つことが、美しくて崩れないサイトを作るためのプロの秘訣です。


<style>
/* 悪い例：重複した命令が混在している */
.bad-sample { font-size: 16px; }
@media (min-width: 500px) { .bad-sample { color: blue; } }
@media (min-width: 500px) { .bad-sample { font-size: 20px; } } /* 同じ範囲が2つある */

/* 良い例：一つの範囲にまとめる */
.good-sample {
    font-size: 16px;
    color: black;
}
@media (min-width: 500px) {
    .good-sample {
        font-size: 20px;
        color: blue;
    }
}
</style>

<div class="good-sample">
    <i class="bi bi-hand-thumbs-up"></i> 重複をまとめてスッキリ！
</div>

ブラウザ表示

7. 検証ツールを使って命令の優先順位を視覚化する

ブラウザには「検証ツール（デベロッパーツール）」という、ＣＳＳの命令がどう当たっているかを確認できる便利な機能があります。これを使うと、どのメディアクエリが有効で、どの命令が他の命令に負けて打ち消されている（横線が引かれている）かが一目でわかります。パソコン初心者のうちは、このツールを使うのが少し怖く感じるかもしれませんが、実は最強の味方です。

もし自分の書いた色が反映されていないなら、検証ツールでその要素を見てみてください。下の方に書いたはずの命令が、さらに下にある別の命令に負けているかもしれません。このように「目で見える形」で競合を確認することで、どこを直すべきかがすぐに分かります。理屈で考えるよりも、実際に動いている様子を見るのが、重複を防ぐ設計を学ぶための近道です。

8. 複雑な条件は論理演算子でスマートに整理する

たまに「特定の範囲内だけで有効にしたい（例：６００から９００ピクセルの間だけ）」という場合があります。この時は、複数の条件を組み合わせる「論理演算子（ａｎｄなど）」を使いましょう。範囲をサンドイッチのように挟み込むことで、他のサイズへの影響を完全に遮断できます。

最近の最新の書き方では、「６００ｐｘ＜＝ｗｉｄｔｈ＜＝９００ｐｘ」のように、算数の不等号のような書き方もできるようになりました。これならプログラミング未経験の方でも直感的に範囲を理解できますよね。このように範囲を「限定」してあげることで、意図しない場所でスタイルが変わってしまうミスを確実に防ぐことができます。賢く、そして丁寧に範囲を指定して、誰が見ても分かりやすいＣＳＳを目指しましょう！


<style>
.range-box {
    padding: 20px;
    text-align: center;
    border: 2px solid #6c757d;
}

/* 最新の書き方で特定の範囲だけを指定 */
@media (600px <= width <= 900px) {
    .range-box {
        background-color: #fff3cd; /* 600〜900pxのときだけ黄色 */
        border-color: #ffc107;
    }
}
</style>

<div class="range-box">
    <i class="bi bi-arrows-expand"></i>
    特定の幅（600px〜900px）だけで変化します
</div>
<p class="small">範囲外（すごく狭い、またはすごく広い）では元に戻ります。</p>

ブラウザ表示

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