Web制作コラム

レスポンシブデザインとは｜1つのHTMLで画面幅に合わせる仕組み

用語・技術解説2026.09.11

パソコンとスマホで同じHTMLを使い、見せ方だけを変える作り方です。仕組みと、実務でのブレークポイントの決め方をまとめます。

レスポンシブデザインとは、1つのHTMLを画面の幅に応じて並べ替えて見せる作り方です。パソコン用とスマホ用でページを分けるのではなく、同じ中身に対してCSSの指定だけを切り替えます。

仕組みは2つだけ

1. viewport の指定

これが無いと、スマホはパソコン用の幅でページを描いて全体を縮小します。文字が読めないほど小さくなるのはこのためです。

head の中

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

2. メディアクエリ

画面幅の条件を付けて、その幅のときだけ効くCSSを書きます。下の例では、画面幅が834px以下のときだけ1列に変わります。

CSS

.cards { display: grid; grid-template-columns: repeat(3, 1fr); }

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

ブレークポイントは端末名で決めない

端末の種類に合わせて何段も作ると、新しい機種が出るたびに見直すことになります。実務では、レイアウトが破綻する幅で切るのが基本です。多くのサイトは次の2か所で足ります。

834px … タブレット縦を含む、横並びが苦しくなる幅
640px前後 … スマホ。ここで1列にする

段を増やすほど確認する組み合わせが増えます。3段で足りるなら3段にしてください。

幅を固定しない書き方にしておく

メディアクエリの数を減らす一番の方法は、そもそも幅を px で固定しないことです。

要素の幅は % や grid に任せ、px で決め打ちしない
画像は max-width: 100% を基本にする
余白も画面幅に応じて変わる指定を使う
表やコードは、横スクロールできる入れ物に入れる

モバイルファーストとPCファースト

レスポンシブには、どちらを基本として書くかという2つの流派があります。メディアクエリを min-width で書くか max-width で書くかの違いです。同じ見た目を作れますが、書き方の向きが逆になります。

モバイルファースト｜スマホを基本にして、広い画面で足す

メディアクエリの外に書くCSSをスマホ向けにします。そして、パソコンで見せ方が変わる箇所だけを min-width の中に書きます。

CSS（モバイルファースト）

/* ここは全画面共通 = スマホの見た目 */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 画面が 768px 以上のときだけ上書きする */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

スマホでは追加のCSSを読む必要がなく、指定の数も少なく済みます。新規に作る案件では、こちらを基本にするのが一般的です。

PCファースト｜パソコンを基本にして、狭い画面で上書きする

逆に、メディアクエリの外をパソコン向けに書き、スマホで変わる箇所を max-width の中に書きます。

CSS（PCファースト）

/* ここは全画面共通 = パソコンの見た目 */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 画面が 767px 以下のときだけ上書きする */
@media (max-width: 767px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

すでにパソコン向けに作られているサイトへ、後からスマホ対応を足す場合はこちらになります。既存のCSSを書き換えずに済むためです。