レスポンシブデザインとは？

読み方：れすぽんしぶでざいん

最終更新：2026/08/18

3秒でわかる

1つのHTMLのまま画面幅に応じて段組みや文字サイズを切り替える作り方。PC用とスマホ用にページを分けずに済ませられます。

30秒図解

レスポンシブデザインは1つのHTMLを画面幅で組み替え、広い幅は3列、狭い幅は1列にする設計 — レスポンシブデザインは1つのHTMLを使い、狭い幅では1列、768px以上では2列、1024px以上では3列にCSSで組み替えます。

もう少し詳しく

どういうものか

レスポンシブデザインは、PC用とスマホ用でページを作り分けるのではなく、同じHTMLとCSSのまま画面幅に応じてレイアウトを変える手法です。幅が広いときは3列、狭いときは1列に落とす、といった切り替えをCSS側で行います。URLが1本で済むため、共有もされやすく、検索エンジンから見ても評価が分散しません。

なぜ必要か

閲覧環境の幅は、スマホの360pxから27インチの外部ディスプレイまで連続的に分布しています。想定した数機種だけに合わせて固定幅で作ると、その間の幅で横スクロールが出たり、文字が極端に小さくなったりします。幅を条件にして組み替える作りにしておけば、まだ存在しない画面サイズにもある程度耐えます。

具体例

/* まず狭い画面の見た目を書き、広い画面を後から足す */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }

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

/* <a href="/glossary/media-query" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">メディアクエリ</a>を使わずに折り返す書き方もある */
.auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

HTML側ではを必ず入れます。この1行が無いと、スマホは幅980pxの仮想画面として描画し、CSSの分岐が意図どおりに働きません。

つまずきやすいところ

画像や長いURL文字列が親要素からはみ出し、ページ全体に横スクロールが出る事故が多く起きます。画像には max-width を100%として指定し、表やコードブロックは自前のスクロール領域に閉じ込めます。もうひとつは、幅だけを見て「スマホかどうか」を判定してしまうことです。タブレットの縦置きやPCの分割表示もあるため、機種ではなく幅そのものに合わせて組みます。

覚え方

狭い画面から書き始めて広い画面を足していく順序(モバイルファースト)にすると、打ち消しのCSSが減ります。

似た用語との違い

手法	やり方
レスポンシブ	1つのHTMLを幅に応じて連続的に組み替える
アダプティブ	数個の決まった幅ごとに別レイアウトを用意する
別URL方式	スマホ用に別ドメインやパスを用意して振り分ける

別URL方式は同じ内容が2か所に存在するため、両方の保守と正規URLの指定が必要になります。