レスポンシブデザイン入門 ― スマホ対応の基本

レスポンシブって何？

レスポンシブデザイン（Responsive Design）とは、スマホ・タブレット・PC など画面サイズに応じてレイアウトが自動で変わるデザインのこと。

📱

スマートフォン

〜 767px

💻

PC・デスクトップ

1024px 〜

今や Web へのアクセスの半分以上はスマホから。スマホ対応していないサイトは Google の検索順位でも不利になるし、ユーザーはすぐ離脱してしまう。

✦ 絶対に最初に書くこと

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

これが <head> にないと、スマホでは PC サイトを縮小した表示になってしまう。 CSS を何も書く前に、まずこれを確認しよう。

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

レスポンシブの核心は メディアクエリ（@media）。「画面幅が〇〇px 以上の時だけこの CSS を適用する」という条件分岐。

メディアクエリの基本

/* デフォルト（スマホ向け）の CSS */
.container {
  padding: 16px;
}

/* タブレット以上（768px〜）で上書き */
@media (min-width: 768px) {
  .container {
    padding: 32px;
  }
}

/* PC以上（1024px〜）でさらに上書き */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px;
  }
}

ブレークポイントの目安

Tablet

Desktop

〜767pxスマホ向けベース

768px〜タブレット対応

1024px〜PC対応

モバイルファーストで書こう

レスポンシブには2つのアプローチがある。

デスクトップファースト（古い方法）
PC 向けを先に書いて、max-width でスマホを上書きする。昔は主流だったけど今は非推奨。
モバイルファースト（現代の標準）
スマホ向けをベースに書いて、min-width で大きな画面を上書きする。Google も推奨するアプローチ。

💡 なぜモバイルファーストがいいの？

スマホのデザインはシンプル = 本当に必要な要素だけになる。それを広い画面に拡張するほうが、 PC から削ぎ落とすより圧倒的にやりやすい。パフォーマンスも良くなる。

縦並び → 横並びが基本パターン

レスポンシブの9割はこれ。スマホでは縦1列、PC では横並び。 Flexbox か Grid を使えば驚くほど簡単に実現できる。

📱 スマホ（縦1列）

カード 1

カード 2

カード 3

💻 PC（横3列）

✅ Flexbox でのレスポンシブカード

.card-grid {
  display: flex;
  flex-direction: column; /* スマホ：縦並び */
  gap: 16px;
}

@media (min-width: 768px) {
  .card-grid {
    flex-direction: row; /* タブレット以上：横並び */
    flex-wrap: wrap;
  }
  .card {
    flex: 1 1 calc(50% - 8px); /* 2列 */
  }
}

@media (min-width: 1024px) {
  .card {
    flex: 1 1 calc(33% - 11px); /* 3列 */
  }
}

Grid を使うともっとシンプル

✅ Grid でのレスポンシブカード（より短い）

.card-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホ：1列 */
  gap: 16px;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr); /* 3列 */
  }
}

文字サイズもレスポンシブに

レイアウトだけじゃなく、文字サイズもスマホと PC で変えよう。 clamp() を使えばメディアクエリなしで自動的に拡縮できる。

clamp() で自動的に拡縮する文字サイズ

h1 {
  /* clamp(最小値, 推奨値, 最大値) */
  font-size: clamp(28px, 5vw, 56px);
  /* スマホで28px、PC で56px、その間は画面幅に応じて変化 */
}

body {
  font-size: clamp(15px, 1.5vw, 18px);
}

まとめ ― レスポンシブの3大原則

<meta name="viewport"> を必ず <head> に書く。これがないとスマホ表示が壊れる。
モバイルファーストで書く。スマホ向けをベースに min-width で大きな画面を上書き。
縦1列 → 横並びが基本パターン。Flexbox か Grid と @media の組み合わせで実現。

最初は難しく感じるけど、パターンは決まっている。何度か書いていれば体が覚えてくるよ。まず1ページ作ってみよう。