レスポンシブデザインとメディアクエリ - CSS入門 — Flexbox & Gridレイアウト

スマートフォン・タブレット・PCなど、様々な画面サイズでも適切に表示されるデザインをレスポンシブデザインと呼びます。CSSではメディアクエリを使って、画面幅に応じてスタイルを切り替えます。

学習者

PCで作ったページをスマホで見たら崩れてた…。画面サイズごとにどう対応すればいいの？

メディアクエリの基本

/* 768px以上の画面幅のとき */
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}
 
/* 767px以下（スマートフォン） */
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
}

@media の中に書いたスタイルは、条件に一致するときだけ適用されます。

ブレークポイント

画面幅でスタイルが切り替わる境界値をブレークポイントと呼びます。Tailwind CSSなどのフレームワークの設定を参考に、よく使われる値があります。

名前	幅	対象
sm	640px	大きめのスマートフォン
md	768px	タブレット
lg	1024px	ノートPC
xl	1280px	デスクトップ
2xl	1536px	大画面

モバイルファースト

モバイルファーストは「まずスマートフォン向けのスタイルを書き、min-width で大きい画面向けを上書き」する設計方針です。

/* デフォルト：スマートフォン向け */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* 1列 */
  gap: 16px;
}
 
/* タブレット以上：2列 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
/* PC以上：3列 */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

逆の「デスクトップファースト（max-width で絞る）」より、モバイルファーストの方がCSSが複雑になりにくいです。

viewport メタタグ

HTMLの <head> に以下を書かないと、スマートフォンでメディアクエリが正しく機能しません。

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

相対単位の活用

固定ピクセルではなく相対単位を使うと、自然にレスポンシブになります。

単位	意味
`%`	親要素の幅に対する割合
`vw` / `vh`	ビューポートの幅 / 高さ
`rem`	ルート要素（html）のfont-sizeの倍数
`em`	親要素のfont-sizeの倍数
`clamp()`	最小・推奨・最大値を一度に指定

/* font-size をビューポートに応じて滑らかに変化 */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}
 
/* 幅は最大 1200px、それ以下では全幅 */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

ちゃんと使うためのポイント

viewport メタタグは必ず書く
min-width でモバイルファーストに書くのが保守しやすい
ブレークポイントはプロジェクト内で統一する（Tailwindの値を参考にするとよい）
固定ピクセルを避け rem や % を使うと自然にレスポンシブになる

次の章では、テキストとフォントのスタイリングを学びます。