デザインデータを使ってコーディング練習をしていると、
次のような疑問を持つ人は多いと思います。
- ブレークポイントは768pxと書いてある
- でもSPカンプは375px
- 375pxに画面幅を固定して作るべきなのか？
結論から言うと、375pxに固定して作る必要はありません。
SPカンプの375pxは「固定幅」ではない
SPカンプで指定されている 375px は、
- スマホの代表的な画面幅
- デザインを確認するための基準値
を示しているだけです。
「実際のWebページを375px幅に固定して表示する」
という意味ではありません。
実際のスマホ画面は、
375pxより小さいものも大きいものも存在します。
ブレークポイント768pxの意味
課題や仕様でよく出てくる 768px は、
- レイアウトを切り替える目安
- SPとPC（またはタブレット以上）の境界
として使われることが多い数値です。
今回のようなケースでは、
- 768px以下：スマホレイアウト
- 768pxを超えたら：PCレイアウト
という考え方で問題ありません。
375px〜768pxはどう考えるか
ここが初心者が一番混乱しやすいポイントです。
376px〜768pxの間は、固定レイアウトではありません。
- 375pxの見た目をベースにする
- 画面幅に応じて要素や画像が自然に広がる
- 崩れず、無理のないレイアウトを保つ
という「レスポンシブな伸び方」をさせます。
この範囲に
「正解のデザインカンプ」が用意されていないのは、
コーディング側で判断する前提だからです。
実装の考え方まとめ
整理すると、次のイメージになります。
- 375px：最低限、この幅で崩れない
- 376px〜768px：画面幅に応じてなめらかに伸ばす
- 768px超：PCレイアウトに切り替える
SPカンプの数値とブレークポイントは、
役割がまったく違うという点を押さえておくと、
混乱しにくくなります。