6日でできる 新HTML&CSS入門｜レスポンシブWebデザインの作成
1つのHTMLで、PCにもスマートフォンにも見やすく対応する。
ビューポートとメディアクエリを使って、レスポンシブWebデザインを作成しよう。
Webページは、パソコンだけで見られるものではありません。スマートフォン、タブレット、ノートパソコン、大きなモニターなど、さまざまな画面サイズの端末で表示されます。そのため、1つの画面幅だけを前提にしてページを作ると、別の端末では文字が小さくなったり、レイアウトが崩れたり、横スクロールが発生したりすることがあります。
このような問題を防ぐために使われるのが、レスポンシブWebデザインです。レスポンシブWebデザインでは、1つのHTMLを基本にしながら、CSSで画面幅ごとの見た目を切り替えます。パソコンでは広い画面を活かしたレイアウトにし、タブレットでは少し余白や幅を調整し、スマートフォンでは縦並びで読みやすくする、といった対応ができます。
レスポンシブWebデザインを作成するときに特に大切なのが、ビューポート設定とメディアクエリです。ビューポート設定は、スマートフォンなどの端末幅に合わせてページを表示するための指定です。メディアクエリは、画面幅などの条件に応じてCSSを切り替えるための仕組みです。
この記事では、レスポンシブWebデザインを作成するための基本手順として、ビューポートの指定方法、メディアクエリの書き方、画面幅ごとにデザインを切り替えるサンプル、そしてブラウザで表示を確認する方法まで、初心者にも分かりやすく解説していきます。
レスポンシブWebデザイン作成で最初に考えること
レスポンシブWebデザインを作るときは、まず「どの画面幅で、どのように見せたいか」を考えます。すべての端末で同じ見た目を無理に維持するのではなく、画面サイズに合わせて読みやすく、操作しやすい形へ調整することが大切です。
たとえば、パソコンでは横に広く表示できるため、メニューやコンテンツを横並びにしても見やすくなります。一方、スマートフォンでは横幅が狭いため、横並びをそのまま使うと窮屈になります。その場合は、メニューやコンテンツを縦に並べるほうが自然です。
| 画面の種類 | レイアウトの考え方 |
|---|---|
| パソコン | 広い横幅を活かして、余裕のある配置にする |
| タブレット | 横幅に合わせて余白や幅を調整する |
| スマートフォン | 縦並びを中心にして、読みやすく操作しやすくする |
レスポンシブWebデザインでは、見た目の切り替えだけでなく、ユーザーが迷わず読めるか、ボタンやリンクを押しやすいか、横スクロールが出ていないかも確認します。画面幅が変わっても使いやすさを保つことが、レスポンシブ対応の目的です。
図1：レスポンシブWebデザインは端末ごとに見た目を調整する
この図から分かること
レスポンシブWebデザインでは、同じWebページでも画面幅に合わせて見た目を変えます。パソコン、タブレット、スマートフォンでは使える横幅が違うため、それぞれに合った配置へ調整します。HTMLは共通にし、CSSで見た目を切り替えるのが基本です。
ビューポートを設定する
レスポンシブWebデザインを作成するとき、最初に確認したいのがビューポートの設定です。ビューポートとは、ブラウザがWebページを表示する領域のことです。特にスマートフォンでは、この設定がないと、ページがパソコン向けの広い幅として扱われ、全体が縮小されて表示されることがあります。
HTMLのhead内には、次のようにmeta name="viewport"を指定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">この指定を入れることで、スマートフォンやタブレットでも、端末の画面幅に合わせてページが表示されやすくなります。
| 指定 | 説明 |
|---|---|
| width=device-width | ページの幅を端末の画面幅に合わせる |
| initial-scale=1.0 | 初期表示倍率を1.0にする |
| minimum-scale=1.0 | 最小倍率を1.0にする。必要に応じて指定する |
レスポンシブ対応を行う場合、width=device-widthとinitial-scale=1.0は基本として覚えておきたい指定です。これがないと、メディアクエリを書いてもスマートフォンで意図した幅として認識されず、思ったように切り替わらないことがあります。
ビューポート設定がないとどうなるのか
ビューポート設定がない場合、スマートフォンのブラウザはページを広いパソコン画面として表示しようとすることがあります。その結果、ページ全体が小さく縮小され、文字が読みづらくなります。
また、CSSでmax-widthやメディアクエリを指定していても、端末幅に合わせた表示になりにくい場合があります。レスポンシブWebデザインでは、まずビューポート設定を入れてから、CSSで画面幅ごとのデザインを調整する流れが大切です。
| 状態 | 起こりやすいこと |
|---|---|
| ビューポート設定あり | 端末幅に合わせてページが表示されやすい |
| ビューポート設定なし | スマートフォンで縮小表示され、文字が小さく見えることがある |
スマートフォン対応のページを作るときは、HTMLのhead内にmeta name="viewport"が入っているかを必ず確認しましょう。
メディアクエリで画面幅ごとにCSSを切り替える
メディアクエリは、画面幅や端末の条件に応じてCSSを切り替えるための仕組みです。レスポンシブWebデザインでは、このメディアクエリを使って、パソコン用、タブレット用、スマートフォン用の見た目を調整します。
基本的な書き方は次のとおりです。
@media screen and (max-width: 700px) {
セレクタ {
プロパティ: 値;
}
}この例では、画面幅が700px以下のときだけ、指定したCSSが適用されます。
画面幅ごとの分岐例は、次のように整理できます。
| 用途 | メディアクエリ例 | 考え方 |
|---|---|---|
| パソコン向け | @media screen and (min-width: 768px) | 画面幅が広いときに適用する |
| タブレット向け | @media screen and (max-width: 767px) | 中くらいの画面幅以下で適用する |
| スマートフォン向け | @media screen and (max-width: 579px) | 狭い画面幅で適用する |
max-widthは「指定した幅以下のとき」、min-widthは「指定した幅以上のとき」に使います。学習の最初は、通常のCSSをパソコン向けとして書き、@media (max-width: ○px)で狭い画面用に上書きしていく方法が分かりやすいです。
ブレイクポイントとは何か
メディアクエリで指定する切り替え幅のことを、ブレイクポイントと呼びます。たとえば、700px以下でレイアウトを変える場合、700pxがブレイクポイントになります。
ブレイクポイントは、端末名だけで決めるのではなく、実際にレイアウトが崩れ始める幅を見ながら決めるのが理想です。メニューが入りきらない、カードが窮屈になる、文字が読みづらいなど、見た目に問題が出るタイミングで切り替えます。
| ブレイクポイントの考え方 | 内容 |
|---|---|
| 画面幅で決める | 例：767px以下、579px以下 |
| レイアウトの崩れで決める | 要素が窮屈になった幅で切り替える |
| 操作性で決める | メニューやボタンが押しにくくなる前に調整する |
ブレイクポイントは、必ずこの数値にしなければならないというものではありません。ページの内容やデザインに合わせて、自然に見える幅を探していくことが大切です。
図2：メディアクエリは条件に合う画面幅でCSSを切り替える
この図から分かること
メディアクエリを使うと、画面幅に応じてCSSを切り替えられます。たとえば、広い画面では白背景、タブレット幅ではグレー背景、スマートフォン幅では黒背景にするなど、条件ごとに見た目を変更できます。切り替えの基準になる幅をブレイクポイントと呼びます。
サンプルで学ぶレスポンシブWebページ
ここでは、画面幅によって背景色と文字色が変わるシンプルなレスポンシブページを作成します。パソコンでは白背景、タブレット幅ではグレー背景、スマートフォン幅では黒背景に白文字で表示されるようにします。
ファイル名： lesson39_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ表示の確認</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<style>
body {
margin: 0;
font-family: sans-serif;
}
#responsive-box {
color: #222222;
text-align: center;
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
#responsive-box p {
margin: 0;
padding: 1em;
}
@media screen and (min-width: 768px) {
#responsive-box {
background-color: #ffffff;
}
}
@media screen and (max-width: 767px) {
#responsive-box {
background-color: #e0e0e0;
}
}
@media screen and (max-width: 579px) {
#responsive-box {
background-color: #000000;
color: #ffffff;
}
}
</style>
</head>
<body>
<div id="responsive-box">
<p>レスポンシブ表示を確認しましょう</p>
</div>
</body>
</html>ブラウザの表示例
パソコンのように画面幅が768px以上の場合は、白い背景に黒系の文字で表示されます。広い画面で見ても、中央にテキストが配置されるため、画面全体の変化を確認しやすくなります。
画面幅が767px以下になると、タブレット向けの指定が適用され、背景色がグレーになります。文字色は基本設定のままなので、黒系の文字で表示されます。
画面幅が579px以下になると、スマートフォン向けの指定が適用され、背景色が黒、文字色が白になります。より狭い画面用の指定が後ろに書かれているため、579px以下ではスマートフォン向けの見た目が優先されます。
サンプルコードのポイント
このサンプルでは、レスポンシブWebデザインに必要な基本要素がいくつか入っています。
| タグ・CSS | 役割 |
|---|---|
| meta name="viewport" | 端末幅に合わせてページを表示する |
| width: 100vw | 表示領域の横幅いっぱいにする |
| height: 100vh | 表示領域の高さいっぱいにする |
| display: flex | 子要素を配置しやすくする |
| justify-content: center | 横方向に中央揃えする |
| align-items: center | 縦方向に中央揃えする |
| @media | 画面幅に応じてCSSを切り替える |
| background-color | 背景色を指定する |
| color | 文字色を指定する |
100vwは、ビューポートの横幅全体を表します。100vhは、ビューポートの高さ全体を表します。このサンプルでは、画面全体を1つの大きなボックスとして使い、中央に文字を配置しています。
display: flex、justify-content: center、align-items: centerを組み合わせることで、テキストを画面の中央に配置しています。レスポンシブ対応とは直接関係ないように見えますが、画面幅や高さが変わっても中央に表示されるため、確認用サンプルとして分かりやすい指定です。
メディアクエリは後から書いた条件が優先されることがある
CSSでは、同じ詳細度の指定が複数ある場合、後から書かれた指定が優先されます。このサンプルでは、max-width: 767pxの指定の後に、max-width: 579pxの指定を書いています。
579px以下の画面は、767px以下でもあります。そのため、スマートフォン幅ではタブレット用の条件にもスマートフォン用の条件にも当てはまります。このとき、後ろに書かれているmax-width: 579pxの指定が最終的に効きます。
@media screen and (max-width: 767px) {
#responsive-box {
background-color: #e0e0e0;
}
}
@media screen and (max-width: 579px) {
#responsive-box {
background-color: #000000;
color: #ffffff;
}
}このように、メディアクエリを書く順番も大切です。狭い画面用の指定を後ろに書くと、より小さい画面で上書きしやすくなります。
デバイスごとの見た目を確認する
レスポンシブWebデザインは、コードを書くだけでは完成ではありません。実際に画面幅を変えて、意図したとおりに表示が切り替わるか確認することが大切です。
確認方法として便利なのが、ブラウザのデベロッパーツールです。Chromeなどのブラウザでは、スマートフォンやタブレットの画面幅をシミュレートできます。
代表的な確認の流れは次のとおりです。
| 手順 | 操作内容 |
|---|---|
| 1 | 作成したHTMLファイルをChromeで開く |
| 2 | 右クリックして検証を選ぶ、またはF12キーでデベロッパーツールを開く |
| 3 | デバイスモードのアイコンをクリックする |
| 4 | 画面幅を変更する、または端末名を選ぶ |
| 5 | 背景色や文字色、配置が切り替わるか確認する |
デベロッパーツールを使うと、実際のスマートフォンを毎回用意しなくても、さまざまな画面幅で表示を確認できます。ただし、最終的には実機でも確認すると安心です。ブラウザのシミュレーションと実際の端末では、表示や操作感が少し異なる場合があるためです。
図3：デベロッパーツールで画面幅を変えて確認する
この図から分かること
レスポンシブWebデザインでは、コードを書いたあとに画面幅を変えて確認することが大切です。デベロッパーツールを使うと、PC、タブレット、スマートフォンに近い画面幅で表示を確認できます。背景色や文字色、レイアウトが意図したタイミングで切り替わるかをチェックしましょう。
レスポンシブWebデザインでよく使うCSS単位
レスポンシブ対応では、固定幅だけでなく、画面サイズに応じて変化する単位を使うことがあります。代表的なのが%、vw、vhです。
| 単位 | 意味 | 使い方の例 |
|---|---|---|
| % | 親要素を基準にした割合 | width: 80%; |
| vw | ビューポート幅を基準にした単位 | width: 100vw; |
| vh | ビューポート高さを基準にした単位 | height: 100vh; |
| em | 文字サイズを基準にした相対単位 | padding: 1em; |
| rem | ルート要素の文字サイズを基準にした単位 | font-size: 1.2rem; |
画面幅に合わせて要素の大きさを変えたい場合は、%やvwが役立ちます。画面の高さに合わせたい場合はvhが使えます。ただし、100vwを使うと環境によって横スクロールが出る場合もあるため、実際の表示確認が大切です。
よく使うレスポンシブ設定のコツ
レスポンシブWebデザインを作るときは、次のような点を意識すると、画面幅が変わっても崩れにくくなります。
| コツ | 内容 |
|---|---|
| viewportを必ず指定する | スマートフォンで端末幅に合わせて表示しやすくする |
| 固定幅を使いすぎない | width: 100%;やmax-widthを活用する |
| 画像のはみ出しを防ぐ | imgにmax-width: 100%; height: auto;を指定する |
| 余白を画面幅に合わせて調整する | スマートフォンではpaddingやmarginを小さめにする |
| メニューを縦並びに切り替える | 狭い画面でもタップしやすくする |
| 複数の画面幅で確認する | PC幅、タブレット幅、スマートフォン幅で表示を見る |
特に、画像や表のように横幅が大きくなりやすい要素には注意が必要です。画像が画面からはみ出す場合は、次のような指定が役立ちます。
img {
max-width: 100%;
height: auto;
}この指定により、画像が親要素の幅を超えにくくなります。レスポンシブ対応では、横スクロールを発生させないことが大切な確認ポイントです。
メディアクエリを書くときの考え方
メディアクエリを書くときは、通常時のCSSと、画面幅が変わったときのCSSを分けて考えると整理しやすくなります。
たとえば、まず広い画面向けに基本のデザインを書きます。その後、タブレット幅やスマートフォン幅で変更したい部分だけを@mediaの中に書きます。
.card-list {
display: flex;
gap: 1.5em;
}
@media screen and (max-width: 767px) {
.card-list {
display: block;
}
}このようにすると、共通部分を何度も書かずに済みます。画面幅ごとに変えたい部分だけを書くと、CSSが読みやすくなります。
また、スマートフォンを基準にしてCSSを書き、広い画面向けにmin-widthで追加していく方法もあります。どちらの方法でもよいですが、学習段階では、まず通常時のCSSを書き、max-widthで狭い画面用に切り替える方法が理解しやすいです。
レスポンシブWebデザイン作成の流れ
実際にレスポンシブWebデザインを作成するときは、次の流れで進めると整理しやすくなります。
| 手順 | 内容 |
|---|---|
| 1 | HTMLでページの構造を作る |
| 2 | head内にmeta name="viewport"を指定する |
| 3 | 通常時のCSSを書く |
| 4 | メディアクエリで画面幅ごとのCSSを追加する |
| 5 | ブラウザで画面幅を変えて確認する |
| 6 | 余白、文字サイズ、横スクロール、操作しやすさを調整する |
この流れで作ると、レスポンシブ対応の全体像をつかみやすくなります。最初は背景色が変わるだけの簡単なサンプルでもかまいません。画面幅によってCSSが切り替わることを確認できれば、次はメニュー、カード、画像、2カラムレイアウトなどへ応用できます。
制作後は必ず画面幅を変えて確認する
レスポンシブWebデザインでは、作成後の確認がとても重要です。HTMLとCSSを書いただけでは、実際にどの画面幅でどのように見えるか分かりません。ブラウザの横幅を広げたり狭めたりしながら、表示が自然に切り替わるか確認しましょう。
特に、スマートフォン幅では、文字が小さすぎないか、ボタンやリンクが押しやすいか、横スクロールが出ていないかを確認します。タブレット幅では、余白が広すぎたり、逆に要素が詰まりすぎたりしていないかを見ます。パソコン幅では、コンテンツが横に広がりすぎず、読みやすい幅に収まっているかを確認します。
レスポンシブWebデザインの作成は、ビューポート設定、メディアクエリ、画面幅ごとの確認を組み合わせて進めます。1つのHTMLを基本にしながら、CSSで見た目を柔軟に切り替えられるようになると、さまざまな端末で見やすく使いやすいWebページを作れるようになります。