CSSメディアクエリで変数を上書き！スマホ対応を簡単にする最新テクニック

メディアクエリ内でCSS変数を上書きするテクニック

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

生徒

「スマホで見たときだけ、文字の大きさや色をガラッと変える方法ってありますか？」

先生

「メディアクエリという機能を使えば可能ですよ。さらにCSS変数を組み合わせると、驚くほど簡単に上書きができます。」

生徒

「上書き、ですか？難しそうですが、初心者でもマスターできますか？」

先生

「はい！複雑なコードを何度も書く必要がなくなる魔法のような方法です。さっそく仕組みを見ていきましょう！」

1. メディアクエリとCSS変数の関係を知ろう

現代のウェブサイト制作において、パソコンで見てもスマートフォンで見ても綺麗に表示される「レスポンシブデザイン」は欠かせない要素です。このレスポンシブを実現するために使われるのが「メディアクエリ」という技術です。

メディアクエリは、パソコンに「もし画面の幅が狭くなったら、このデザインを適用してね」と命令を出す仕組みです。これに「CSS変数（カスタムプロパティ）」を組み合わせるとどうなるでしょうか。通常なら、文字サイズ、色、余白など、変更したい場所すべてに新しい設定を書き直さなければなりません。しかし、変数を上書きする方法を使えば、変数の「中身の値」だけを差し替えるだけで、関連するすべてのデザインが一斉に切り替わります。

2. パソコンとスマホで色を自動で切り替える方法

まずは、画面の大きさに合わせて背景色を変える簡単な例から学びましょう。プログラミング未経験の方でも分かりやすいように説明すると、あらかじめ「箱（変数）」の中に色を入れておき、画面が狭くなった瞬間にその箱の中身を別の色に詰め替えるイメージです。

CSSでは「@media」という記法を使って、特定の画面サイズ（ブレイクポイント）を指定します。その中で変数を再定義（上書き）するだけで、実際にその変数を使っている場所は自動的に新しい色を表示してくれます。


<style>
	:root {
		--bg-color: lightblue;
	}

	/* 画面幅が600px以下（スマホなど）になった時の設定 */
	@media (max-width: 600px) {
		:root {
			--bg-color: lightpink;
		}
	}

	.responsive-box {
		background-color: var(--bg-color);
		padding: 30px;
		text-align: center;
		border: 2px solid #333;
	}
</style>

<div class="responsive-box">
	<p>画面の幅を広げたり狭めたりしてみてください。背景色が変わります！</p>
</div>

ブラウザ表示

3. 複雑な文字サイズ調整も変数ひとつで解決

スマートフォンでサイトを見ると、パソコン用の大きな文字が画面からはみ出したり、逆に小さすぎて読みづらかったりすることがあります。これを解決するために、フォントサイズも変数で管理しましょう。

「--main-font-size」という変数を作り、パソコン用には「30px」、スマホ用には「20px」と設定します。メディアクエリの中でこの変数を書き換えるだけで、ページ内にあるすべての見出しの大きさを一気に調節できます。パソコン操作に不慣れな初心者の方にとって、一箇所を変えるだけで全体が変わるこの仕組みは、ミスを防ぐ大きな助けになります。


<style>
	:root {
		--title-size: 40px;
	}

	@media (max-width: 600px) {
		:root {
			--title-size: 24px;
		}
	}

	.dynamic-title {
		font-size: var(--title-size);
		font-weight: bold;
		color: #2c3e50;
	}
</style>

<h1 class="dynamic-title">可変するタイトル</h1>
<p>スマホで見ると、この文字は小さく調整されます。</p>

ブラウザ表示

4. 余白（マージン）のバランスをスマホ向けに最適化

デザインにおいて「余白」は非常に重要です。パソコンの広い画面ではゆったりした余白（マージンやパディング）が心地よいですが、画面の狭いスマホで同じ余白を使うと、中身を表示するスペースがなくなってしまいます。

ここで紹介するテクニックを使えば、画面サイズに応じて余白の「量」を自動調整できます。プログラミング用語で「上書き」と聞くと難しそうですが、実際は「大きな箱用の隙間」を「小さな箱用の隙間」に置き換えるだけのことです。これにより、どのデバイスで見てもバランスの取れた、読みやすいウェブサイトが完成します。

5. 特定のパーツだけを個別に上書きする応用術

これまではサイト全体（:root）の変数を変えてきましたが、特定の「部品（パーツ）」だけをメディアクエリで上書きすることも可能です。たとえば、サイト全体の色は変えずに、特定の「お知らせカード」の枠線の太さだけをスマホで細くしたい、といった要望に応えられます。

クラス名（.cardなど）に対してメディアクエリの中で変数を定義すると、そのクラスが使われている場所にだけ変更が適用されます。この「範囲を絞った上書き」を覚えると、より細やかでプロフェッショナルなデザイン制御ができるようになります。


<style>
	.sample-card {
		--card-margin: 50px;
		margin: var(--card-margin);
		border: 2px dashed gray;
		padding: 10px;
	}

	@media (max-width: 600px) {
		.sample-card {
			--card-margin: 10px;
		}
	}
</style>

<div class="sample-card">
	<p>パソコンでは大きな余白がありますが、スマホでは余白が狭くなります。</p>
</div>

ブラウザ表示

6. 画像のサイズ感を画面幅に合わせて調整する

画像を表示するときも、変数の上書きテクニックは非常に強力です。たとえば、パソコンでは横に並べて表示したい画像も、スマホでは画面いっぱいの幅に広げて見せたいことがあります。あらかじめ画像幅を変数として設定しておき、メディアクエリでその数値を「100%」などに上書きします。

サンプル画像を使って、実際にどう動くかを確認してみましょう。このように、画像のサイズ感を変数で管理することで、後から「やっぱりもう少し小さくしたい」と思った時も、変数の値を一箇所いじるだけで全ての画像に反映されます。これはまさに、効率的なサイト運営の基本です。


<style>
	:root {
		--img-width: 200px;
	}

	@media (max-width: 600px) {
		:root {
			--img-width: 100%;
		}
	}

	.responsive-img {
		width: var(--img-width);
		height: auto;
		border: 3px solid #eee;
	}
</style>

<img src="/img/sample150-100.jpg" alt="サンプル画像" class="responsive-img">
<p>スマホ幅になると画像が横いっぱいに広がります。</p>

ブラウザ表示

7. ブレイクポイントの考え方と設定のコツ

「ブレイクポイント」とは、デザインが切り替わる境界線のことです。どのくらいの画面幅で変数を上書きするか、という基準になります。一般的には、スマートフォンの幅に合わせた「480px」や「600px」、タブレットに合わせた「768px」や「1024px」などがよく使われます。

初心者が迷いやすいのは、「いくつ設定すればいいのか」という点です。まずは「スマホ用（600px以下）」の設定をひとつ作ってみることから始めましょう。慣れてきたら、タブレット用、大型モニター用と増やしていくのがスムーズな学習のコツです。変数を活用していれば、ブレイクポイントを後から変更するのも簡単です。

8. 入力ミスを防ぐ！メディアクエリ記述の注意点

メディアクエリを書くときは、波括弧「{ }」の閉じ忘れに十分注意してください。メディアクエリは、大きな波括弧の中にさらに個別の設定（セレクタ）の波括弧が入るという「二重構造」になっています。パソコン操作に慣れていない方は、この閉じカッコが一つ足りないだけで、画面全体が真っ白になったり、意図しない動きをしたりして慌ててしまうことがあります。

また、半角と全角の違いも致命的なミスに繋がります。「@media」の前の「@」が全角になっていないか、カッコ内のスペースが全角になっていないか、一文字ずつ丁寧に確認しましょう。プログラミングは、こうした小さな記号の正確さが成功を左右します。

9. ダークモードも変数の上書きで対応可能

最近よく見る「ダークモード（黒基調の画面）」への対応も、実はメディアクエリと変数の上書きで実現できます。「prefers-color-scheme」という命令を使うと、ユーザーのスマホの設定がダークモードの時にだけ、変数の色を黒系に上書きすることができます。

画面サイズによる上書きだけでなく、ユーザーの「好み」に合わせてデザインを切り替えられるこの技術は、最新のウェブ制作では非常に高く評価されます。色々な条件で変数を上書きできるようになると、あなたの作るウェブサイトはより「親切で使いやすい」ものへと進化していくでしょう。

10. 効率的なコーディングのための最終アドバイス

最後に、メディアクエリ内で変数を上書きする際の鉄則をお伝えします。それは「変数の名前は分かりやすく、意味のあるものにする」ということです。「--color1」のような名前だと、スマホで上書きした時に何を意図した色なのか分からなくなってしまいます。「--main-bg-color」や「--mobile-font-size」のように、役割がはっきりわかる名前にしましょう。

プログラミングの学習は、小さな成功の積み重ねです。まずは「色が変わった！」という喜びを大切にしながら、少しずつ変数を活用した高度なレスポンシブデザインに挑戦してみてください。このテクニックをマスターすれば、あなたのコーディング作業は驚くほど快適になるはずです。

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