CSSメディアクエリ完全ガイド｜レスポンシブ対応をマスターするための基本と実践コード

html css js

Businessman marking on calendar for an appointment

2025.06.25

スマートフォンやタブレット、ノートパソコンなど、ユーザーがWebサイトを閲覧するデバイスは多様化しています。こうした様々な画面サイズに対応するために欠かせないのが「メディアクエリ」です。CSSのメディアクエリを使うことで、デバイスごとに異なるスタイルを適用し、ユーザビリティの高いレスポンシブデザインを実現できます。この記事では、メディアクエリの基本的な構文から実践的なサンプルコードまで、丁寧に解説していきます。

メディアクエリとは何か？
メディアクエリの基本構文
1. 例：画面幅が600px以下の場合のスタイル
よく使われるメディアクエリの例
メディアタイプの種類と使い方
メディア特性（メディアフィーチャー）
1. 例：縦向き画面だけに適用
メディアクエリの記述位置：外部・内部CSSの違い
実践サンプル：レスポンシブナビゲーションメニュー
メディアクエリを使う際の注意点
まとめ

メディアクエリとは何か？

CSSメディアクエリとは、画面サイズやデバイスの種類に応じて、異なるスタイルを適用できる機能です。Webページを柔軟に表示させるためのレスポンシブデザインの根幹をなす技術です。

たとえば、「画面が768px以下ならスマホ用のスタイルを適用する」というような制御が可能です。メディアクエリを使えば、1つのHTMLで複数のデバイスに対応できます。

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

メディアクエリの基本的な記述方法は以下の通りです。

@media 条件 {
  /* 条件が一致したときに適用されるCSS */
}

例：画面幅が600px以下の場合のスタイル

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上記のコードは、画面の幅が600px以下のときに背景色をライトブルーにするという意味です。

よく使われるメディアクエリの例

スマホ向けスタイル（最大幅768px）

@media screen and (max-width: 768px) {
  .container {
    padding: 10px;
    font-size: 14px;
  }
}

タブレット向けスタイル（最小幅769px、最大幅1024px）

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

PC向けスタイル（1025px以上）

@media screen and (min-width: 1025px) {
  .container {
    padding: 40px;
    font-size: 18px;
  }
}

メディアタイプの種類と使い方

メディアクエリには、メディアタイプを指定することができます。

メディアタイプ	説明
all	すべてのデバイスに適用
screen	スクリーン（モニター）用
print	印刷用
speech	音声読み上げ用

例：

@media print {
  body {
    color: black;
    background: none;
  }
}

メディア特性（メディアフィーチャー）

メディアクエリでは、以下のような**特性（フィーチャー）**を条件として使えます。

width：ビューポートの幅
height：ビューポートの高さ
orientation：縦長か横長か（portrait or landscape）
resolution：解像度（dpi, dppx）

例：縦向き画面だけに適用

@media screen and (orientation: portrait) {
  .header {
    height: 100px;
  }
}

メディアクエリの記述位置：外部・内部CSSの違い

メディアクエリはCSSファイル内ならどこでも書けますが、外部スタイルシートで管理するのが一般的です。たとえば：

<link rel="stylesheet" href="style.css">

外部CSS内に以下のように記述します。

/* PC向けの基本スタイル */
body {
  font-size: 18px;
}

/* スマホ向けに上書き */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

実践サンプル：レスポンシブナビゲーションメニュー

以下は、ナビゲーションメニューがスマホでは縦並びになる実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>メディアクエリサンプル</title>
  <style>
    .nav {
      display: flex;
      gap: 20px;
      background: #333;
      color: white;
      padding: 10px;
    }

    @media screen and (max-width: 768px) {
      .nav {
        flex-direction: column;
        gap: 10px;
      }
    }
  </style>
</head>
<body>
  <nav class="nav">
    <div>ホーム</div>
    <div>サービス</div>
    <div>お問い合わせ</div>
  </nav>
</body>
</html>