2026年4月16日
メディアクエリとは？
メディアクエリ（@media）は、画面サイズに応じてCSSを切り替える仕組みです。スマホでは1列、PCでは3列——のように、デバイスに合わせたデザインを実現できます。現在のウェブサイトはスマホからのアクセスが7割以上を占めるため、メディアクエリは必須の技術です。
レスポンシブデザインを作るための核となる技術です。
基本の書き方
@media (max-width: 768px) の意味
「画面幅が768px以下のとき」に中のCSSが適用されます。
/* 通常のスタイル */
.container { display: flex; }
/* 画面幅768px以下のとき */
@media (max-width: 768px) {
.container { display: block; }
}min-width と max-width の使い分け
min-width：「○○px以上のとき」→ モバイルファーストで使うmax-width：「○○px以下のとき」→ デスクトップファーストで使う
ブレイクポイントの定番値
| 幅 | 対象デバイス |
|---|---|
| 480px | スマホ（小） |
| 768px | タブレット |
| 1024px | PC |
💡 CSS入門ガイドでCSSの基本を確認できます。
モバイルファーストとデスクトップファースト
モバイルファーストの書き方（min-width推奨）
まずスマホ向けのスタイルを書き、画面が大きくなるにつれてスタイルを追加していく方法です。
/* スマホ向け（基本スタイル） */
.cards { display: block; }
/* タブレット以上 */
@media (min-width: 768px) {
.cards { display: grid; grid-template-columns: repeat(2, 1fr); }
}
/* PC以上 */
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}なぜモバイルファーストが良いのか
- スマホユーザーが多い（全体の7割以上）
- シンプルなスタイルから始めるので、コードが整理しやすい
- 不要なスタイルを読み込まないので表示が速い
デスクトップファーストの書き方も紹介します。max-widthを使い、大きい画面のスタイルを基本として、小さい画面向けに上書きしていく方法です。
既存のPCサイトをスマホ対応する場合はデスクトップファーストが楽です。しかし新規でサイトを作るなら、モバイルファーストをおすすめします。コードがシンプルになり、スマホでの表示速度も速くなります。
モバイルファーストでは、基本スタイルがそのままスマホ用になります。メディアクエリの中には「大きい画面で追加するスタイル」だけを書きます。余計なスタイルを読み込まないので、スマホの表示が軽くなります。
実践例
ナビゲーションの切り替え
/* スマホ: 縦並び */
nav ul { display: flex; flex-direction: column; gap: 8px; }
/* PC: 横並び */
@media (min-width: 768px) {
nav ul { flex-direction: row; gap: 24px; }
}カード列数の変更
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.card-grid { grid-template-columns: repeat(3, 1fr); }
}📖 Flexbox入門やCSS Grid入門でレイアウトの基本を学べます。
実践例をもう少し詳しく解説します。
ナビゲーションの切り替えでは、スマホでは縦並びにしています。画面が狭いので横に並べると文字が小さくなりすぎるためです。768px以上になったら横並びに切り替えます。gapの値もスマホでは8px、PCでは24pxに広げて余裕を持たせています。
カード列数の変更では、スマホで1列、タブレットで2列、PCで3列にしています。grid-template-columnsの値を変えるだけで列数を制御できます。repeat(2, 1fr) は「同じ幅の列を2つ作る」という意味です。
フォントサイズの調整もよく使うパターンです。スマホでは本文を16px、見出しを24pxにします。PCでは本文を18px、見出しを32pxに大きくします。画面が大きいほど文字も大きくして読みやすくします。
画像のサイズ調整も重要です。スマホでは画像を幅100%にして画面いっぱいに表示します。PCでは最大幅を設定して大きくなりすぎないようにします。max-width: 600px のように指定すると、画面が広くても画像が巨大にならずに済みます。
レスポンシブデザインの全体像はレスポンシブデザイン入門で解説しています。
よくある間違い
- viewportメタタグの設定忘れ：HTMLの
<head>に<meta name="viewport" content="width=device-width, initial-scale=1.0">がないと、スマホでメディアクエリが正しく動きません。 - ブレイクポイントの順番ミス：min-widthを使う場合は小さい値から、max-widthを使う場合は大きい値から書きましょう。順番を間違えると後のスタイルで上書きされてしまいます。
🔗 metaタグの書き方でviewport設定を確認しましょう。
3つ目のよくある間違いは、メディアクエリの中に全スタイルを書いてしまうことです。モバイルファーストでは、基本スタイルはメディアクエリの外に書きます。メディアクエリの中には「変更する部分だけ」を書きましょう。こうすることでコードの重複が減り、メンテナンスしやすくなります。
4つ目は、ブレイクポイントを細かく設定しすぎることです。480px、520px、600px、768pxと細かく分けると管理が大変になります。3つ程度（スマホ・タブレット・PC）で十分です。中間のサイズはFlexboxやGridの自動折り返しで対応しましょう。
5つ目は、特定のデバイスの画面幅に合わせてしまうことです。デバイスは毎年変わります。コンテンツが崩れるポイントをブレイクポイントにするのが正しい考え方です。
CSSの基本に不安がある人はCSS入門ガイドから始めましょう。
まとめ
- ✅ メディアクエリ = 画面サイズに応じてCSSを切り替える仕組み
- ✅ モバイルファースト（min-width）が推奨
- ✅ 定番ブレイクポイント：480px / 768px / 1024px
- ✅ viewportメタタグを忘れずに設定する