CSS レスポンシブメディアクエリ

CSSメディアクエリ入門
レスポンシブデザインの基本

メディアクエリを使えば、画面サイズに応じてCSSを切り替え、スマホ・タブレット・PCに対応したレスポンシブデザインを実現できます。

こんな人向けの記事です

スマホ対応のWebサイトを作りたい
メディアクエリの書き方を知りたい
モバイルファーストの考え方を理解したい

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

@media ルールで画面幅などの条件を指定し、その条件を満たす時だけCSSを適用します。

CSS

/* 画面幅が768px以下の時に適用 */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  .sidebar {
    display: none;
  }
}

/* 画面幅が768px以上の時に適用 */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

max-width と min-width の違い

max-width: 768px → 768px以下の時に適用
min-width: 768px → 768px以上の時に適用

Step 2よく使うブレークポイント

デバイス	幅	メディアクエリ
スマホ（縦）	〜575px	`@media (max-width: 575px)`
スマホ（横）	576px〜767px	`@media (min-width: 576px)`
タブレット	768px〜991px	`@media (min-width: 768px)`
デスクトップ	992px〜1199px	`@media (min-width: 992px)`
大画面	1200px〜	`@media (min-width: 1200px)`

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

モバイルファースト（推奨）

まずスマホ向けのCSSを書き、min-width で大きい画面用のスタイルを追加していきます。

CSS

/* ベース：スマホ向け */
.grid {
  display: grid;
  grid-template-columns: 1fr;  /* 1列 */
}

/* タブレット以上 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;  /* 2列 */
  }
}

/* デスクトップ以上 */
@media (min-width: 992px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;  /* 3列 */
  }
}

デスクトップファースト

PC向けのCSSをベースに書き、max-width で小さい画面用に調整します。

CSS

/* ベース：PC向け */
.grid {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 991px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

viewportメタタグを忘れずに

レスポンシブデザインを機能させるには、HTMLの<head>内に以下を必ず記述してください。
<meta name="viewport" content="width=device-width, initial-scale=1">

Step 4実践：レスポンシブレイアウト

CSS

/* ナビゲーション：スマホで縦並び、PCで横並び */
.nav {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    gap: 20px;
  }
}

/* メイン + サイドバー：スマホで1列、PCで2列 */
.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .layout {
    grid-template-columns: 1fr 300px;
    gap: 30px;
  }
}

Step 5便利なメディアクエリの活用例

印刷用スタイル

CSS

@media print {
  .no-print { display: none; }
  body { font-size: 12pt; }
}

ダークモード対応

CSS

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e0e0e0;
  }
}

複数条件の組み合わせ

CSS

/* 768px〜991pxの範囲のみ */
@media (min-width: 768px) and (max-width: 991px) {
  .tablet-only { display: block; }
}

まとめ

@media (min-width: ...) / (max-width: ...) で画面幅に応じてCSS切り替え
モバイルファースト（min-width）が推奨
viewport メタタグは必須
印刷用、ダークモード対応にも使える
ブレークポイントは Bootstrap 準拠の 576/768/992/1200px が一般的

CSSメディアクエリ入門レスポンシブデザインの基本