第4回: レスポンシブデザインの極意

この回の目標

PC／スマホでレイアウトを切り替えられる
ブレイクポイントを自分で設定できる

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

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

画面サイズに合わせてレイアウトを変える仕組み

タブレット

スマートフォン

レイアウトの変化

画面幅によってレイアウトは次のように変わります

横並び → 縦並び
ナビゲーションの変化
文字サイズ調整

なぜレスポンシブが必要？

PCのデザインをそのままスマホで見た場合

お手本サイト

文字が小さい
横スクロールが出る
ボタンが押しづらい

レスポンシブデザインで作成した場合

文字サイズが適切
レイアウトが縦並び
ボタンが押しやすい

レスポンシブデザインの実装

レスポンシブの仕組み

HTMLは共通、CSSだけ切り替える
CSSは「PC・スマホ」等のデバイス指定ではなく、画面幅で切り替える
（1024px以上・768px以下・480px以下など）

HTML

PC用CSS

PCデザイン
1024px〜

タブレット用CSS

タブレットデザイン
768px〜1024px

スマホ用CSS

スマホデザイン
375px〜428px

レスポンシブの実装方法

メディアクエリ：画面幅によってCSSを切り替える機能

@media (max-width: 768px) {

  /* ここに適用させたいCSSを記述 */

}

→画面幅768px以下で適用

実際の例

h1 {
  font-size: 36px;
}

@media (max-width: 768px) {
  h1 {
    font-size: 24px;
  }
}

PC → 36px
スマホ（画面幅768px以下のとき） → 24px

min-width と max-width

max-width：◯px以下で適用

@media (max-width:768px)

min-width：◯px以上で適用

@media (min-width:768px)

まずはmax-widthだけ覚えればOK

ブレイクポイントについて

レイアウトが切り替わる画面幅のことをブレイクポイントと言う

PCレイアウト
↓
★ここで切り替え（768px以下）
↓
スマホレイアウト

→ブレイクポイントは「768px」となる

よく使うブレイクポイント

PC	1024px〜
タブレット	〜768px
スマホ	〜480px

ただし、絶対のルールではありません
レイアウトが崩れるタイミングで設定します。

レスポンシブ制作の基本手順

レスポンシブ制作は次の流れで行います

① PCレイアウト作成
② 画面を縮める
③ レイアウトが崩れる
④ メディアクエリで修正

Flexboxのレスポンシブ対応

Flexboxはレスポンシブと相性が良い

第3回で作った３カラムのカードをレスポンシブ化する

PC：横並び
スマホ：縦並び

カード1

カード2

カード3

実装


.three-column {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .three-column {
    flex-direction: column;
  }
}

これだけで、PCでは横並び・スマホでは縦並びになります。

検証モードについて

検証モードを使えば、PCからもスマホのレイアウトを確認できる

chromeの場合

ページ上を右クリック→「検証」をクリック

レスポンシブでよくある調整

よく調整される要素

文字サイズ
余白
画像サイズ
ボタンサイズ
ナビゲーションの切り替え　※第8回で詳しくやります

実例

@media (max-width: 768px) {
  h1 {
    font-size: 24px;
  }

  .section {
    margin: 30px 15px;
  }

  .button {
    width: 100%;
    padding: 16px;
  }
}

ミニ課題

第3回で作った2カラムレイアウトを、スマホでは縦並びに変更してください。

この回のまとめ

レスポンシブは画面幅で考える
メディアクエリで切り替える
Flexboxはレスポンシブと相性が良い
文字・余白・ボタンは必ず調整する