【完全保存版】CSSメディアクエリの使い方｜レスポンシブ対応を基礎から実践まで初心者向けに解説

Webサイト制作で必ず登場するのが CSSメディアクエリ です。

レスポンシブ対応って何から始めればいい？
メディアクエリの書き方が分からない
スマホだけレイアウトを変えたい

この記事では、「css メディアクエリ」で検索した初心者の方に向けて、
メディアクエリの基本構文から実務で使える考え方まで を、
できるだけ分かりやすく解説します。

CSSメディアクエリとは

CSSメディアクエリとは、
画面サイズや端末条件に応じてCSSを切り替える仕組みです。

これにより、1つのHTMLで次のような表示を実現できます。

PC用レイアウト
タブレット用レイアウト
スマホ用レイアウト

現在のWeb制作では、
メディアクエリはレスポンシブ対応の中核となる技術です。

なぜメディアクエリが必要なのか

メディアクエリが必要な理由は次の通りです。

画面サイズは端末ごとに異なる
PC用デザインをそのままスマホにすると使いにくい
ユーザー体験を向上させるため

特にスマホ利用者が多い現在、
メディアクエリなしのサイトは大きな不利になります。

メディアクエリの基本構文

最も基本的な書き方はこちらです。

@media screen and (max-width: 768px) {
  body {
    background-color: #f5f5f5;
  }
}

構文の意味

screen：画面表示用
max-width: 768px：画面幅が768px以下
{ } 内：条件を満たしたときに適用されるCSS

viewport設定は必須

メディアクエリを使う前に、
HTML側で viewportの設定 を必ず行いましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これがないと、
スマホで正しくメディアクエリが効きません。

よく使われるブレイクポイント

初心者の方は、
次のブレイクポイントを覚えておくと安心です。

1024px：タブレット以下
768px：スマホ以下
480px：小型スマホ

@media screen and (max-width: 768px) {
  /* スマホ用CSS */
}

max-widthとmin-widthの違い

max-width（〜以下）

@media screen and (max-width: 768px) {
  /* スマホ用 */
}

PC → スマホへ調整
初心者におすすめ

min-width（〜以上）

@media screen and (min-width: 769px) {
  /* PC用 */
}

スマホ基準で設計
モバイルファースト設計

デスクトップファーストとモバイルファースト

デスクトップファースト

/* PC用 */
.container {
  display: flex;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

モバイルファースト

/* スマホ用 */
.container {
  display: block;
}

@media screen and (min-width: 769px) {
  .container {
    display: flex;
  }
}

初心者の方は、
デスクトップファーストの方が理解しやすいです。

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

横並びを縦並びにする

.box {
  display: flex;
}

@media screen and (max-width: 768px) {
  .box {
    flex-direction: column;
  }
}

画像のはみ出し防止

img {
  max-width: 100%;
  height: auto;
}

フォントサイズの調整

body {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 15px;
  }
}

メディアクエリが効かない原因

viewportが設定されていない

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSSの読み込み順が原因

@media screen and (max-width: 768px) {
  body {
    color: red;
  }
}

body {
  color: black;
}

後に書いたCSSが優先される点に注意しましょう。

ブレイクポイントの指定ミス

@media (max-width: 768) { }

正しくは：

@media (max-width: 768px) { }

メディアクエリは何個必要？

初心者のうちは、
1〜2個で十分です。

スマホ用（768px以下）
必要ならタブレット用

増やしすぎると、
管理が難しくなります。

メディアクエリとSEOの関係

メディアクエリ自体がSEOを直接向上させるわけではありません。
しかし、

モバイルフレンドリー
読みやすいUI
操作しやすいレイアウト

これらは SEO評価に間接的に影響します。

初心者におすすめの最小構成

img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

この構成だけでも、
多くのレスポンシブ問題を防げます。

まとめ

CSSメディアクエリは、
レスポンシブ対応に欠かせない基本技術です。

viewport設定は必須
max-widthが初心者向け
ブレイクポイントは少なめでOK
レイアウト切り替えが主な役割

「css メディアクエリ」で検索した方は、
まず @media (max-width: 768px) をそのまま使ってみてください。
理解が進めば、レスポンシブ対応は確実に身についていきます。

【完全保存版】CSSメディアクエリの使い方｜レスポンシブ対応を基礎から実践まで初心者向けに解説