基本知識

【CSS第8回】レスポンシブ対応とメディアクエリ

CSS基礎講座 全10回（第8回）

【CSS第8回】レスポンシブ対応とメディアクエリ

スマートフォン、タブレット、PCなど、あらゆる画面幅に対応した「レスポンシブWebデザイン」を学習します。Viewport設定の意味や、メディアクエリ（@media）による表示切り替えの仕組みを習得しましょう。

📌 CSS講座ロードマップ一覧（クリックで移動）

1. レスポンシブWebデザインの必須要件

現在、インターネットのウェブサイトのアクセスの大半はスマートフォンによるものです。デバイスの画面サイズに応じて表示レイアウトを自動的に流動（リフロー）させ、常に最適な見やすさを提供するデザイン手法を レスポンシブWebデザイン と呼びます。

これに対応するためには、HTML側で必ず以下の **「Viewport（ビューポート）の設定（メタタグ）」** を <head> 内に記述しておく必要があります。 

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

※この記述がないと、スマートフォンで開いた際にPC用の巨大なレイアウトがそのまま極小サイズで縮小表示されてしまい、CSSのメディアクエリが正常に検知されません。

2. メディアクエリによるスタイルの切り替え

画面の横幅に応じて適用するCSSを変更するには、CSSの構文内で `@media`（メディアクエリ） を記述します。

💡 メディアクエリの基本的な形

一般的には、基本スタイル（全画面共通、またはスマホ用）を書いたのちに、特定の幅以上（または以下）で適用したいスタイルを上書き定義します。 

@media (max-width: 768px) {
    /* 画面幅が「768px以下」のデバイスにだけ適用される上書きスタイル */
    body {
        background-color: #f1f5f9;
    }
}

3. 定番のブレイクポイントとレイアウト切り替え

画面サイズの境界点となる数値を 「ブレイクポイント」 と呼びます。デバイスに応じた定番のブレイクポイントは以下の通りです。

メディアクエリのブレイクポイント概念図 図：画面サイズに応じたブレイクポイント（スマートフォン・PC）のレイアウト分岐イメージ

👑 定番のブレイクポイント数値

  • 768px: タブレットとスマートフォンの境界線として最も広く採用される基本ブレイクポイント。
  • 1024px: タブレットとPC（ノートPC）の境界線。

4. レスポンシブな横並び・縦並び切り替え

以下のCSSを指定すると、PC（769px以上）の時は2列の横並びになり、スマートフォン（768px以下）の時は自動的に1列の縦並びへと切り替わるレイアウトが作成できます。

style.css 
.flex-wrapper {
    display: flex;
    flex-direction: row; /* 基本は横並び（PC基準） */
    gap: 20px;
}

@media (max-width: 768px) {
    .flex-wrapper {
        flex-direction: column; /* スマホでは縦並びに切り替える */
    }
}
✍️ 第8回 理解度チェック（問題）

CSSにおいて、画面の最大横幅が768px以下のデバイス（主にスマートフォンなど）にのみ別のスタイルルールを適用したい場合、メディアクエリ（@media）の条件式にはどのように記述すればよいでしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

第8回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

  • レスポンシブ対応を行うには、HTMLのheadにViewportメタタグの指定が必須。
  • `@media (max-width: 768px)` のように記述することで、スマホ幅だけの上書きルールを定義できる。
  • デバイスサイズを切り分ける境界である「ブレイクポイント」は 768px が最も一般的。

次回（第9回）は、インタラクティブで洗練されたWebサイトに仕上げるための最後のパーツ「擬似クラスとアニメーション効果」を学び、ホバー時のなめらかな変化や動的ボタンの作り方を学びます。お楽しみに！

📖 CSSの基礎を全10回でマスターする

🔑 第8回 理解度チェックの解答と解説

【解説】

正解は **`@media (max-width: 768px)`** です。 `max-width: 768px` と指定することで、「最大横幅が768pxまでの範囲」、つまり「0pxから768pxまでのすべての表示領域（主にスマートフォンや小さめのタブレット）」に対して括弧内の上書きCSSが適用されます。実務のコーディングにおいて最も代表的なレスポンシブ条件記述です。

関連記事