レスポンシブ編 01 / 10 実践 約5分
レスポンシブとは｜1つのデータで全画面に対応する
レスポンシブ対応の考え方を、スマホ用サイトを別に作る方式との違いから解説します。1つのデータを画面幅ごとに調整するという前提を最初に押さえます。
この教材で学べること
- レスポンシブが何をしているのか
- PC用・スマホ用を別に作る方式との違い
- この章で扱う範囲と、直す順番
レスポンシブとは、1つのサイトデータを、見る画面の幅に応じて表示を変える仕組みです。スマホ用のサイトを別に用意するのではなく、同じ中身の見せ方だけを切り替えます。
1つのデータを切り替える
これはスマホ用サイトを別に作るのとは根本的に違います。別々に作ると、更新のたびに両方直す必要があり、片方だけ古いという事故が起きます。
| 方式 | 更新の手間 | 情報のずれ | いまの主流 |
|---|---|---|---|
| レスポンシブ（1データ） | 1回で済む | 起きない | こちら |
| PC用・スマホ用を別に作る | 2倍かかる | 片方が古くなる | ほぼ使われない |
なぜスマホ対応が必須なのか
多くのサイトで、訪問者の過半数がスマホから来ます。業種によっては7〜8割になります。PCで完璧でもスマホで崩れていれば、大半の人には崩れたサイトしか見えていないことになります。
納品後の指摘で最も多いのがここ：クライアントは自分のスマホでサイトを開きます。最初に見られるのはPCではなくスマホだと思って作ってください。
この章で直していく順番
崩れは症状ごとに原因が違います。この章は、次の順で1つずつ扱います。
| 順 | 扱うこと | 解決する症状 |
|---|---|---|
| 1 | ブレイクポイントと編集順 | 直したはずが元に戻る |
| 2 | 横スクロールの原因 | 横に動いてしまう |
| 3 | 横並びを縦積みに | カードが潰れて読めない |
| 4 | 文字・余白・画像 | 間延び、文字が大きすぎる |
| 5 | ナビゲーションと確認手順 | メニューが入りきらない |
次はブレイクポイントの考え方です。