レスポンシブ編 02 / 10 実践 約5分
ブレイクポイント｜表示が切り替わる境目
画面幅ごとに表示が切り替わる「境目」の考え方を解説します。設定が引き継がれる方向と、境目の手前が崩れやすい理由を図解します。
この教材で学べること
- ブレイクポイントとは何を指すのか
- 設定が引き継がれる方向
- 境目の手前が崩れやすい理由と確認方法
ブレイクポイントとは、表示の切り替わる画面幅の境目です。Studioでは、PC・タブレット・スマートフォンといった単位で表示を切り替えて編集できます。
設定は広い方から狭い方へ引き継がれる
ここが最重要です。広い画面での設定は狭い画面に引き継がれますが、狭い画面で加えた変更は広い画面には戻りません。
だからスマホから作り始めると、PC側をあとから全部作り直すことになります。順番だけは守ってください。詳しくは次の編集する順番で扱います。
境目の手前が崩れやすい
見落としがちなのが、切り替わる直前の幅です。たとえばタブレット表示に切り替わる直前のPC幅では、PC用のレイアウトのまま横幅だけが狭くなっています。ここで潰れが起きます。
| 確認する幅 | 見え方 | よくある崩れ |
|---|---|---|
| 広いPC | 設計どおり | 1行が長くなりすぎる |
| 切り替え直前のPC幅 | PC用のまま狭い | 3列が細くなり文字が折り返しだらけ |
| タブレット | 中間の設定 | 設定漏れでPCのまま表示される |
| 切り替え直前のスマホ幅 | タブレット用のまま狭い | 横スクロールが出る |
| 狭いスマホ | スマホ用の設定 | 文字が大きすぎて折り返す |
確認のコツ：ブラウザの幅をゆっくり連続で狭めていくと、どの幅で崩れ始めるかが分かります。決まったサイズだけで確認していると、境目の崩れを見逃します。
次は、この性質を踏まえた編集する順番です。