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

同じWebページでも、スマホで見るとレイアウトが崩れて見えることがありますよね。あれって防げるんですか？

防げるよ。レスポンシブデザインという考え方を使うと、画面の大きさに合わせて文字や余白、並び方を調整できるんだ。だから、どの端末でも読みやすくしやすいよ。

CSS第2章でFlexboxとGridをやったので、もうレイアウトは作れます。でもそれだけじゃ足りないんですか？

作れることと、どの画面でも気持ちよく使えることは別なんだ。PCでちょうどよい見た目でも、スマホでは横にはみ出したり、文字が小さすぎたりする。第4章では、その差を埋める考え方と実装を学んでいこう。

レスポンシブデザインが必要な理由

レスポンシブデザインとは、1つのWebページを複数の画面サイズに合わせて最適化する設計です。昔はPC向けサイトとスマホ向けサイトを別々に作ることもありましたが、今は1つのページを柔軟に変化させる作り方が主流です。

たとえば、PCでは3列に並べたカード一覧が見やすくても、スマホで同じ幅のまま表示すると窮屈になります。文字が小さくなったり、横スクロールが必要になったりすると、読む側はかなり疲れます。

利用環境がバラバラ スマホ、タブレット、ノートPC、大型モニターで同じページが見られる
読みやすさが変わる 画面幅によって1行に入る文字数や余白の感じ方が変わる
操作方法も違う スマホは指でタップ、PCはマウスやキーボードで操作する
作る側の効率が上がる 端末ごとに別ページを持たず、1つのHTMLとCSSを育てやすい

スマホ

幅 360px 前後

1列で縦に積む

タブレット

幅 768px 前後

2列で余白を保つ

幅 1280px 前後

情報を横に広く見せる

同じ HTML と CSS でも、画面幅に合わせて見せ方を調整するのがレスポンシブデザイン

ただ縮めればいいわけじゃなくて、読みやすさや押しやすさまで考えるんですね。

そうだね。レスポンシブデザインは「小さく表示する技術」ではなく、状況に合わせて見せ方を調整する設計なんだ。

PCとスマホで何が変わるのか

同じページでも、端末が変わると次のような差が出ます。

横幅の使い方

PCは横に広いので、複数の情報を並べて見せやすいです。一方でスマホは横幅が限られるため、縦に積み重ねたほうが読みやすいことが多くなります。

文字サイズと余白

PCでは余白を広めにとっても問題ありませんが、スマホで同じ余白を使うと中身が窮屈に見えることがあります。逆に、PC向けの小さな文字をスマホで表示すると読みにくくなります。

ボタンやリンクの押しやすさ

スマホでは指で操作するため、ボタンが小さすぎると押しにくくなります。レスポンシブデザインは見た目だけでなく、操作のしやすさも調整対象です。

固定幅のままだと起きやすい問題

.card-list {
    width: 960px;
    display: flex;
    gap: 24px;
}

.card {
    width: 300px;
    padding: 24px;
}

このCSSは、広い画面ではきれいに見えるかもしれません。ただし、スマホ画面では .card-list の width: 960px; が大きすぎて、画面からはみ出しやすくなります。ここで必要なのが、幅を固定しすぎない考え方です。

レスポンシブ対応の全体像

第4章では、レスポンシブ対応を次の流れで学びます。ここでは細かい書き方よりも、全体の地図をつかむことが目標です。

viewportを理解する ブラウザが「どの幅の画面としてページを表示するか」を決める考え方を知る
media queryを使う 画面幅ごとにCSSを切り替える方法を学ぶ
相対単位を使う % や rem などで、画面に応じて伸び縮みしやすいサイズ指定にする
FlexboxとGridを組み合わせる 第2章の知識を使って、並び方そのものを画面幅に合わせて変える

第4章で学ぶ4つのステップ

viewport

端末の幅を基準にページを表示する土台を整える

media query

幅が苦しくなる地点で見た目を切り替える

相対単位

％や rem で自然に伸び縮みする指定を作る

Flexbox / Grid

並び方や列数を画面幅に合わせて調整する

まずは「崩れ方」を見つける

レスポンシブ対応をするときは、最初から完璧なブレークポイントを考えるより、どこで読みづらくなるかを観察するほうが大切です。

横スクロールが出る 固定幅の要素が画面より大きい可能性が高い
文字が詰まりすぎる 余白やフォントサイズが画面幅に合っていない
横並びが苦しい 列数を減らすか、縦積みに切り替える必要がある
画像だけ大きすぎる max-width などで縮小できるようにする必要がある

軽く体験してみよう

今の例は、固定幅と柔軟な幅を同じ画面枠の中で見比べる形にしました。ここでは「なぜ詳しく効くのか」まで覚えなくて大丈夫です。固定幅だとはみ出しやすく、柔軟な幅だと収まりやすい、という違いをまず体感してください。

HTML

<section class="compare-demo">
  <div class="demo-block">
    <h3>固定幅の例</h3>
    <div class="demo-screen">
      <div class="panel-row panel-row-fixed">
        <div class="panel">お知らせ</div>
        <div class="panel">人気の記事</div>
      </div>
    </div>
  </div>

  <div class="demo-block">
    <h3>柔軟な幅の例</h3>
    <div class="demo-screen">
      <div class="panel-row panel-row-fluid">
        <div class="panel">お知らせ</div>
        <div class="panel">人気の記事</div>
      </div>
    </div>
  </div>
</section>

CSS

.compare-demo {
  display: grid;
  gap: 16px;
}

.demo-block h3 {
  margin-bottom: 8px;
  font-size: 16px;
}

.demo-screen {
  width: min(100%, 320px);
  padding: 12px;
  border: 2px solid #bbf7d0;
  border-radius: 16px;
  background: #f8fafc;
  overflow-x: auto;
}

.panel-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.panel-row-fixed {
  width: 460px;
}

.panel-row-fluid {
  width: min(100%, 460px);
}

.panel {
    padding: 20px;
    border-radius: 12px;
    background: #ecfdf5;
  min-height: 72px;
  box-sizing: border-box;
}

プレビュー:

※プレビューの右下にあるアイコンをドラッグして、実際の画面幅を動かして切り替えを確認できます。

この例では、上の固定幅は狭い枠より中身のほうが広いため、横にはみ出します。下の柔軟な幅は min(100%, 460px) を使っているので、狭い枠では枠の幅に合わせて縮み、広い枠では 460px まで広がります。

ここではクイズで細かく確認するよりも、どこが読みにくくなるかを観察する目を作ることが大切です。次回からは、実際に viewport や media query を使って、画面幅に応じた変化をコードで確かめていきます。

まとめ

レスポンシブデザインは、ただ画面を縮める技術じゃなくて、端末ごとに読みやすく見せる設計なんですね。

スマホで押しやすいか、横にはみ出さないかまで考えるのが大事だと分かりました。次は、実際にどう切り替えるかを知りたいです。

その理解で大丈夫です。まず必要性と全体像が見えれば、次の技術も入りやすくなる。次回は viewport と media query を使って、画面幅に応じてスタイルを切り替える基本を学ぼう。

レスポンシブデザイン入門のポイント

レスポンシブデザイン 1つのページを複数の画面サイズに合わせて調整する設計
固定しすぎない 幅・余白・列数を固定値だけで作ると、小さい画面で崩れやすい
観察が出発点 横スクロール、文字の詰まり、押しにくさを見つけることが第一歩
第4章の流れ viewport、media query、相対単位、Flexbox/Gridの順で理解すると整理しやすい

次回は、レスポンシブ対応の土台になる viewport と media query の基本を学びます。