HTML/CSS入門編｜17章：レスポンシブデザインの基本を学ぼう

INDEX

前の章に戻る次の章に進む

HTML/CSS入門編 17章レスポンシブデザインの基本を学ぼう

本章では、Webサイトのデザインをさまざまな機器（デバイス）に対応させる技術であるレスポンシブデザインのコーディング方法を学びます。

【17-1】レスポンシブデザインとは？

レスポンシブデザインの概要を知ろう

レスポンシブデザイン（Responsive Design）とは、Webデザインの制作手法のひとつです。
PC、タブレット、スマートフォンなど、さまざまな種類や画面サイズの機器（デバイス）に対して、単一のHTMLファイルでブラウザ表示を最適化するWebサイトのデザインのことを、レスポンシブデザインといいます。
まずは、下の【画面収録】レスポンシブデザインのデモ動画を見て、レスポンシブデザインのWebサイトがどのようなものかを、確認してみましょう。

■ デバイスごとに異なるデザイン

【画面収録】レスポンシブデザインのデモ動画

HTML/CSS 17-1

ブラウザウインドウの幅を徐々に狭めていくと、途中で2回デザインが自動的に切り替わることを確認できると思います。
反対に、ブラウザ幅が狭い状態から徐々に広げていく過程でも、デザインが2回切り替わったことが確認できたと思います。
- 最も画面幅が広い状態で表示されるデザインがPC用のデザインです。
- 中間の、ヘッダーナビゲーションが隠れ、右上に白いハンバーガーメニュー（三本線の開閉式メニュー）が表示されるデザインがタブレット（iPadなど）用のデザインです。
- そして、最も画面幅が狭くなったときのデザインがスマートフォン用のデザインです。
- 画面幅に応じて適切なCSSが読み込まれる設定がされているために、このような変化が起こるのです。
このサイトは、標準的かつ模範的な設計仕様のもとに、レスポンシブデザインが実現されています。
現在のWebサイトは、レスポンシブデザインのコーディングを行い、さまざまな種類やサイズのデバイスに対して、レイアウトや画像・文字のサイズ、UI（ユーザー・インターフェース）の操作性を最適化させることが常識となっています。
したがって、Webデザイナー・コーダーを目指す人にとって、レスポンシブデザインのコーディング技術を身につけることは必須であると言えるでしょう。

なぜレスポンシブデザインが必要なの？

■スマートフォンやタブレットの普及

レスポンシブデザインは、スマートフォンやタブレットが普及したことにより、異なるデバイスごとに別々のサイトを作る手間をなくすために生まれました。
ひとつのWebページ（HTMLファイル）のブラウザ表示が、複数のデバイスに対して自動的に最適化されることは、ユーザーが快適に閲覧するために非常に重要です。

■モバイルファーストの時代

一般の人がインターネットを使用するためのデバイスとして、PCよりもスマートフォンが主流になったことは、レスポンシブデザインが必要とされる大きな理由となっています。
スマートフォンの主流化により、どんな画面サイズでも快適に表示されるサイト作りが求められるようになったのです。

重要：設計アプローチ「モバイルファースト」

レスポンシブサイトを制作する際、まずスマートフォン用のCSSを基本として記述し、その後、メディアクエリを使ってタブレット、PCと画面幅が広くなるにつれてスタイルを追加・上書きしていく手法を「モバイルファースト」と呼びます。

なぜ重要か：
- スマートフォンの利用者が大多数を占めるため、モバイル体験の質が最も重要視されます。
- Googleの検索順位評価もモバイル版のサイトが基準となっており、SEOの観点からも有利です。
- 小さい画面から作り始める方が、要素の追加やレイアウトの調整がしやすく、コードがシンプルになる傾向があります。
実装方法：
モバイルファーストでは、まずスマートフォン用のスタイルを記述し、@media (min-width: ...) を使って、指定した幅「以上」になった場合のスタイルを追加していきます。

現在のWeb制作ではこの「モバイルファースト」が主流のアプローチです。

【17-2】レスポンシブコーディングの手順を学ぼう

レスポンシブデザインのコーディングは、先述したように、PC、タブレット、スマートフォンなど、異なる画面サイズや解像度を持つデバイスで、Webサイトが最適に表示されるように行います。
具体的には、各デバイスに向けて異なるレイアウトやスタイルを適用するために、CSSのメディアクエリという書式を使用します。
メディアクエリを用いることで、ブラウザの画面幅に応じて、同一のHTMLファイルに対して適用されるCSSのコードを切り替え、デバイスごとに最適なスタイリングの制御を行います。

レスポンシブデザインのサイトをコーディングするために必要な知識は、それほど多くはありません。
右の基本的なレスポンシブコーディングの手順を、ポイントを押さえながら解説していきます。

レスポンシブコーディングの手順

ビューポート（viewport）の指定をする。
ブレイクポイント（Break points）を決める。
メディアクエリ（Media Queries）を記述する。
各デバイスに最適化したCSSコーディングを行う。
ブラウザプレビューをする。

それでは、レスポンシブコーディングの基本を学ぶための簡単なサンプルを作成してみたいと思います。

演習素材について
本章では、「17章レスポンシブデザインの基本を学ぼう」フォルダ内の演習データを使用します。
「17章レスポンシブデザインの基本を学ぼう」フォルダの中には、「start」「fin」フォルダが入っています。

「17章レスポンシブデザインの基本を学ぼう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

※「HTML/CSS入門編はじめに - Webページのことを知ろう」の「【0-4】HTML/CSS 入門編演習素材のダウンロード」節で、本教材の演習で使用するデータをまとめてダウンロードすることができます。

演習の準備として、「start」フォルダ内のindex.htmlをエディターで開いておきましょう。

1. ビューポート（viewport）の指定をする

ビューポートと仮想幅

ビューポートとは、モバイル端末のブラウザにおけるWebページの表示エリアのサイズ（幅・高さ）のことです。
通常、レスポンシブデザインに対応していないPC向けのWebサイトをスマートフォンで閲覧すると、ページ全体が自動的に縮小されて表示されます。
- 例えば、コンテンツ幅が950pxのWebサイトが、ビューポート幅320～430pxのiPhoneブラウザで表示されると、そのまま縮小されてぴったりと画面に収まります。
これは、iPhoneなど多くのモバイル端末のブラウザ幅が、仮想的に980pxに初期設定されているためです。
- つまり、スマートフォンブラウザの幅は320～430pxと機種により異なりますが（iPhoneのビューポート一覧表参照）、Webページを表示するときは一律980pxの幅として扱われるということです。
- この仮想的な幅のことを、正確にはレイアウトビューポート（layout viewport）と呼びますが、ビューポート（viewport）と混同しやすいので、本教材では仮想幅と呼ぶことにします。
- この仮想幅は、iPhone以外のAndroid端末では1024pxが設定されている機種もあります。
このようにWebサイト自体が縮小された場合、とくに文字サイズなどは小さくなり過ぎ、可読性や視認性が損なわれます。
そこで、レスポンシブ対応を行うことにより、モバイル端末での表示を最適化する必要があるのです。

■ iPhoneのビューポート一覧表

モデル	ビューポート
iPhone 8 / SE (2/3)	375 × 667
iPhone X / XS / 11 Pro	375 × 812
iPhone XR / 11	414 × 896
iPhone XS Max / 11 Pro Max	414 × 896
iPhone 12 mini	375 × 812
iPhone 12 / 13 / 14	390 × 844
iPhone 12/13 Pro Max	428 × 926
iPhone 14 Plus	428 × 926
iPhone 14 Pro Max	430 × 932
iPhone 15 / 15 Pro	393 × 852
iPhone 15 Plus / Pro Max	430 × 932
iPhone 16	393 × 852
iPhone 16 Plus	430 × 932

【図解】ビューポートと仮想幅

metaタグで仮想幅をビューポートに合わせる

レスポンシブデザインでモバイル端末向けのコーディングを行う際には、仮想幅の設定が、デバイス本来の画面幅（ビューポート）と一致するように設定を変更する必要があります。
なぜなら、この設定を行わないと、モバイル端末向けにCSSで要素のサイズ指定を行ったとしても、初期設定の仮想幅を基準として自動的に縮小されてしまい、意図したサイズで表示されなくなるからです。
そのために、 HTMLのmetaタグを使ってビューポートの設定を行い、各デバイスの画面幅に合わせたスタイリングができるようにします。

■ viewportの指定方法

headタグ内にmetaタグを記述します。
以下の設定方法がGoogleで推奨されています。
レスポンシブコーディング時には必須のコードです。

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

HTML/CSS入門編サンプルコード17-1

metaタグと各属性の解説

▪️metaタグ

metaタグは、ページの情報（メタ情報）をブラウザに伝えるためのタグです。

▪️name="viewport"

このmetaタグが「ビューポート」に関する設定であることを示しています。

▪️content="width=device-width, initial-scale=1.0"

content属性は、ビューポートの具体的な設定内容を指定するための属性です。

属性値	意味
▪️width=device-width	仮想幅を、デバイスの画面幅（ビューポート）に合わせる」という意味です。この属性値を指定すると、ページが自動で縮小されなくなります。
▪️initial-scale=1.0	初期表示の拡大率を100%に設定します（読み込み時の意図しない自動拡大・縮小を抑えます）。※ユーザーのピンチズームを無効化するものではありません。

■ viewportを指定する

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブデザインの基本を学ぼう</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1>レスポンシブデザインの基本を学ぼう</h1>
</body>

</html>

HTML/CSS入門編サンプルコード17-2

■ metaタグによるビューポートの指定

2. ブレイクポイント（Break points）を決める

ブレイクポイント（Break points）とは？

レスポンシブデザインは、ブラウザの画面幅（ビューポート）に応じて適切なCSSのコードに自動で切り替わる設定をすることにより実現します。
このとき、デザインが切り替わる画面幅のpx数値をブレイクポイントといいます。ブレイクポイントの数、また何pxの地点に設定するかには決まりがなく、制作者が自由に判断します。
判断の基準としては、
1. 制作時に主流となっているデバイスのサイズ（スマホ・タブレット・PCなど）
2. 制作するサイトのレイアウトやデザイン構造
これらを踏まえて適切なブレイクポイントの数と位置を決めます。
デバイスの種類や画面サイズは年々変化しているため、最新のシェア情報を確認しつつ、その時代に合わせたブレイクポイントを柔軟に設定することが重要です。
なお、おおまかな2025年時点でのブレイクポイントの目安は以下の通りですが、最終的にはサイトごとのデザインに合わせて調整しましょう。

■ 各デバイスごとのブレイクポイントの目安

デバイスの種類	ブレイクポイント
PC	1024px 〜
タブレット	481px〜1023px
スマートフォン	〜480px

※PC、タブレット、スマートフォン用にCSSを切り替える場合、ブレイクポイントの数は2つになります。
※サイトのデザインによっては、ノートPCとデスクトップPCの間にもブレイクポイントを設けるケースもあります。
※また、PCとモバイル端末の2パターンでCSSを切り替える場合は、ブレイクポイントは1つになります。

【図解】ブレイクポイント例

3. メディアクエリ（Media Queries）を記述する

メディアクエリとは、レスポンシブデザインを実現するためのCSSの仕様で、異なる画面サイズ（幅）に応じて適切なCSSを読み込んで適用する機能を実装できます。
これにより、PC、タブレット、スマートフォンなどの画面幅に合わせてWebページのデザインを自動的に切り替えることができます。
実際にメディアクエリを記述してみましょう。以下のレスポンシブ仕様でメディアクエリを記述し、ブレイクポイントを設定します。

■ サンプルページのレスポンシブ仕様

デバイスの種類	ブレイクポイント
PC	1024px以上
タブレット	481px以上
スマートフォン	すべての画面幅（基本のスタイル）

上記のレスポンシブ仕様をメディアクエリの書式で表現したものが、次のコードです。
- style.cssに記述しましょう。

■ サンプルページのメディアクエリ（style.css）

/* ここにスマホ共通のCSSを書く */

/* タブレット以上 */
@media (min-width: 481px) {
  /* ここにタブレット用のCSSを書く */
}

/* PC以上 */
@media (min-width: 1024px) {
  /* ここにPC用のCSSを書く */
}

HTML/CSS入門編サンプルコード17-3

■ メディアクエリの基本書式

/* 基本書式 */
@media (min-width または max-width による条件の設定) {
  /* 条件に当てはまるときに適用されるCSSをここに記述する */
}

メディアクエリの基本書式

条件が複数ある場合の書式

/* 条件が複数ある場合 */
@media (条件1の設定) and (条件2の設定) {
  /* 全ての条件に当てはまるときに適用されるCSSをここに記述する */
}

条件が複数ある場合の書式

メディアクエリの書式の解説

このように書くことで、指定した画面幅に応じてスタイルを切り替えることができます。
@media はメディアクエリの宣言です。
- 「条件に応じてこの中のCSSを適用します」という意味です。
min-width は「指定した幅以上」、max-width は「指定した幅以下」を表します。
条件が複数ある場合は、and（前後に半角スペースを空けます）で条件をつないでいきます。

4. 各デバイスに最適化したCSSコーディングを行う

メディアクエリの設定ができたら、あとは各デバイス用にスタイル設定をしていきます。
今回作成するサンプルページでは、h1要素を次の仕様でスタイリングします。

メディアクエリ	スタイル設定
PC用	文字サイズ　40px 文字色　#dd0000（赤）
タブレット用	文字サイズ　30px 文字色　#00dd00（緑）
スマートフォン用	文字サイズ　18px 文字色　#0000dd（青）

■ style.css

/* スマホ（基本） */
h1 {
  font-size: 18px;
  color: #0000dd;
}

/* タブレット以上 */
@media (min-width: 481px) {
  h1 {
    font-size: 30px;
    color: #00dd00;
  }
}

/* PC以上 */
@media (min-width: 1024px) {
  h1 {
    font-size: 40px;
    color: #dd0000;
  }
}

HTML/CSS入門編サンプルコード17-4

■ ブラウザプレビュー（ブラウザ幅1024px以上のとき）

■ ブラウザプレビュー（ブラウザ幅481px以上、1023px以下のとき）

5. ブラウザプレビューをする

デベロッパーツールを使って確認しよう

デベロッパーツールとは、Google Chromeに標準で搭載されている開発者用の検証ツールのことです。
HTML/CSSの検証や仮編集などの制作者にとって便利な機能が装備されています。
ここではレスポンシブデザインの画面表示を確認するためのモードの使い方を解説します。

レスポンシブデザインでは、メディアクエリでビューポート幅などに応じてCSSを切り替えます。
作業中のPCでも、ブラウザのウィンドウを狭めればレイアウトの切り替えを確認できます。
デスクトップ版の Chrome や Safari は約320px前後まで縮小できるため、たとえば「max-width: 480px」のブレークポイントも通常のプレビューで発火します。

ただし、実機に近い検証（デバイスピクセル比やタッチ操作、画面の向き変更、ユーザーエージェント差異、回線速度の制限など）まで行うには、Chrome DevTools の「デバイスモード（Toggle device toolbar）」を使うのが確実です。

【画面収録】chromeのデベロッパーツールによるレスポンシブデザインのブラウザプレビュー