CSSでメディアクエリを使う方法｜基礎から分かりやすく解説

レスポンシブデザインを実現するために欠かせないのが「メディアクエリ」です。画面サイズやデバイスの特性に応じてCSSを切り替えることで、どの端末からでも読みやすいレイアウトを作ることができます。
本記事では、メディアクエリの基本的な書き方から、よく使われるブレークポイント、実践向けの使い方まで丁寧に解説します。

関連して、CSS読み込みの基本を理解しておくと仕組みの把握がスムーズです。詳しくは wp_enqueue_style / wp_enqueue_script の基本 を参照してください。

メディアクエリとは

メディアクエリとは、画面幅・デバイス特性・向きなどの条件に応じてスタイルを適用するCSSの機能です。
レスポンシブデザインの実装では特に活用され、スマートフォン・タブレット・PCなど、幅の異なる環境でも快適な表示が実現できます。

基本の書き方

メディアクエリは次のように記述します。

@media (条件) {
  /* 条件を満たすときのスタイル */
}

例：画面幅が768px以下のとき

@media (max-width: 768px) {
  .container {
    padding: 16px;
  }
}

max-width は「〜以下」、min-width は「〜以上」を意味します。

よく使われる条件（ブレークポイント）

多くのWebサイトでは以下のような画面幅が基準として使われています。

ブレークポイントはサイトのレイアウトに合わせて自由に調整できます。

min-width と max-width の使い分け

● モバイルファーストの場合

min-width を使い、基本スタイルはスマートフォン向けに記述し、幅が広いデバイスに向けて追加していく方法です。

/* スマホ向け（基本スタイル） */
.text {
  font-size: 14px;
}

/* タブレット以上 */
@media (min-width: 600px) {
  .text {
    font-size: 16px;
  }
}

● PCファーストの場合

max-width を中心に、縮んだ画面向けにスタイルを上書きしていく方法です。

/* PC向け（基本スタイル） */
.text {
  font-size: 18px;
}

/* スマホ向け */
@media (max-width: 599px) {
  .text {
    font-size: 14px;
  }
}

サイトの設計方針に合わせて選ぶことができます。

画面の向き（縦・横）で切り替える方法

メディアクエリは画面の「向き（orientation）」にも対応しています。

@media (orientation: landscape) {
  .box {
    height: 200px;
  }
}

横向きだけスタイルを変更したい場合などに便利です。

デバイスピクセル比（解像度）で切り替える

Retinaディスプレイのような高解像度端末向けの画像切り替えも可能です。

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url("logo@2x.png");
  }
}

画像の最適化設定については WordPressの画像最適化ガイド（EWWW Image Optimizer編） の記事が参考になります。

実践例：レスポンシブな2カラムレイアウト

スマートフォンでは1カラム、タブレット以上では2カラムにする例です。

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

CSSレイアウトの基本は テーマファイルを編集する方法（初心者向け） を確認しておくと理解しやすくなります。

WordPressでメディアクエリを利用する際の補足

WordPressテーマを作成するときは、style.css の構造や読み込み順を意識することが重要です。
詳しくは 子テーマの作り方と functions.php を安全に編集する手順 にまとめられています。

メディアクエリを使う際の注意点

● ブレークポイントを増やしすぎない

トラブルシューティングが難しくなるため、必要最小限がおすすめです。

● 上書きの順番に注意

後から書いたCSSが優先されるため、意図しない上書きに気を付ける必要があります。

● 実機確認を行う

PCブラウザのデベロッパーツールだけでなく、実際のスマートフォンでも確認すると安心です。

まとめ

メディアクエリは、画面幅やデバイス特性に応じてスタイルを切り替えるための重要な仕組みです。
基本的な書き方を理解しておけば、スマートフォン・タブレット・PCのどれでも読みやすいレスポンシブデザインを実現できます。

• min-width と max-width を使い分ける
• 必要なブレークポイントだけを設定する
• レイアウトやUIに合わせて柔軟に適用する

関連するCSS/WordPressの基礎は以下の記事が参考になります。

• wp_enqueue_style / wp_enqueue_script の基本
• 子テーマの作り方と functions.php を安全に編集する手順
• WordPressテーマカスタマイズの基本と安全な作業手順