レスポンシブ編 03 / 10 実践 約5分
編集する順番｜PCから作り、スマホで直す
レスポンシブ対応で二度手間を防ぐための作業順序を解説します。どの幅で何を直すか、直してはいけないタイミングまでを整理します。
この教材で学べること
- PC→タブレット→スマホの順で進める理由
- 各幅で「やること」と「やってはいけないこと」
- 作り直しが発生する典型パターン
レスポンシブ対応で最も時間を無駄にするのが、順番を間違えたことによる作り直しです。作業の順序を守るだけで、この無駄はほぼ消えます。
基本の順序
| 順 | 幅 | やること | やってはいけないこと |
|---|---|---|---|
| 1 | PC | レイアウト・余白・文字をすべて確定させる | 中途半端なまま次の幅に行く |
| 2 | タブレット | 崩れた箇所だけ直す | PC側の設定を変えに戻る |
| 3 | スマホ | 横並びの解除・文字・余白を調整 | 要素の追加・削除 |
| 4 | PCに戻る | 崩れていないか最終確認 | ここで大きな設計変更をする |
3つ目の「要素の追加・削除」は特に危険です。スマホ幅で要素を消したつもりでも、実際にはすべての幅から消えます。表示・非表示の切り替えは幅ごとにできますが、削除は全幅に効きます。
作り直しになる典型パターン
直すのは「差分」だけ
狭い幅で作業するときは、全部を作り直すのではなく、PCから引き継がれた設定のうち「合わない部分だけ」を上書きします。この意識があると、設定が散らからずに済みます。
| スマホで上書きするもの | そのままでよいもの |
|---|---|
| 横並び → 縦積み | 色・背景 |
| 文字サイズ（見出しを小さく） | フォントの種類 |
| セクションの上下余白 | 角丸・影 |
| 画像の高さ・比率 | リンク先・テキストの中身 |
次は最も多い症状、横スクロールが出る原因です。