INDEX
目次
HTML/CSS入門編 17章 レスポンシブデザインの基本を学ぼう
本章では、Webサイトのデザインをさまざまな機器（デバイス）に対応させる技術であるレスポンシブデザインのコーディング方法を学びます。
【17-1】レスポンシブデザインとは？
レスポンシブデザインの概要を知ろう
・レスポンシブデザイン（Responsive Design）とは、Webデザインの制作手法のひとつです。
・PC、タブレット、スマートフォンなど、さまざまな種類や画面サイズの機器（デバイス）に対して、単一のHTMLファイルでブラウザ表示を最適化するWebサイトのデザインのことを、レスポンシブデザインといいます。
・まずは、下の【画面収録】レスポンシブデザインのデモ動画を見て、レスポンシブデザインのWebサイトがどのようなものかを、確認してみましょう。
・ブラウザウインドウの幅を徐々に狭めていくと、途中で2回デザインが自動的に切り替わることを確認できると思います。
・反対に、ブラウザ幅が狭い状態から徐々に広げていく過程でも、デザインが2回切り替わったことが確認できたと思います。
◦最も画面幅が広い状態で表示されるデザインがPC用のデザインです。
◦中間の、ヘッダーナビゲーションが隠れ、右上に白いハンバーガーメニュー（三本線の開閉式メニュー）が表示されるデザインがタブレット（iPadなど）用のデザインです。
◦そして、最も画面幅が狭くなったときのデザインがスマートフォン用のデザインです。
◦画面幅に応じて適切なCSSが読み込まれる設定がされているために、このような変化が起こるのです。
・このサイトは、標準的かつ模範的な設計仕様のもとに、レスポンシブデザインが実現されています。
・現在のWebサイトは、レスポンシブデザインのコーディングを行い、さまざまな種類やサイズのデバイスに対して、レイアウトや画像・文字のサイズ、UI（ユーザー・インターフェース）の操作性を最適化させることが常識となっています。
・したがって、Webデザイナー・コーダーを目指す人にとって、レスポンシブデザインのコーディング技術を身につけることは必須であると言えるでしょう。
・PC、タブレット、スマートフォンなど、さまざまな種類や画面サイズの機器（デバイス）に対して、単一のHTMLファイルでブラウザ表示を最適化するWebサイトのデザインのことを、レスポンシブデザインといいます。
・まずは、下の【画面収録】レスポンシブデザインのデモ動画を見て、レスポンシブデザインのWebサイトがどのようなものかを、確認してみましょう。
・ブラウザウインドウの幅を徐々に狭めていくと、途中で2回デザインが自動的に切り替わることを確認できると思います。
・反対に、ブラウザ幅が狭い状態から徐々に広げていく過程でも、デザインが2回切り替わったことが確認できたと思います。
◦最も画面幅が広い状態で表示されるデザインがPC用のデザインです。
◦中間の、ヘッダーナビゲーションが隠れ、右上に白いハンバーガーメニュー（三本線の開閉式メニュー）が表示されるデザインがタブレット（iPadなど）用のデザインです。
◦そして、最も画面幅が狭くなったときのデザインがスマートフォン用のデザインです。
◦画面幅に応じて適切なCSSが読み込まれる設定がされているために、このような変化が起こるのです。
・このサイトは、標準的かつ模範的な設計仕様のもとに、レスポンシブデザインが実現されています。
・現在のWebサイトは、レスポンシブデザインのコーディングを行い、さまざまな種類やサイズのデバイスに対して、レイアウトや画像・文字のサイズ、UI（ユーザー・インターフェース）の操作性を最適化させることが常識となっています。
・したがって、Webデザイナー・コーダーを目指す人にとって、レスポンシブデザインのコーディング技術を身につけることは必須であると言えるでしょう。
デバイスごとに異なるデザイン
【画面収録】レスポンシブデザインのデモ動画
なぜレスポンシブデザインが必要なの？
スマートフォンやタブレットの普及
- レスポンシブデザインは、スマートフォンやタブレットが普及したことにより、
異なるデバイスごとに別々のサイトを作る手間をなくすために生まれました。 - ひとつのWebページ（HTMLファイル）のブラウザ表示が、複数のデバイスに対して自動的に最適化されることは、ユーザーが快適に閲覧するために非常に重要です。
モバイルファーストの時代
- 一般の人がインターネットを使用するためのデバイスとして、PCよりも
スマートフォンが主流になったことは、レスポンシブデザインが必要とされる大きな理由となっています。 - スマートフォンの主流化により、
どんな画面サイズでも快適に表示されるサイト作りが求められるようになったのです。
【17-2】レスポンシブコーディングの手順を学ぼう
・レスポンシブデザインのコーディングは、先述したように、PC、タブレット、スマートフォンなど、異なる画面サイズや解像度を持つデバイスで、Webサイトが最適に表示されるように行います。
・具体的には、各デバイスに向けて異なるレイアウトやスタイルを適用するために、CSSのメディアクエリという書式を使用します。
・メディアクエリを用いることで、ブラウザの画面幅に応じて、同一のHTMLファイルに対して適用されるCSSのコードを切り替え、デバイスごとに最適なスタイリングの制御を行います。
・レスポンシブデザインのサイトをコーディングするために必要な知識は、それほど多くはありません。
・右の基本的なレスポンシブコーディングの手順を、ポイントを押さえながら解説していきます。
・具体的には、各デバイスに向けて異なるレイアウトやスタイルを適用するために、CSSのメディアクエリという書式を使用します。
・メディアクエリを用いることで、ブラウザの画面幅に応じて、同一のHTMLファイルに対して適用されるCSSのコードを切り替え、デバイスごとに最適なスタイリングの制御を行います。
・レスポンシブデザインのサイトをコーディングするために必要な知識は、それほど多くはありません。
・右の基本的なレスポンシブコーディングの手順を、ポイントを押さえながら解説していきます。
レスポンシブコーディングの手順
- ビューポート (viewport) の指定をする。
- ブレイクポイント (Break points) を決める。
- メディアクエリ (Media Queries) を記述する。
- 各デバイスに最適化したCSSコーディングを行う。
- ブラウザプレビューをする。
それでは、レスポンシブコーディングの基本を学ぶための簡単なサンプルを作成してみたいと思います。
演習素材について
本章では、「17章レスポンシブデザインの基本を学ぼう」フォルダ内の演習データを使用します。
「17章レスポンシブデザインの基本を学ぼう」フォルダの中には、「start」と「fin」フォルダが入っています。
「17章レスポンシブデザインの基本を学ぼう」フォルダ ├ 「start」フォルダ └ 「fin」フォルダ
- 「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サイト自体が縮小された場合、とくに文字サイズなどは小さくなり過ぎ、可読性や視認性が損なわれます。
・そこで、レスポンシブ対応を行うことにより、モバイル端末での表示を最適化する必要があるのです。
・通常、レスポンシブデザインに対応していないPC向けのWebサイトをスマートフォンで閲覧すると、ページ全体が自動的に縮小されて表示されます。
◦例えば、コンテンツ幅が950pxのWebサイトが、ビューポート幅320～430pxのiPhoneブラウザで表示されると、そのまま縮小されてぴったりと画面に収まります。
・これは、iPhoneなど多くのモバイル端末のブラウザ幅が、仮想的に980pxに初期設定されているためです。
◦つまり、スマートフォンブラウザの幅は320～430pxと機種により異なりますが（iphoneのビューポート一覧表参照）、Webページを表示するときは一律980pxの幅として扱われるということです。
◦この仮想的な幅のことを、正確にはレイアウトビューポート（layout viewport）と呼びますが、ビューポート（viewport）と混同しやすいので、本教材では仮想幅と呼ぶことにします。
◦この仮想幅は、iphone以外のAndroid端末では1024pxが設定されている機種もあります。
・このようにWebサイト自体が縮小された場合、とくに文字サイズなどは小さくなり過ぎ、可読性や視認性が損なわれます。
・そこで、レスポンシブ対応を行うことにより、モバイル端末での表示を最適化する必要があるのです。
iphoneのビューポート一覧表
【図解】ビューポートと仮想幅
metaタグで仮想幅をビューポートに合わせる
・レスポンシブデザインでモバイル端末向けのコーディングを行う際には、仮想幅の設定が、デバイス本来の画面幅（ビューポート）と一致するように設定を変更する必要があります。
・なぜなら、この設定を行わないと、モバイル端末向けにCSSで要素のサイズ指定を行ったとしても、初期設定の仮想幅を基準として自動的に縮小されてしまい、意図したサイズで表示されなくなるからです。
・そのために、HTMLのmetaタグを使ってビューポートの設定を行い、各デバイスの画面幅に合わせたスタイリングができるようにします。
・なぜなら、この設定を行わないと、モバイル端末向けにCSSで要素のサイズ指定を行ったとしても、初期設定の仮想幅を基準として自動的に縮小されてしまい、意図したサイズで表示されなくなるからです。
・そのために、HTMLのmetaタグを使ってビューポートの設定を行い、各デバイスの画面幅に合わせたスタイリングができるようにします。
■ viewportの指定方法
viewportの指定方法
headタグ内にmetaタグを記述します。
以下の設定方法がGoogleで推奨されています。
レスポンシブコーディング時には必須のコードです。
以下の設定方法がGoogleで推奨されています。
レスポンシブコーディング時には必須のコードです。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
サンプルコード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>
サンプルコード17－2
metaタグによるビューポートの指定
2. ブレイクポイント（Break points）を決める
ブレイクポイント（Break points）とは？
・レスポンシブデザインは、ブラウザの画面幅（ビューポート）に応じて適切なCSSのコードに自動で切り替わる設定をすることにより実現します。
・このとき、デザインが切り替わる画面幅のpx数値をブレイクポイントといいます。 ブレイクポイントの数、また何pxの地点に設定するかには決まりがなく、制作者が自由に判断します。
・判断の基準としては、
1. 制作時に主流となっているデバイスのサイズ（スマホ・タブレット・PCなど）
2. 制作するサイトのレイアウトやデザイン構造
これらを踏まえて適切なブレイクポイントの数と位置を決めます。
・デバイスの種類や画面サイズは年々変化しているため、最新のシェア情報を確認しつつ、その時代に合わせたブレイクポイントを柔軟に設定することが重要です。
・なお、おおまかな2025年時点でのブレイクポイントの目安は以下の通りですが、最終的にはサイトごとのデザインに合わせて調整しましょう。
・このとき、デザインが切り替わる画面幅のpx数値をブレイクポイントといいます。 ブレイクポイントの数、また何pxの地点に設定するかには決まりがなく、制作者が自由に判断します。
・判断の基準としては、
1. 制作時に主流となっているデバイスのサイズ（スマホ・タブレット・PCなど）
2. 制作するサイトのレイアウトやデザイン構造
これらを踏まえて適切なブレイクポイントの数と位置を決めます。
・デバイスの種類や画面サイズは年々変化しているため、最新のシェア情報を確認しつつ、その時代に合わせたブレイクポイントを柔軟に設定することが重要です。
・なお、おおまかな2025年時点でのブレイクポイントの目安は以下の通りですが、最終的にはサイトごとのデザインに合わせて調整しましょう。
■ 各デバイスごとのブレイクポイントの目安
※PC、タブレット、スマートフォン用にCSSを切り替える場合、ブレイクポイントの数は2つになります。
※サイトのデザインによっては、ノートPCとデスクトップPCの間にもブレイクポイントを設けるケースもあります。
※また、PCとモバイル端末の2パターンでCSSを切り替える場合は、ブレイクポイントは1つになります。
※サイトのデザインによっては、ノートPCとデスクトップPCの間にもブレイクポイントを設けるケースもあります。
※また、PCとモバイル端末の2パターンでCSSを切り替える場合は、ブレイクポイントは1つになります。
【図解】ブレイクポイント例
3. メディアクエリ（Media Queries）を記述する
・メディアクエリとは、レスポンシブデザインを実現するためのCSSの仕様で、異なる画面サイズ（幅）に応じて適切なCSSを読み込んで適用する機能を実装できます。
・これにより、PC、タブレット、スマートフォンなどの画面幅に合わせてWebページのデザインを自動的に切り替えることができます。
・実際にメディアクエリを記述してみましょう。以下のレスポンシブ仕様でメディアクエリを記述し、ブレイクポイントを設定します。
・これにより、PC、タブレット、スマートフォンなどの画面幅に合わせてWebページのデザインを自動的に切り替えることができます。
・実際にメディアクエリを記述してみましょう。以下のレスポンシブ仕様でメディアクエリを記述し、ブレイクポイントを設定します。
■ サンプルページのレスポンシブ仕様
・上記のレスポンシブ仕様をメディアクエリの書式で表現したものが、次のコードです。
◦ style.cssに記述しましょう。
◦ style.cssに記述しましょう。
■ サンプルページのメディアクエリ（style.css）
/*PC用メディアクエリ*/
@media (min-width: 1024px) {
/* ここにPC用のCSSを記述する*/
}
/*タブレット用メディアクエリ*/
@media (min-width: 481px) and (max-width: 1023px) {
/* ここにタブレット用のCSSを記述する*/
}
/*スマートフォン用メディアクエリ*/
@media (max-width: 480px) {
/* ここにスマートフォン用のCSSを記述する*/
}サンプルコード17－3
■ メディアクエリの基本書式
/* 基本書式 */
@media (min-width または max-width による条件の設定) {
/* 条件に当てはまるときに適用されるCSSをここに記述する */
}サンプルコード17－4
■ 条件が複数ある場合の書式
/* 条件が複数ある場合 */
@media (条件1の設定) and (条件2の設定) {
/* 全ての条件に当てはまるときに適用されるCSSをここに記述する */
}サンプルコード17－5
メディアクエリの書式の解説
- このように書くことで、指定した画面幅に応じてスタイルを切り替えることができます。
@mediaはメディアクエリの宣言です。- 「条件に応じてこの中のCSSを適用します」という意味です。
min-widthは「指定した幅以上」、max-widthは「指定した幅以下」を表します。- 条件が複数ある場合は、
and（前後に半角スペースを空けます）で条件をつないでいきます。
4. 各デバイスに最適化したCSSコーディングを行う
メディアクエリの設定ができたら、あとは各デバイス用にスタイル設定をしていきます。
今回作成するサンプルページでは、h1要素を次の仕様でスタイリングします。
今回作成するサンプルページでは、h1要素を次の仕様でスタイリングします。
■ style.css
/*PC用メディアクエリ*/
@media (min-width: 1024px) {
/* ここにPC用のCSSを記述する*/
h1 {
font-size: 40px;
color: #dd0000;
}
}
/*タブレット用メディアクエリ*/
@media (min-width: 481px) and (max-width: 1023px) {
/* ここにタブレット用のCSSを記述する*/
h1 {
font-size: 30px;
color: #00dd00;
}
}
/*スマートフォン用メディアクエリ*/
@media (max-width: 480px) {
/* ここにスマートフォン用のCSSを記述する*/
h1 {
font-size: 18px;
color: #0000dd;
}
}サンプルコード17－6
■ メディアクエリの基本書式
■ ブラウザプレビュー（ブラウザ幅481px以上、1023px以下のとき）
5. ブラウザプレビューをする
デベロッパーツールを使って確認しよう
デベロッパーツールとは、Google Chromeに標準で搭載されている開発者用の検証ツールのことです。
HTML/CSSの検証や仮編集などの制作者にとって便利な機能が装備されています。
ここではレスポンシブデザインの画面表示を確認するためのモードの使い方を解説します。
HTML/CSSの検証や仮編集などの制作者にとって便利な機能が装備されています。
ここではレスポンシブデザインの画面表示を確認するためのモードの使い方を解説します。
・レスポンシブデザインのコーディングは、メディアクエリを使い、ブラウザ幅によってCSSを切り替えているだけですから、デバイスごとに設定したCSSが正しく適用されているかどうかを作業中のPCで確認するためには、基本的には通常のブラウザプレビューを行い、手動でブラウザ幅を変えてみればOKです。
・しかし、Google ChromeやSafariなど大半のブラウザのウインドウ幅は、最小でも500pxぐらいまでしか狭めることができません。
・今回のようにスマートフォン用のメディアクエリで480px以下を設定した場合は、通常のブラウザプレビューでは、スマートフォン版のブラウザ表示を確認することができません。
・Google Chromeのデベロッパーツールを使うと、レスポンシブデザインのプレビューを行うことができます。
・しかし、Google ChromeやSafariなど大半のブラウザのウインドウ幅は、最小でも500pxぐらいまでしか狭めることができません。
・今回のようにスマートフォン用のメディアクエリで480px以下を設定した場合は、通常のブラウザプレビューでは、スマートフォン版のブラウザ表示を確認することができません。
・Google Chromeのデベロッパーツールを使うと、レスポンシブデザインのプレビューを行うことができます。
【画面収録】chromeのデベロッパーツールによるレスポンシブデザインのブラウザプレビュー
デベロッパーツールで検証しよう
デベロッパーツールの起動方法
・検証するHTMLファイルをブラウザで表示してから、Google Chromeの右上の縦3点メニューアイコン（⋮）をクリックし、「その他のツール」→「デベロッパーツール」を選びます。
・ショートカットキーもありますので、覚えておくと効率的にコーディング作業を行うことができるでしょう。
・ショートカットキーもありますので、覚えておくと効率的にコーディング作業を行うことができるでしょう。
デベロッパーツール起動のショートカットキー
Mac版Google Chrome
⌘ + option + i
Windows版Google Chrome
Ctrl + shift + i
■ デベロッパーツールを起動する
■ 起動したデベロッパーツール
