レッスン6：レスポンシブデザイン——スマートフォンでもきれいに見せる

このレッスンで学ぶこと

レスポンシブデザインの考え方を理解する
viewport設定の必要性を説明できる
メディアクエリで画面幅に応じたCSSを書ける
相対単位（rem・%・vw）を使い分けられる
モバイルファーストの考え方を知る

レッスン5では、Flexboxを使って横並びのナビゲーションやカードのレイアウトを作りました。ここまでで、デスクトップサイズの画面ではきれいに見えるページができています。ところが、スマートフォンで開くと文字が小さすぎたり、横にはみ出したりすることがあります。このレッスンでは、画面幅に応じてレイアウトを変える「レスポンシブデザイン」を学びます。

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

レスポンシブデザインは、1つのHTML・CSSで、デスクトップ・タブレット・スマートフォンなど、さまざまな画面サイズに対応するデザイン手法です。「Responsive」は「反応する」という意味で、画面幅に反応してレイアウトが変わるイメージです。

PC用とスマホ用で別々のサイトを用意するのではなく、同じファイルで両方に対応します。これにより、運用がシンプルになり、検索エンジンからの評価も安定します。スマートフォンの利用が多くを占める現在、レスポンシブ対応は実務でほぼ必須です。

💡 ポイント Webサイトに来る人の半数以上はスマートフォンユーザー、というのが現代の傾向です。「最初からスマホでも見やすく作る」発想が、Web制作の基本姿勢になっています。

viewport——スマホ対応の最重要設定

スマートフォンで自分のページを開いてみると、PCと同じ見た目が小さく縮小されて表示されることがあります。これは、スマートフォンが「PCサイズの幅でレンダリングして、それを画面に縮小して表示する」という古い動作をするためです。

これを正しく「スマートフォンの実際の幅でレンダリングする」状態にするために、HTMLに viewport の指定を追加します。

my-website フォルダの index.html の <head> 内、<meta charset="UTF-8"> の下に次の1行を追加してください。

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

意味は次のとおりです。

width=device-width：表示幅をデバイスの実際の画面幅に合わせる
initial-scale=1.0：初期表示の拡大率を等倍にする

このメタタグは、レスポンシブデザインの大前提です。書き忘れるとメディアクエリも正しく動かないため、HTMLテンプレートに必ず含める「おまじない」として覚えておきましょう。

メディアクエリ——画面幅で分岐する

CSSには、画面幅に応じて適用するスタイルを切り替える「メディアクエリ」という仕組みがあります。書き方は次のとおりです。

@media (max-width: 768px) {
  /* 画面幅が768px以下のときに適用されるCSS */
}

@media で始まり、波括弧の中に「特定の条件のときだけ適用したいCSS」を書きます。max-width: 768px は「画面幅が768px以下」という条件です。よく使うブレークポイント（区切る画面幅）は次のあたりです。

〜480px：小型スマートフォン
〜768px：タブレット縦・大型スマートフォン
〜1024px：タブレット横・小型ノートPC
それ以上：デスクトップ

絶対の正解はありません。コンテンツに応じて、見た目が崩れる幅を見極めて区切り点を決めます。

実習：ナビゲーションをスマホ対応にする

レッスン5で作ったナビゲーションは、スマホで見ると文字が窮屈になることがあります。画面幅が狭いときは、ロゴとメニューを縦に並べる構成にしてみましょう。

style.css の最後に、メディアクエリを追加します。

@media (max-width: 600px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .nav-menu {
    flex-direction: column;
    gap: 8px;
  }
}

flex-direction: column は、Flexboxの主軸を「縦方向」に変える指定です。横並びだった要素が縦並びになります。

保存したら、ブラウザで再読み込みし、ウィンドウの幅を狭めてみてください。幅が600px以下になった瞬間、ナビゲーションのレイアウトが横並びから縦並びに切り替わるはずです。

💡 ポイント ウィンドウの端をドラッグして幅を狭める方法でレスポンシブの確認ができます。さらに正確に確認したい場合は、ブラウザの開発者ツールにある「デバイスツールバー」（モバイルとタブレットのアイコン）を使うと、特定のスマホサイズに切り替えられます。

実習：カードのレイアウトを画面幅で変える

レッスン5で作った3枚並びのカードも、スマホでは1枚ずつ縦に並べたほうが読みやすくなります。

CSSのメディアクエリ内に、次のスタイルを追加します。

@media (max-width: 600px) {
  /* （前の指定の続き） */
  .card {
    flex: 1 1 100%;
  }
}

flex: 1 1 100% は、「縮小比率1、伸長比率1、基本幅100%」の指定で、子要素が親の幅いっぱいに広がります。これでスマホでは1枚ずつ縦に並びます。

📝 補足 flex: 1 1 100% は、flex-grow: 1、flex-shrink: 1、flex-basis: 100% のまとめ書きです。難しく感じる場合は、「スマホでは100%の幅にする指定」とまず理解しておけば十分です。

相対単位——px以外のサイズ指定

ここまでサイズ指定にはpx（ピクセル）を使ってきました。pxは「絶対単位」で、画面サイズに関わらず常に同じ大きさです。一方、CSSには「相対単位」と呼ばれるサイズ指定もあり、画面や親要素のサイズに応じて変化します。レスポンシブデザインで活躍します。

代表的な相対単位を3つ紹介します。

%：親要素のサイズを基準にした割合。width: 50% なら親の幅の半分。

rem：ルート（html要素）のフォントサイズを基準にした倍率。1remはおよそ16px。

vw：ビューポート（画面）の幅を基準にした割合。100vw は画面幅いっぱい。

実用的には rem が文字サイズや余白の指定によく使われます。html要素のフォントサイズを変えれば、rem で指定したものすべてが連動して変わるため、サイト全体のサイズ調整が楽になるからです。

html {
  font-size: 16px; /* 1rem = 16px の基準 */
}

h1 {
  font-size: 2rem;  /* 32px相当 */
}

p {
  font-size: 1rem;  /* 16px */
}

💡 ポイント 文字サイズはrem、要素の幅は%や最大幅max-width、画像はwidth: 100%、というように使い分けるのがレスポンシブの定番パターンです。

モバイルファーストの考え方

レスポンシブデザインの考え方には、大きく2つの流派があります。

1つは「デスクトップファースト」。先にPC用のレイアウトを作り、メディアクエリ（max-width）でスマホ用に調整する方法。本レッスンでここまで採用してきたのはこの方法です。

もう1つは「モバイルファースト」。先にスマホ用のレイアウトを作り、メディアクエリ（min-width）で画面が広いときの装飾を加えていく方法です。

/* スマホ用（デフォルト） */
.nav {
  flex-direction: column;
}

/* 画面幅600px以上のとき */
@media (min-width: 600px) {
  .nav {
    flex-direction: row;
  }
}

実務ではモバイルファーストが推奨されることが多いです。理由は、スマホ利用者の方が多いことと、「狭い画面で必要な要素を厳選する」発想がデザインの整理に役立つことです。

ただし入門段階では、自分が見ている画面（多くはPC）で先に作って、後からスマホ対応する流れの方が直感的なので、本コースではデスクトップファーストを採用しています。慣れてきたら、モバイルファーストにも挑戦してみてください。

📝 補足 同じ見た目を作るなら、デスクトップファーストでもモバイルファーストでも結果は同じです。違うのは「どちらを基準にして書くか」と「どちらの場合のCSSがメディアクエリの中に入るか」だけです。

画像のレスポンシブ対応

画像も画面幅に合わせて縮小されないと、スマホで横にはみ出してしまいます。style.css に次のCSSを追加してください。

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% は「親要素の幅を超えない」という指定で、画像が常に親に収まるようになります。height: auto を併せて指定することで、縦横比を保ったまま縮小されます。

これでプロフィール画像も、スマホ画面に合わせて自動的に縮みます。

⚠️ 注意 画像のレスポンシブ対応は、max-width: 100% と height: auto のセットで指定するのが定番です。width: 100% だけだと、画像のもとのサイズより大きく引き伸ばされてしまいます。max-width の方を使いましょう。

まとめ

このレッスンでは、以下のことを学びました。

レスポンシブデザインは、1つのHTML・CSSで複数の画面サイズに対応する手法である
viewport の指定はスマートフォン対応の前提条件である
メディアクエリ（@media）で画面幅に応じてCSSを切り替えられる
rem・%・vw といった相対単位はレスポンシブと相性がよい
モバイルファーストとデスクトップファーストの2つのアプローチがある
画像は max-width: 100% と height: auto のセットで親要素に収まる

次のレッスンでは、これまで学んだHTML・CSSをすべて使って、複数ページの小さなサイトを完成させます。共通CSSの使い回しや、フォルダ構成の整え方も学びます。

確認クイズ

このレッスンの理解度をチェックしましょう。