メディアクエリでスマホ対応！CSSレスポンシブ入門

スマホやタブレット、PCなど、画面サイズの異なるデバイスに対応するWebサイトを作るために欠かせないのがレスポンシブデザインです。

その中でも、CSSのメディアクエリは、画面サイズに応じてレイアウトやデザインを変更するための基本的な仕組みです。

この記事では、メディアクエリの基本から実践的な使い方まで、初心者向けにわかりやすく解説します。

メディアクエリとは？

メディアクエリ（Media Queries）は、CSSで画面の幅や種類（画面・印刷など）に応じてスタイルを切り替える機能です。

基本的な構文は以下のようになります。

@media 条件 {
  /* 条件を満たしたときのスタイル */
}

例：画面幅が768px以上のときだけ適用

@media (min-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
}

この例では、PCや大きめのタブレットなど画面幅が768px以上の端末で背景色がグレーに変わります。

よく使うメディアクエリの例

以下は、レスポンシブ対応でよく使われる画面幅の目安です。

対象端末	メディアクエリの条件
スマートフォン	`@media (max-width: 480px)`
タブレット	`@media (max-width: 768px)`
ノートPCなど	`@media (max-width: 1024px)`
大画面対応	`@media (min-width: 1200px)`

複数条件を組み合わせることも可能です：

@media (min-width: 481px) and (max-width: 768px) {
  /* スマホを除いたタブレット向けのスタイル */
}

min-widthベースのモバイルファースト設計がおすすめ

多くの開発現場では、「モバイルファースト」という設計方針が採用されています。

これは、まずスマホ向けのシンプルなスタイルを書き、画面が広くなるにつれてスタイルを追加していく考え方です。

このとき使うのが min-width です。

cssコピーする編集する/* スマホ用（共通） */
.menu ul {
  flex-direction: column;
  gap: 10px;
}

/* タブレット以上（768px以上）で横並びに変更 */
@media (min-width: 768px) {
  .menu ul {
    flex-direction: row;
    gap: 20px;
  }
}

このように、基本のスタイルをスマホ向けに記述し、それより大きな画面に対してだけスタイルを“追加”していくことで、保守性の高いCSSが書けます。

実践：スマホでナビゲーションを縦に並べる

HTML

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS（デフォルトは縦並び）

.menu ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 10px;
}

メディアクエリで横並びに切り替える

@media (max-width: 768px) {
  .menu ul {
    flex-direction: row;
    gap: 20px;
  }
}

これにより、PCでは横並び、スマホでは縦並びになります。

比較演算子を使った記述方法

比較演算子（<, <=, >, >=） を使用して、より直感的なメディアクエリの記述が可能になりました。

記述例

@media (width >= 768px) and (width < 1024px) {
  /* 768px以上、1024px未満の画面幅に適用 */
  .container {
    padding: 2rem;
  }
}

このように、従来の min-width や max-width を使わずに、数学的な表現に近いスタイルで記述できるため、可読性が高く直感的に理解できます。

従来の記法との比較

条件	従来の記法	新しい比較演算子記法
幅が768px以上	`@media (min-width: 768px)`	`@media (width >= 768px)`
幅が1024px未満	`@media (max-width: 1023px)`	`@media (width < 1024px)`
範囲指定	`@media (min-width: 768px) and (max-width: 1023px)`	`@media (768px <= width < 1024px)`

ブラウザ対応状況

2025年現在、比較演算子を使ったメディアクエリは主要なブラウザで広くサポートされています。

ブラウザ	サポート状況
Google Chrome	✅（104+）
Firefox	✅（63+）
Safari	✅（16.4+）
Microsoft Edge	✅（104+）

※ Internet Explorer ではサポートされていませんが、IE自体が現在は既にサポート終了済みです。

そのため、最新の開発プロジェクトでは比較演算子を利用しても問題ありません。

実用例：タブレットサイズ向けのデザイン適用

@media (768px <= width < 1024px) {
  .nav {
    display: flex;
    justify-content: space-around;
  }
}

このように、数学的な表現に近く読みやすいコードが書けるため、複雑な条件分岐があるレスポンシブ設計にも向いています。

メディアタイプ screen とは？

メディアクエリでは、CSSを適用する対象メディアを指定する「メディアタイプ」を使うことができます。

その中でも最もよく使われるのが、screenです。

@media screen and (min-wdth: 768px) {
  body {
    background-color: lightgray;
  }
}

`screen` の意味

screen は、ディスプレイ（画面）上に表示されるメディアを指します。
つまり、スマートフォン、タブレット、PCなど、画面に表示されるすべてのデバイスが対象になります。

他のメディアタイプには以下のようなものがあります：

メディアタイプ	説明
`screen`	ディスプレイ表示（スマホ、PCなど）
`print`	印刷時に適用されるスタイル
`speech`	音声読み上げソフト向け（あまり一般的ではありません）

`screen` は省略可能

実は、screen を省略しても問題なく動作します。
例えば以下の2つはどちらも同じ意味になります：

@media (width >= 768px) { ... }

@media screen and (width >= 768px) { ... }

ただし、印刷（print）など他のメディアと明確に区別したい場合は、screen を明示的に指定することもあります。

メディアクエリを書く場所は？

メディアクエリは以下のいずれでも書くことができます。

CSSファイルの最後にまとめる（推奨）
各セクションごとに個別に記述
外部ファイルとして分けて読み込む（例：responsive.css）

例：まとめて最後に記述する方法

/* 共通スタイル */

@media (max-width: 768px) {
  /* スマホ用スタイル */
}

レスポンシブ対応をチェックする方法

ブラウザのデベロッパーツール（F12）で画面幅を変える
スマホ実機やシミュレーターで表示確認
Chromeのデバイスモード（Ctrl + Shift + M）を活用

Chromeのデベロッパーツールで確認はできますが、本番アップ前に必ず実機で表示を確認するようにしましょう。

まとめ

メディアクエリは、一つのHTMLで複数のデバイスに対応するレスポンシブデザインの鍵です。

まずは min-width を使った画面幅の条件分岐から慣れていきましょう。

/* ここにスマホ用スタイルを書く */

@media (min-width: 768px) {
  /* ここにスマホより大きいデバイスのスタイルを書く */
}

慣れてくると、ブレークポイントを活用した細かいデザイン調整や、より高度な条件分岐（向き、解像度など）も使いこなせるようになります。