HTML/CSS / LESSON 15 / HT15

HTML/CSS：レスポンシブ対応

1学習の目的

2基礎解説

やること書き方重要度
viewport の指定<meta name="viewport" …>必須
画面幅で切り替え@media (max-width: 768px)中心的な手法
画像の伸縮max-width: 100%必須
幅の上限max-width: 900px固定幅の代わり
✅ 覚えるべき重要ポイント
  1. ⚠ viewport の meta タグが無いと、スマホでPC版がそのまま縮小表示される。CSSをどれだけ書いても効かないので、head に必ず書く。
  2. @media (max-width: 768px) は「画面幅768px以下のとき」という意味。この中に書いたスタイルが、条件を満たすときだけ適用される。
  3. width: 900px ではなく max-width: 900px を使う。固定幅だとスマホで横スクロールが発生するが、max-width なら画面が狭いとき自動的に縮む。
  4. 画像には max-width: 100%; height: auto; を指定する。これが無いと、大きな画像がスマホの画面からはみ出す。
  5. 切り替えの境目（ブレークポイント）は768pxが定番。タブレットとスマホの境目にあたる。必要なら480pxや1024pxも追加する。

現場使用例：カード一覧の列数変更、メニューの折りたたみ、文字サイズの調整、PC限定コンテンツの非表示。今やレスポンシブでないサイトは検索順位でも不利になる。

<!-- ⚠ これが無いとスマホで崩れる -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

/* 画像は必ず伸縮させる */
img {
  max-width: 100%;
  height: auto;
}

/* 固定幅ではなく上限で指定 */
.container {
  max-width: 900px;    /* width: 900px ではない */
  margin: 0 auto;
  padding: 0 20px;
}

/* PC：3列 */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* スマホ：1列に切り替え */
@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* 表示の出し分け */
.sp-only { display: none; }        /* PCでは隠す */
.pc-only { display: block; }

@media (max-width: 768px) {
  .sp-only { display: block; }     /* スマホで表示 */
  .pc-only { display: none; }      /* スマホで隠す */
}

/* 文字サイズや余白も調整できる */
@media (max-width: 768px) {
  h1      { font-size: 1.5rem; }
  .section{ padding: 24px 16px; }
}

3基本ドリル（10問）

HT15-D01 viewport の meta タグを含む完全なHTMLを書け（head に文字コードとviewport、body に段落1つ）。 コーディング★☆☆無料
期待される結果

viewport が正しく指定されている

ヒント

<meta name="viewport" content="width=device-width, initial-scale=1"> と書く。

模範解答
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>レスポンシブ対応</title>
</head>
<body>
  <p>スマホでも読みやすいページ</p>
</body>
</html>
解説

これが無いとスマホでPC版が縮小表示される。文字が極小になり、CSSのメディアクエリも意図どおり動かなくなる。

HT15-D02 @media (max-width: 768px) はどういう意味か。
A. 幅768px以上　B. 幅768px以下　C. 幅768px ちょうど　D. 高さ768px 選択★☆☆無料
期待される結果

解答 == B

ヒント

max-width は「最大でこの幅まで」。

模範解答
B
解説

「最大768px」＝768px以下のときという意味。スマホやタブレットを対象にする定番の書き方。

HT15-D03 画像が画面からはみ出さないよう、img に伸縮の指定をするCSSを書け（img も1つ配置）。 コーディング★☆☆無料
期待される結果

max-width が100%

ヒント

max-width: 100%; と height: auto; の2つを指定する。

模範解答
<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

<img src="photo.jpg" alt="写真">
解説

height: auto も必要。これが無いと縦横比が崩れて、画像が潰れて表示される。

HT15-D04 画面幅で切り替えるルールの書き出しを補ってコードを完成させよ。 穴埋め★☆☆無料
コード
<style>
  p { font-size: 20px; }

  ____ (max-width: 768px) {
    p { font-size: 16px; }
  }
</style>

<p>本文</p>
期待される結果

メディアクエリが機能する

ヒント

「メディア」を意味する6文字（@から始まる）。

模範解答
@media
解説

@media で条件付きのスタイルを書ける。条件を満たすときだけ、中のルールが適用される。

HT15-D05 スマホで横スクロールを防ぐために、幅の指定として適切なのはどれか。
A. width: 900px　B. max-width: 900px　C. min-width: 900px　D. height: 900px 選択★☆☆無料
期待される結果

解答 == B

ヒント

画面が狭いとき縮んでほしい。

模範解答
B
解説

max-width なら「900pxを超えない」だけなので、画面が狭ければ自動的に縮む。width だと固定されてはみ出す。

HT15-D06 PCでは3列、スマホ（768px以下）では1列になるカード一覧を作れ（Grid、gap 16px、カード3つ）。 コーディング★★☆広告解放
期待される結果

PC3列/SP1列に切り替わる

ヒント

メディアクエリの中で grid-template-columns を上書きする。

模範解答
<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  @media (max-width: 768px) {
    .cards {
      grid-template-columns: 1fr;
    }
  }

  .card {
    padding: 16px;
    background-color: #ddd;
  }
</style>

<div class="cards">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>
解説

これがレスポンシブの最も基本的な形。PCでは横に並べ、スマホでは縦に積む——画面幅に応じた最適な見せ方に切り替える。

HT15-D07 固定幅ではなく上限を指定するプロパティを補ってコードを完成させよ。 穴埋め★★☆広告解放
コード
<style>
  .container {
    ____: 900px;
    margin: 0 auto;
  }
</style>

<div class="container">中身</div>
期待される結果

max-width が900px

ヒント

「最大の幅」を意味する9文字のプロパティ（ハイフン含む）。

模範解答
max-width
解説

max-width なら画面が狭いとき自動的に縮む。レスポンシブ対応では width より max-width を使うのが原則。

HT15-D08 viewport の meta タグを書き忘れるとどうなるか。
A. 何も起きない　B. スマホでPC版が縮小表示される　C. エラーになる　D. 画像が出ない 選択★★☆広告解放
期待される結果

解答 == B

ヒント

スマホは既定でPC幅（980px程度）として表示しようとする。

模範解答
B
解説

文字が極小になり、メディアクエリも効かなくなる。CSSをどれだけ書いても無駄になるので、最初に必ず書く。

HT15-D09 PCでのみ表示される要素と、スマホでのみ表示される要素を作れ（768pxで切り替え）。 コーディング★★☆広告解放
期待される結果

PC/SPで表示が入れ替わる

ヒント

通常は pc-only を block、sp-only を none にし、メディアクエリで逆にする。

模範解答
<style>
  .sp-only { display: none; }
  .pc-only { display: block; }

  @media (max-width: 768px) {
    .sp-only { display: block; }
    .pc-only { display: none; }
  }
</style>

<p class="pc-only">PC用の案内</p>
<p class="sp-only">スマホ用の案内</p>
解説

画面サイズによって内容を出し分けられる。ただし多用するとHTMLが肥大化するので、本当に必要な場面に限る。

HT15-D10 スマホ（768px以下）のとき、見出しの文字サイズと余白を小さくするCSSを書け（PC：32px・padding 40px／スマホ：24px・padding 20px）。 コーディング★★☆広告解放
期待される結果

PC/SPで数値が変わる

ヒント

メディアクエリの中で font-size と padding を上書きする。

模範解答
<style>
  h1 {
    font-size: 32px;
    padding: 40px;
  }

  @media (max-width: 768px) {
    h1 {
      font-size: 24px;
      padding: 20px;
    }
  }
</style>

<h1>見出し</h1>
解説

スマホでは余白を詰めるのが定石。画面が狭いので、PCと同じ余白では内容の表示領域が足りなくなる。

4実践シナリオ（5問）

HT15-S01 【段階的な列数変更】カード一覧をPC 3列・タブレット（1024px以下）2列・スマホ（768px以下）1列に切り替えよ（Grid、gap 20px、カード4つ）。 コーディング★★☆広告解放
期待される結果

3段階で列数が変わる

ヒント

メディアクエリを2つ書く。狭い条件を後に書くのが原則。

模範解答
<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  @media (max-width: 1024px) {
    .cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .cards {
      grid-template-columns: 1fr;
    }
  }

  .card {
    padding: 16px;
    background-color: #ddd;
  }
</style>

<div class="cards">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</div>
解説

広い条件から狭い条件へ順に書く。逆順だと、768px以下でも1024pxのルールが後から上書きしてしまう（HT07の後勝ちの原則）。

HT15-S02 【コンテナの幅制限】.container に max-width 900px・中央配置・左右 padding 20px を指定し、中に段落を入れよ。 コーディング★★☆広告解放
期待される結果

max-widthが900px、中央配置

ヒント

box-sizing も指定すると padding を含めた幅になる。

模範解答
<style>
  * {
    box-sizing: border-box;
  }

  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
  }
</style>

<div class="container">
  <p>画面が広いときは900pxまで、狭いときは画面幅に合わせて縮みます。</p>
</div>
解説

これがレスポンシブなコンテナの標準形。左右の padding があるので、スマホでも文字が画面端にくっつかない。

HT15-S03 【メニューの切り替え】PCでは横並び、スマホでは縦並びになるナビゲーションを作れ（Flexbox、gap 20px、3項目）。 コーディング★★☆広告解放
期待される結果

PC横並び/SP縦並び

ヒント

メディアクエリの中で flex-direction: column; に変える。

模範解答
<style>
  nav {
    display: flex;
    gap: 20px;
  }

  @media (max-width: 768px) {
    nav {
      flex-direction: column;
      gap: 8px;
    }
  }

  nav a {
    text-decoration: none;
    color: #0066cc;
  }
</style>

<nav>
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</nav>
解説

flex-direction を変えるだけで縦横が切り替わる。スマホでは縦に並べたほうが、リンクが押しやすくなる。

HT15-S04 【2カラムの解除】PCではサイドバー240px＋本文、スマホでは縦積みになるレイアウトを作れ（Grid、gap 24px）。 コーディング★★★広告解放
期待される結果

PC2カラム/SP1カラム

ヒント

grid-template-columns を 1fr に変えると縦積みになる。

模範解答
<style>
  .layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }

  @media (max-width: 768px) {
    .layout {
      grid-template-columns: 1fr;
    }
  }

  .sidebar { background-color: #eee; padding: 16px; }
  .main    { background-color: #f9f9f9; padding: 16px; }
</style>

<div class="layout">
  <aside class="sidebar">サイドバー</aside>
  <main class="main">本文エリア</main>
</div>
解説

スマホでは2カラムを維持できない。240pxのサイドバーを残すと本文が極端に狭くなるので、縦に積むのが定石。

HT15-S05 【画像の伸縮】max-width: 100% を指定した画像と、指定していない画像を並べ、狭い画面での違いを確認せよ（画像の幅は width="1000" とする）。 コーディング★★★広告解放
期待される結果

指定ありは縮む、なしははみ出す

ヒント

img に max-width: 100% を付けたものと付けないものを比較する。

模範解答
<style>
  .responsive {
    max-width: 100%;
    height: auto;
  }
</style>

<img class="responsive" src="photo.jpg" alt="伸縮する画像" width="1000">
<img src="photo.jpg" alt="はみ出す画像" width="1000">
解説

指定が無い画像は1000pxのままで、スマホでは横スクロールが発生する。img { max-width: 100%; } は全サイト共通で書いておくとよい。

5仕上げ課題

HT15-FINAL 【レスポンシブなページ】これまでの技術を統合し、スマホでも崩れないページを作れ。

head：文字コードと viewport を指定

CSSの指定
① *：box-sizing、body：margin 0
② img：max-width: 100%、height: auto
③ .container：max-width: 900px、中央配置、padding 0 20px
④ .header：Flexbox、space-between、縦中央、高さ 64px
⑤ .cards：Grid、repeat(3, 1fr)、gap 20px
⑥ h1：32px
⑦ .sp-only：display: none

スマホ（768px以下）での変更
・.cards → 1列
・.header → 縦並び（flex-direction: column）、高さ auto、padding 12px 0
・h1 → 24px
・.sp-only → display: block

HTML：container の中に header（logo と nav）、h1、cards（カード3つ）、p.sp-only

確認すること：PC幅（1200px）とスマホ幅（375px）で、列数・文字サイズ・表示が切り替わる 総合★★★広告解放
期待される結果

PC/SPで全項目が切り替わる

ヒント

メディアクエリの中に、変更したいルールをまとめて書く。PC幅では cards が1行（3列）、スマホ幅では3行（1列）になる。

模範解答
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>レスポンシブなページ</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

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

    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64px;
    }

    h1 {
      font-size: 32px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .card {
      padding: 16px;
      border: 1px solid #ddd;
    }

    .sp-only {
      display: none;
    }

    @media (max-width: 768px) {
      .cards {
        grid-template-columns: 1fr;
      }

      .header {
        flex-direction: column;
        height: auto;
        padding: 12px 0;
      }

      h1 {
        font-size: 24px;
      }

      .sp-only {
        display: block;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="header">
      <div class="logo">ゼロカラカフェ</div>
      <nav><a href="#">メニュー</a></nav>
    </div>

    <h1>本日のおすすめ</h1>

    <div class="cards">
      <div class="card">コーヒー</div>
      <div class="card">ケーキ</div>
      <div class="card">サンドイッチ</div>
    </div>

    <p class="sp-only">お電話でのご予約も承ります。</p>
  </div>

</body>
</html>
解説

このページは、画面幅375pxでも1200pxでも破綻しない。同じHTMLのまま、CSSだけで見せ方を切り替えている——これがレスポンシブデザインの本質だ。スマホ用に別ページを作る必要はない。

最も重要なのは viewport の meta タグだ。これを書き忘れると、ここまでのCSSがすべて無駄になる。スマホは既定でページを980px幅として描画し、それを縮小表示するため、メディアクエリの768px以下という条件に一度も当てはまらない。文字は極小になり、レイアウトはPC版のまま——初心者が最も多く踏む地雷がこれだ。

max-width: 900px の選択にも意味がある。もし width: 900px と書いていたら、375pxの画面でも900pxを主張し続け、横スクロールが発生する。max-width なら「900pxを超えない」だけなので、狭い画面では素直に縮む。

そして img { max-width: 100%; }。これは全サイト共通で書いておくべき1行だ。写真1枚のせいでページ全体が横に伸びるという事故を、確実に防いでくれる。

次章では position を学ぶ。要素を重ねたり、スクロールしても固定したり——通常の流れから外れた配置を扱えるようになる。