ウェブサイトをスマートフォン・タブレット・PCなど、さまざまなデバイスで快適に見せるための技術がレスポンシブWebデザインです。1つのHTMLソースコードで画面幅に応じてレイアウトを自動調整できるため、現代のWeb制作では欠かせないスキルのひとつです。
ここでは、レスポンシブ対応に必要なHTMLの設定方法、CSSのメディアクエリの書き方、ブレイクポイントの考え方、そして画像のレスポンシブ対応まで、基礎からまとめて解説します。
レスポンシブ対応とは
レスポンシブ対応とは、ウェブサイトを閲覧するデバイスの画面サイズに応じて、ページのデザインやレイアウトを最適化して表示させることです。
PC用・スマホ用にそれぞれ別のHTMLを用意するのではなく、1つのHTMLソースで複数の画面幅に対応できるのが大きな利点です。
HTMLへのviewport設定
レスポンシブ対応の第一歩として、HTMLの <head> タグ内にviewportメタタグを追加します。これにより、デバイスの実際の画面幅を基準にページが描画されるようになります。
<!-- <head> タグ内に記述 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
このタグを書かないと、スマートフォンでもPC用の幅で表示されてしまい、レスポンシブが正常に機能しません。必ず記述するようにしましょう。
メディアクエリ（Media Queries）の基本
メディアクエリとは、画面の横幅などの条件に応じてCSSを切り替える仕組みです。「PCでは横並び、スマホでは縦並び」といったレイアウト切り替えが実現できます。
記述の書き方
/* 画面の横幅が 768px 以上の場合に適用 */
@media screen and (min-width: 768px) {
/* ここにPC用のスタイルを書く */
}
/* 画面の横幅が 768px 以下の場合に適用 */
@media screen and (max-width: 768px) {
/* ここにスマホ用のスタイルを書く */
}
ブレイクポイントとは
レイアウトが切り替わる画面幅の境界値をブレイクポイントといいます。よく使われる設定値は以下の通りです。
| デバイス | ブレイクポイントの目安 |
|---|---|
| スマートフォン | 〜 768px |
| タブレット | 768px 〜 1024px |
| ラップトップ・PC | 1024px 〜 |
※ ブレイクポイントの値はプロジェクトによって異なります。上記は一般的な目安です。
CSSでのレスポンシブ実装例
実際のコードでは、まずPC用のスタイルを書いてから、メディアクエリでスマホ・タブレット向けのスタイルを上書きしていきます。
/* --- 1. PC用のスタイル（基準） --- */
.container {
display: flex; /* 横並び */
justify-content: space-between;
padding: 40px;
}
/* --- 2. 画面幅が 1024px 以下になった時（タブレット用） --- */
@media screen and (max-width: 1024px) {
.container {
padding: 20px; /* 余白を少し狭める */
}
}
/* --- 3. 画面幅が 768px 以下になった時（スマホ用） --- */
@media screen and (max-width: 768px) {
.container {
display: block; /* 縦並びに切り替え */
}
}
このようにメディアクエリを後から書くことで、画面幅に応じてスタイルが上書きされ、デバイスごとに最適な表示が実現します。
レスポンシブな画像対応
画像もレスポンシブ対応が必要です。まずは以下のCSSを適用するだけで、親要素の幅に合わせて画像が自動縮小されます。
CSSで自動縮小する方法（まず覚える基本）
img {
max-width: 100%; /* 親要素の幅に合わせて縮小 */
height: auto; /* 縦横比を保つ */
}
これを指定すると、画面やコンテナ幅に応じて画像が自動的にリサイズされ、はみ出すことがなくなります。
picureタグで画像を切り替える方法
PC用とスマホ用で画像ファイルそのものを切り替えたい場合は、<picture> タグを使います。
<picture>
<!-- スマホ用（768px 未満） -->
<source media="(max-width: 767px)" srcset="sp-image.jpg">
<!-- PC用（デフォルト） -->
<img src="pc-image.jpg" alt="画像の説明">
</picture>
srcset属性（解像度対応）
Retina（高解像度）ディスプレイへの対応には、srcset 属性が使えます。ブラウザが画面解像度に合わせて最適な画像を自動選択してくれます。
<img src="image-low.jpg"
srcset="image-high.jpg 2x, image-low.jpg 1x"
alt="画像の説明">
初学者のうちは、まず max-width: 100%; height: auto; のCSS設定を覚えれば十分です。<picture> タグや srcset は「こういう方法もある」という知識として頭に入れておきましょう。
モバイルファーストという考え方
「まずスマホ用のコードを書き、後からメディアクエリでPC用の設定を追加する」手法をモバイルファーストといいます。制限の多いスマホ環境を先に整理することで、コードがシンプルになりやすく、読み込み速度の向上にも繋がります。
ただし、最初からモバイルファーストを意識しすぎる必要はありません。まずはPCでしっかり表示できるサイトを作りながら、スマホ対応を学んでいくのがおすすめです。
Webレイアウトの種類
ここまで学んだレスポンシブレイアウト以外にも、Web制作で使われるレイアウト手法があります。
| レイアウト名 | 概要 | 特徴 |
|---|---|---|
| レスポンシブ | ブレイクポイントでレイアウトを切り替える | デバイスごとに最適な表示が可能 |
| リキッド | コンテンツ幅を % などでシームレスに変化させる | どんな横幅でも常に100%表示 |
| フレキシブル | リキッドに min-width / max-width 制限を加える | 極端な崩れを防げる |
| グリット | display: grid でタイル状に配置する |
複雑な配置・順序変更が容易 |
まとめ
- レスポンシブ対応とは、1つのHTMLで異なるデバイスの画面幅に対応させることです。
<meta name="viewport">タグは必ず<head>内に記述します。- メディアクエリ（
@media screen and (...)）で画面幅ごとにCSSを切り替えます。 - ブレイクポイントはスマホ 768px・タブレット 1024px が目安です。
- 画像は
max-width: 100%; height: auto;を基本に設定します。 - モバイルファーストはコードをシンプルに保ちやすい手法ですが、最初はPC優先で学ぶのもOKです。
まずはviewportの設定とメディアクエリの基本構文を手を動かして試してみましょう。実際にブラウザの幅を動かしながら確認するのが、レスポンシブを身につける一番の近道です。
