レッスン12: どんな画面でもキレイに見せる！レスポンシブデザイン入門

🎯 学習目標

レスポンシブデザインの必要性と仕組みを理解する
ビューポートとmetaタグの役割を理解する
メディアクエリの基本的な書き方を覚える
実際にレスポンシブなレイアウトを作成できる

📘 目次

レスポンシブデザインとは
ビューポートの設定
メディアクエリの基本
レスポンシブレイアウトのコツ
今日のまとめ
演習：レスポンシブなページを作ろう
理解度チェック

📚 レッスン

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

レスポンシブデザインとは、スマートフォン、タブレット、パソコンなど、さまざまな画面サイズに自動的に対応して、どんな端末でも読みやすく美しく表示されるWebデザインの手法です。

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

多様な端末：今では多くの人がスマホでWebサイトを見る
ユーザビリティ：画面サイズに関係なく使いやすいサイトにしたい
SEO効果：Googleもモバイル対応サイトを評価している
保守性：1つのHTML・CSSで全ての端末に対応できる

身近な例：YouTubeやInstagramなどのサイトは、スマホで見ても、パソコンで見ても自然に表示されますよね。これがレスポンシブデザインです！

2. ビューポートの設定

レスポンシブデザインを作る第一歩は、ビューポートの設定です。ビューポートとは「ブラウザがWebページを表示する領域」のことです。

必須のmetaタグ

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

各設定の意味

設定	意味
`width=device-width`	ページの幅を端末の画面幅に合わせる
`initial-scale=1.0`	最初の表示倍率を100%にする

重要：このmetaタグがないと、スマホでサイトを見たときに「パソコン用のページが縮小された状態」で表示されてしまいます。

3. メディアクエリの基本

メディアクエリは「画面サイズが○○pxより小さい（大きい）ときだけ、このCSSを適用する」という条件付きのスタイル指定ができる機能です。

基本的な書き方

/* 通常のスタイル（全ての画面サイズに適用） */
.box {
    width: 300px;
    background-color: lightblue;
    padding: 20px;
}

/* スマートフォン（幅600px以下）のときだけ適用 */
@media screen and (max-width: 600px) {
    .box {
        width: 100%;
        background-color: lightcoral;
        font-size: 14px;
    }
}

min-widthとmax-width

メディアクエリでは、min-widthとmax-widthという2つの重要な条件指定があります。これらを理解することで、効果的なレスポンシブデザインが可能になります。

覚え方のコツ

min-width: 600px → 「最小幅が600px以上」 → 大きい画面で適用
max-width: 600px → 「最大幅が600px以下」 → 小さい画面で適用

条件	意味	使用例
`min-width`	「指定した幅以上」のとき適用	`@media (min-width: 768px) { /* 768px以上（PC・タブレット用）*/ }`
`max-width`	「指定した幅以下」のとき適用	`@media (max-width: 767px) { /* 767px以下（スマホ用）*/ }`

📐 モバイルファーストvsデスクトップファースト

モバイルファースト（推奨）

/* 基本スタイル（スマホ用） */
.box { width: 100%; }

/* タブレット以上 */
@media (min-width: 768px) {
  .box { width: 50%; }
}

/* PC以上 */
@media (min-width: 1024px) {
  .box { width: 33.33%; }
}

デスクトップファースト

/* 基本スタイル（PC用） */
.box { width: 33.33%; }

/* タブレット以下 */
@media (max-width: 1023px) {
  .box { width: 50%; }
}

/* スマホ以下 */
@media (max-width: 767px) {
  .box { width: 100%; }
}

ブレイクポイント

ブレイクポイントとは？

ブレイクポイントとは、レスポンシブデザインで「この画面サイズを境にレイアウトを変更する」という境界線のことです。簡単に言うと、「スマホ用・タブレット用・PC用に切り替わるポイント」です。

一般的なブレイクポイント

📱モバイルファースト方式（推奨）

モバイルファースト方式では、最初にスマートフォン用のスタイルを定義し、画面が大きくなるにつれてスタイルを追加していきます。

/* スマートフォン（デフォルト、320px〜） */
.container {
  width: 100%;
  padding: 10px;
}

/* タブレット（768px以上） */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* デスクトップ（1024px以上） */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

/* 大画面（1200px以上） */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

📺 デモ：メディアクエリの動作確認

このボックスをチェック！

ブラウザの幅を変えてみてください

💡 ブラウザのウィンドウを狭くすると、ボックスの色とサイズが変わります！

4. レスポンシブレイアウトを作るコツ

① 幅を%で指定する

固定のpx値ではなく、%やvwといった相対単位を使います。

なぜ%による指定が重要？
%での幅指定は、親要素に対する相対的なサイズを表します。例えばwidth: 90%は「親要素の幅の90%」という意味です。これにより、画面サイズに応じて自動的にサイズが調整されるため、どんなデバイスでも適切な大きさで表示されます。

/* ❌ 固定幅（レスポンシブじゃない） */
.container {
    width: 800px;
}

/* ✅ 相対幅（レスポンシブ） */
.container {
    width: 90%;
    max-width: 800px;
}

相対単位のメリット：

自動調整：画面サイズに合わせて自動的にサイズが変わる
比率の維持：異なるデバイスでも一定の比率でレイアウトを維持できる
柔軟性：ユーザーのブラウザサイズ変更にも対応できる

よく使われる相対単位：

単位	説明	使用例
`%`	親要素に対する割合	`width: 50%;`
`vw`	ビューポート幅の1%	`width: 100vw;`
`vh`	ビューポート高さの1%	`height: 50vh;`
`em`	親要素のフォントサイズを基準	`margin: 2em;`
`rem`	ルート要素のフォントサイズを基準	`font-size: 1.2rem;`

② 画像を柔軟にする

画像は大きなサイズで用意されていることが多く、小さな画面に表示するとはみ出してしまいます。レスポンシブデザインでは画像も画面サイズに合わせて自動的にリサイズする必要があります。

なぜ画像を柔軟にする必要があるの？
スマートフォンなどの小さな画面では、大きな画像がそのまま表示されると、横にスクロールしなければならなくなり、ユーザビリティが低下します。画像を親要素に収まるようにすることで、どんな画面サイズでも見やすくなります。

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

このCSSの効果

max-width: 100% - 画像が親要素の幅を超えないようにする（はみ出し防止）
height: auto - 幅に合わせて高さを自動調整し、アスペクト比（縦横比）を維持する

📺 デモ：柔軟な画像

❌ 固定サイズ

画面幅が小さくなると横スクロールが必要になる

✅ レスポンシブ

画面幅に合わせて自動的にサイズ調整される

💡 ブラウザのウィンドウサイズを変更して、両方の画像の動作の違いを確認してみてください。

注意点：画像のファイルサイズ自体は変わりません。大きな画像ファイルをそのままスマホで表示すると、読み込み時間が長くなる可能性があります。必要に応じて、srcsetや高密度ディスプレイ用の画像などの高度なテクニックも検討しましょう。

③ Flexboxでレイアウトを切り替える

パソコンでは横並び、スマホでは縦並びにするにはFlexboxを使うと簡単に切り替えることができます。

Flexboxとは？
FlexboxはCSSの機能の一つで、要素の配置や並び方を柔軟に制御できます。特にレスポンシブデザインでは、画面サイズに応じてレイアウトを簡単に変更できる強力なツールです。

.container {
    display: flex;
    gap: 20px;
}

.box {
    flex: 1;
    padding: 20px;
    background: #e0e0e0;
}

/* スマートフォンでは縦並びに */
@media screen and (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

コードの解説：

プロパティ	説明
`display: flex;`	要素をFlexコンテナにする（Flexboxを有効にする）
`gap: 20px;`	Flex項目間の間隔を20pxに設定
`flex: 1;`	子要素（box）が利用可能なスペースを均等に分け合う
`flex-direction: column;`	Flex項目を縦方向（列）に並べる（デフォルトは`row`で横並び）

レスポンシブ対応のポイント：

デフォルトではflex-direction: row;（横並び）になっている
小さな画面（600px以下）ではflex-direction: column;（縦並び）に切り替える
これだけで、PC用とスマホ用のレイアウトを簡単に切り替えられる

📺 デモ：2カラムレイアウト

Box 1

パソコンでは横並び

Box 2

スマホでは縦並び

💡 ブラウザの幅を変えて、レイアウトの変化を確認してみてください！

今日のまとめ

レスポンシブデザインは、どんな画面サイズでも美しく表示される手法
ビューポートの設定（<meta name="viewport">）が必須
メディアクエリで画面サイズに応じてスタイルを切り替える
幅は%で指定し、Flexboxで柔軟なレイアウトを作る

✍️ 演習問題

学んだ内容を使って、実際にレスポンシブなページを作ってみましょう。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。ブラウザの幅を変えてレスポンシブの動作も確認してみてください！

演習1：2カラムレイアウト

パソコンでは横並び、スマホでは縦並びになるレイアウトを作ってみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブレイアウト</title>
  <style>
    .container {
      display: flex;
      gap: 20px;
      padding: 20px;
    }
    
    .box {
      flex: 1;
      padding: 20px;
      background: #e0e0e0;
      border-radius: 8px;
      text-align: center;
    }
    
    /* スマートフォン用のスタイルを設定します */
    @media screen and (max-width: 600px) {

    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <h3>コンテンツ1</h3>
      <p>ここに内容を書きます。パソコンでは横並び、スマホでは縦並びになります。</p>
    </div>
    <div class="box">
      <h3>コンテンツ2</h3>
      <p>レスポンシブデザインの基本的な考え方を実践してみましょう。</p>
    </div>
  </div>
</body>
</html>

やってみよう

上記のコードを右側のエディタに貼り付ける
画面が小さいと縦並び、画面が大きいと横並びにするCSSを追加する
エディタの「Defaultボタン」と「Largeボタン」をクリックして大きさを変えて、動作を確認する

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブレイアウト</title>
  <style>
    .container {
      display: flex;
      gap: 20px;
      padding: 20px;
    }
    
    .box {
      flex: 1;
      padding: 20px;
      background: #e0e0e0;
      border-radius: 8px;
      text-align: center;
    }
    
    /* スマートフォン用のスタイルを設定します */
    @media screen and (max-width: 600px) {
        .container {
            flex-direction: column;        
        }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <h3>コンテンツ1</h3>
      <p>ここに内容を書きます。パソコンでは横並び、スマホでは縦並びになります。</p>
    </div>
    <div class="box">
      <h3>コンテンツ2</h3>
      <p>レスポンシブデザインの基本的な考え方を実践してみましょう。</p>
    </div>
  </div>
</body>
</html>

解説：

メディアクエリの使い方：画面幅が600px以下のときに@media screen and (max-width: 600px) { }内のスタイルが適用されます。
flex-direction: column：このプロパティを追加することで、小さな画面では要素が縦方向に積み重なるようになります。デフォルトではrow（横並び）です。
レスポンシブデザインのポイント：
- 大きな画面では、display: flexのデフォルト動作により要素が横に並びます
- 小さな画面では、メディアクエリでflex-direction: columnに変更することで縦並びになります
- flex: 1により、各ボックスが利用可能なスペースを均等に分け合います
実際の動作：ブラウザの幅を変えると、600px以下では縦並び、それより大きいと横並びになります。これはスマートフォンとパソコンでの表示の違いを再現しています。

このような方法でFlexboxとメディアクエリを組み合わせると、さまざまなデバイスに対応したレスポンシブなレイアウトを簡単に作成できます。

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. レスポンシブデザインで必須のmetaタグはどれですか？

2. 画面幅が600px以下のときにスタイルを適用するメディアクエリはどれですか？

@media screen and (min-width: 600px)

@media screen and (max-width: 600px)

@media (width: 600px)

3. Flexboxで横並びを縦並びに変更するプロパティはどれですか？

flex-direction: column

flex-wrap: wrap

justify-content: center

📚 リファレンス

レスポンシブデザインで使用する主要なCSSプロパティと概念：

@media：条件付きでCSSを適用するルール
viewport：ブラウザの表示領域の設定
max-width/min-width：要素の最大・最小幅の指定
flex-direction：Flexboxの並び方向を制御

詳細については、CSSリファレンスをご覧ください。

📘 次回予告

次回（レッスン13）は今まで学んだ内容の総仕上げ！ポートフォリオページのデザインを行います。これまで学んだCSSの知識を使って、実際のWebサイトを作成してみましょう。

« 前のレッスンへ戻るレッスン13へ進む »

LTech