CSS メディアクエリ（Media Queries）

JPKODA 編集部 May 6, 2026

メディアクエリ（Media Queries）は、レスポンシブウェブデザイン（Responsive Web Design）の基石です。これを使用することで、ウェブサイトがアクセスしているデバイスの特性に応じてレイアウトやスタイルを調整できるようになります。

これは、ウェブサイトに「知覚」能力を与えるようなものです。スマートフォンからデスクトップまで、画面サイズに合わせて外観を自動的に最適化し、一貫性のあるフレンドリーなユーザーエクスペリエンス（UX）を保証します。

メディアクエリがなければ、サイトはモバイルデバイスで小さすぎて窮屈に見えたり、大画面で引き延ばされすぎて見えたりします。メディアクエリは、ユーザー固有のブラウジング環境に基づいてコンテンツの表示をカスタマイズするためのメカニズムを提供します。

1. メディアクエリを理解する

メディアクエリは、@media ルールを使用して、ウェブページを表示しているデバイスの特性に応じてスタイルを適用するCSSのテクニックです。

ターゲットとなる特性には、通常以下のようなものが含まれます：

画面サイズ（幅と高さ）
デバイスの向き（ランドスケープ/横向きまたはポートレート/縦向き）
解像度
入力方式（タッチスクリーンまたはマウス）

1.1 基本的な構文

メディアクエリの基本的な構文は以下の通りです。

@media (media-feature) {
  /* メディア特性（media-feature）が真（true）の時に適用されるCSSルール */
}

@media: ブラウザにメディアクエリを定義していることを伝えます。
(media-feature): 満たすべき条件を指定します。この条件が満たされた場合のみ、波括弧内のスタイルが有効になります。
{ / CSS rules */ }*: 指定したメディア特性が真である場合に適用されるCSSルールのブロックです。

1.2 メディアタイプ（任意）

現在は省略されることも多いですが、メディアクエリは特定のメディアタイプ（Media Types）をターゲットにすることもできます。

screen: コンピュータの画面、タブレット、スマートフォンに適用されます（最も一般的）。
print: ページが印刷される時に適用されます。
speech: スクリーンリーダーなどに適用されます。

メディアタイプを指定しない場合は、デフォルトで all（すべてのタイプ）が適用されます。

例：

@media screen and (max-width: 600px) {
  /* 600px以下の画面に適用されるスタイル */
}

@media print {
  /* 印刷時のスタイル */
}

1.3 メディア特性 (Media Features)

メディア特性は、ターゲットにしたいデバイスの具体的な特徴です。よく使われる特性を以下に挙げます。

width: ビューポート（ブラウザウィンドウの可視領域）の幅。
height: ビューポートの高さ。
max-width: ビューポートの最大幅（「この幅以下」）。
min-width: ビューポートの最小幅（「この幅以上」）。
max-height: ビューポートの最大高さ。
min-height: ビューポートの最小高さ。
orientation: デバイスの向き（portrait 縦向きまたは landscape 横向き）。
aspect-ratio: ビューポートの縦横比（幅 / 高さ）。
resolution: デバイス画面の解像度。
pointer: ポインティングデバイス（マウス、タッチ等）の有無とその精度。値は none、coarse（指など）、fine（マウスなど）。
hover: デバイスがホバー（マウスオーバー）をサポートしているか。

1.4 論理演算子

複数のメディア特性を組み合わせるために論理演算子を使用できます。

and: 指定したすべての条件が真である必要があります。
or: 少なくとも一つの条件が真であれば適用されます（コンマ , で区切ります）。
not: メディアクエリ全体の結果を反転させます。
only: 古いブラウザに対してスタイルを隠すために使用されます。

例：

@media (min-width: 768px) and (max-width: 992px) {
  /* タブレット向けのスタイル（幅が768pxから992pxの間） */
}

@media (orientation: portrait), (max-width: 480px) {
  /* 縦向きモード、または小画面向けのスタイル */
}

@media not print {
  /* 印刷以外のすべてのメディアに適用されるスタイル */
}

2. メディアクエリの実戦ケース

2.1 画面サイズに応じたレイアウト調整

大画面では水平に表示し、小画面では垂直に表示したいナビゲーションメニューの例です。

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">概要</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Flexboxで水平レイアウトにする */
}

nav li {
  margin-right: 20px;
}

/* 768px未満の画面を対象としたメディアクエリ */
@media (max-width: 767px) {
  nav ul {
    flex-direction: column; /* 項目を垂直にスタックさせる */
  }
  nav li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

この例では、メニューはデフォルトで display: flex により水平に表示されます。しかし、画面幅が768px未満になるとメディアクエリが有効になり、flex-direction が column に変わることでメニュー項目が垂直に並びます。

2.2 フォントサイズの調整

画面サイズに応じてフォントサイズを調整し、モバイルデバイスでの可読性を高めます。

body {
  font-size: 16px; /* デフォルトのフォントサイズ */
}

/* 480px未満の画面を対象としたメディアクエリ */
@media (max-width: 479px) {
  body {
    font-size: 14px; /* 小画面では少し小さくする */
  }
}

/* 1200px以上の画面を対象としたメディアクエリ */
@media (min-width: 1200px) {
  body {
    font-size: 18px; /* 大画面では少し大きくする */
  }
}

2.3 要素の表示・非表示の切り替え

特定の画面サイズで要素を隠したり表示したりします。不要なコンテンツをモバイルで除外したり、デスクトップで追加情報を表示するのに役立ちます。

.desktop-only {
  display: block; /* デフォルトで表示 */
}

.mobile-only {
  display: none; /* デフォルトで非表示 */
}

/* 768px未満の画面を対象としたメディアクエリ */
@media (max-width: 767px) {
  .desktop-only {
    display: none; /* 小画面では隠す */
  }
  .mobile-only {
    display: block; /* 小画面では表示する */
  }
}

3. メディア特性の組み合わせ

複数の特性を組み合わせて、より精密なクエリを作成できます。例えば、縦向き（ポートレート）かつ最大幅が480pxのデバイスをターゲットにする場合：

@media (orientation: portrait) and (max-width: 480px) {
  /* 縦向きかつ小画面デバイスに適用されるスタイル */
}

4. ブレークポイント (Breakpoints)

ブレークポイントとは、ウェブサイトのレイアウトを変化させる特定の画面幅のポイントです。一般的なブレークポイントの目安は以下の通りです：

小画面 (スマートフォン): 480px以下
中画面 (タブレット): 481px 〜 768px
大画面 (デスクトップ): 769px 〜 1200px
超大画面 (ワイドデスクトップ): 1201px以上

これらはあくまでガイドラインです。デバイスのサイズを丸暗記するのではなく、実際のコンテンツに基づいてブレークポイントを選択すべきです。デザインをブラウザで伸縮させ、「表示が崩れる」または「見栄えが悪くなる」幅を見つけ、そこにブレークポイントを設定するのが最良の方法です。

4.1 ブレークポイントの使用例

/* デフォルトのスタイル */
body {
  font-size: 16px;
}
.container {
  width: 90%;
  margin: 0 auto;
}

/* 小画面 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
    padding: 10px;
  }
}

/* 中画面 */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 15px;
  }
  .container {
    width: 80%;
  }
}

/* 大画面 */
@media (min-width: 769px) and (max-width: 1200px) {
  body {
    font-size: 17px;
  }
  .container {
    width: 70%;
  }
}

/* 超大画面 */
@media (min-width: 1201px) {
  body {
    font-size: 18px;
  }
  .container {
    width: 60%;
  }
}

5. メディアクエリのベストプラクティス

モバイルファースト (Mobile-First): まず最小の画面向けにスタイルを設計し、メディアクエリを使用して大きな画面向けのスタイルを追加していきます。これにより、モバイルデバイスでのパフォーマンスが向上し、不要なスタイルの読み込みを避けられます。
相対単位を使用する: フォントサイズや要素の寸法には、できるだけ相対単位（%、em、rem）を使用しましょう。これにより、サイトのスケーリングがスムーズになります。
多様なデバイスでテストする: 実際のデバイスだけでなく、ブラウザのデベロッパーツールを使用して様々な画面サイズをエミュレートし、テストを行ってください。
コードの整理: メディアクエリをCSSファイルの下部にまとめたり、画面サイズごとにファイルを分けたりして、可読性とメンテナンス性を高めましょう。
複雑さを避ける: メディアクエリはできるだけシンプルに保ちます。複雑すぎるクエリは理解やデバッグを困難にします。
パフォーマンスへの配慮: メディアクエリ内のコード量に注意してください。膨大なコードはサイトの読み込み速度に影響を与える可能性があります。