女性向けエンジニアスクール
3秒でわかる
レスポンシブ対応でレイアウトを切り替える画面幅の境目のこと。この幅を境にして、段組みの数や余白や文字の大きさを切り替えます。
もう少し詳しく
どういうものか
ブレークポイントは、CSS でレイアウトの見た目を切り替える画面幅の境目を指す。メディアクエリの条件として幅を指定し、その前後で段組みの数や余白、文字の大きさを変える。スマートフォンでは 1 列、タブレット以上では 2 列、といった切り替えを実現する仕組みになる。
なぜ必要か
同じ HTML を、幅 375 ピクセルの端末と 1440 ピクセルの画面の両方で読ませる必要がある。横並びの 3 列をそのまま狭い画面に押し込めば各列は潰れ、逆に 1 列のまま広い画面へ出せば一行が長くなりすぎて読みにくい。幅ごとに別ページを用意する代わりに、境目を決めて表示を切り替える方法が取られている。
具体例
.cards {
display: grid;
grid-template-columns: 1fr; /* 既定は 1 列 */
gap: 16px;
}
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}よく使われる境目の目安は次のとおり。
~767px スマートフォン 1 列
768~1023px タブレット 2 列
1024px~ デスクトップ 3 列以上つまずきやすいところ
min-width と max-width を混ぜて書くと、条件が重なった幅で両方が適用され、どちらが勝つか読めなくなる。狭い幅を既定にして min-width だけで広げていく書き方に統一すると、後から追う人が迷わない。
もう一つ、機種名から境目を決めると数が増え続けて破綻する。実際の見た目が崩れる幅を探し、そこに境目を置く。行が長くなりすぎる幅、文字が折り返して形が崩れる幅が目安になる。
viewport のメタタグを書き忘れると、スマートフォンが幅 980 ピクセルとして描画するため、メディアクエリが効いていないように見える。
似た用語との違い
同じ「ブレークポイント」という語は、デバッガで実行を止める位置も指す。CSS の文脈とデバッグの文脈で全く別物になるため、検索するときは css や デバッグ を添える。
覚え方
境目は端末に合わせるのではなく、レイアウトが破綻する幅に合わせる。ブラウザの幅を少しずつ狭めていき、見づらくなった瞬間の数値をそのまま境目にする。この手順で決めると、新しい端末が出ても作り直さずに済む。
