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

この回の目標

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

レスポンシブデザインとは？
レスポンシブデザインの実装
レスポンシブ制作の基本手順
Flexboxのレスポンシブ対応
レスポンシブでよくある調整
ミニ課題
まとめ

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

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

画面サイズに合わせて見やすくレイアウトを変える設計のこと

タブレット

スマートフォン

レイアウトの変化

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

横並び → 縦並び

2カラムや3カラムなどのレイアウトはスマホだと狭くて読みにくいため、縦にすることで見やすくする

ここにテキストが入ります。

スマホ

ここにテキストが入ります。

ナビゲーションの変化

PCではメニューが横並びにすべて表示されているが、スマホでは横に並べるスペースがないためボタンをクリックするとメニューを開くようにする

スマホ

文字サイズ調整

PCでは大きいサイズでも問題ないが、スマホではそのままだと読みにくいのでサイズを下げたり改行位置を調整したりする

CODING LAB.

スマホ

CODING
LAB.

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

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とmin-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レイアウトで HTML / CSS を作成
狭い画面でのデザインの見え方を確認
レイアウトが崩れるポイントを発見
メディアクエリで修正

検証モードについて

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

確認方法

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

Flexboxのレスポンシブ対応

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

2カラムレイアウトのレスポンシブ化

第3回で作った2カラムのカードをレスポンシブ化してみよう

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

富士山（ふじさん）は日本でいちばん高い山で、標高は3,776メートルです。静岡県と山梨県の境目にあり、日本の象徴として世界的にも有名です。

種類：活火山
標高：3,776m（日本一高い山）
最後の噴火：1707年の宝永大噴火
世界遺産登録：2013年に UNESCO の世界文化遺産

実装

.two-column {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;    /* ここを追加 */
}

.two-column__item {
  width: 49%;
}

/* メディアクエリを追加 */
@media (max-width: 768px) {
  .two-column__item {
    width: 100%;
  }
}

flex-wrapで要素の回り込みを指定して、子要素の幅を「49%」→「100%」にすることでPCでは横並び・スマホでは縦並びになる

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

よく調整される要素

文字サイズ
余白
画像サイズ
ボタンサイズ

実例

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

  .section {
    padding: 30px 15px;    /* 上下余白 左右余白 */
  }

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

ミニ課題

ブレイクポイントを作って、フォントサイズや余白などを調整してみよう
3カラムレイアウトで【PC: 3つ並び】、【タブレット: 2つ並び】、【SP: 1つ並び】になるように作成してみよう
いろんなサイトを検証モードで確認して、画面サイズごとのデザインの変化を見てみよう
例：お手本サイト