「ブレークポイントは何pxにすればいい？」——結論から言うと、まずは768pxと1024pxの2つで足ります。数を増やすほど確認する組み合わせが増えるだけで、見た目が良くなるわけではありません。この記事では、よく使われる値の一覧と、増やしすぎないための考え方をまとめます。
CSSスマホでも見やすく：メディアクエリメディアクエリの書き方そのものを学ぶなら、先にCSSコースのこの回へ結論：この2つから始める
/* スマホ向けの見た目は、ここ（素のCSS）に書く */
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* 768px以上：タブレット・小さいPC */
@media (min-width: 768px) {
.cards {
grid-template-columns: 1fr 1fr;
}
}
/* 1024px以上：PC */
@media (min-width: 1024px) {
.cards {
grid-template-columns: 1fr 1fr 1fr;
}
}素のCSSがスマホ向け、メディアクエリで広い画面を上書きしていく形です。これをモバイルファーストと呼びます。
よく使われるブレークポイント一覧
数字に絶対の正解はありませんが、実務でよく見る値はだいたい決まっています。
| 値 | 想定している幅 | よく呼ばれる名前 |
|---|---|---|
| 480px | 大きめのスマホ（横向きなど） | スマホ |
| 768px | タブレット縦・小さいノートPC | タブレット |
| 1024px | ノートPC・タブレット横 | PC |
| 1280px | デスクトップ | 大画面 |
| 1536px | 高解像度の大型ディスプレイ | 特大 |
太字の2つが、いちばん出番の多い分かれ目です。有名なCSSフレームワークもおおむねこの近辺の値を採用しています。
主なデバイスの表示幅
デモや確認のときの目安として、代表的な幅を挙げておきます（CSSが見る幅の目安で、実際の解像度とは別の数字です）。
| 種類 | よくある幅 |
|---|---|
| 小さめのスマホ | 360〜390px |
| 大きめのスマホ | 390〜430px |
| タブレット（縦） | 768〜834px |
| タブレット（横）・小型ノート | 1024〜1180px |
| ノートPC | 1280〜1512px |
| 外付けディスプレイ | 1920px以上 |
確認は375px・768px・1280pxの3点を見れば、実用上ほとんどカバーできます。
min-widthで書く理由
max-width（狭いほうを条件にする）でも同じ見た目は作れますが、min-widthのほうが管理が楽です。
min-width（モバイルファースト） | max-width（PCファースト） | |
|---|---|---|
| 素のCSSに書くもの | スマホの見た目 | PCの見た目 |
| 上書きの方向 | 狭い→広い | 広い→狭い |
| 指定の重なり | 少ない | 増えやすい |
| スマホでの読みこみ | 余分な指定を読まない | PC向けの指定も読む |
いちばん実利があるのは指定が重なりにくいことです。スマホは表示できる要素が少ないので指定もシンプルになり、広い画面で足りない分だけを追加していく形になります。
書く場所は「まとめて最後」か「その場」か
メディアクエリの置き場所には2つの流派があります。
/* 流派1：CSSファイルの最後にまとめる */
.card { ... }
.header { ... }
@media (min-width: 768px) {
.card { ... }
.header { ... }
}/* 流派2：部品ごとにその場で書く */
.card {
padding: 12px;
}
@media (min-width: 768px) {
.card {
padding: 24px;
}
}
.header { ... }初心者におすすめは流派2です。1つの部品の指定が1か所に集まるので、「このカードの余白はどこで決まっている？」を探し回らずに済みます。ファイルの最後に全部集めると、部品が増えたときに対応関係を追えなくなります。
viewportのmetaタグがないと全部むだになる
これがいちばん多いつまずきです。<head>に次の1行がないと、スマホは「幅980px相当のPC画面」としてページを描き、それを縮小して表示します。つまりメディアクエリの条件に届かず、スマホでもPC向けの見た目のままになります。
<meta name="viewport" content="width=device-width, initial-scale=1">「PCの開発者ツールでは切りかわるのに、実機のスマホで変わらない」——そのときは真っ先にここを見てください。
HTMLheadの中身をそろえようheadとmetaタグの役割そのものは、HTMLコースのこの回へブレークポイントを使わずに済む書き方
段階を作らずにレスポンシブにできる場面は、思ったより多くあります。メディアクエリを書かなくて済むなら、それがいちばん管理が楽です。
カードの列数を自動で変える
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}「1枚は最低240px、入るだけ並べる」という指定なので、列数はブラウザが決めてくれます。
べんりワザCSS Gridチートシートこの書き方のくわしい読み方は、CSS Gridの早見表へ文字サイズを滑らかに変える
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}clamp()は「最小・ちょうどよく変わる値・最大」の3つを書く関数です。この例では「最小24px相当、画面幅の5%、最大48px相当」となり、段階ではなく連続して変わります。見出しの大きさは、これで済むことがほとんどです。
横並びを自動で折り返す
.row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.row > * {
flex: 1 1 240px; /* 240pxを下回ると折り返す */
}幅の上限だけ決める
.container {
width: 100%;
max-width: 1100px;
margin-inline: auto;
padding-inline: 16px;
}widthではなくmax-widthで上限だけ決めておくと、狭い画面では自動で縮みます。多くのサイトはこれだけで大部分がレスポンシブになります。
崩れる幅の見つけかた
ブレークポイントは「机の上で決める」より「崩れた幅で決める」ほうが確実です。
- 開発者ツールを開き、デバイスツールバー（
⌘ + ⇧ + M/Ctrl + Shift + M）をオンにする - 幅をゆっくりドラッグして狭めていく
- 文字がはみ出す・要素が重なる・横スクロールが出た幅を覚える
- その少し手前の幅をブレークポイントにする
この手順で足したブレークポイントは、必ず意味があります。逆に「768pxが定番だから」だけで足した指定は、あとから読み返しても理由が分からなくなります。
べんりワザ開発者ツールの使い方入門デバイスツールバーの使い方は、開発者ツール入門の記事へ効かないときのチェックリスト
- スマホの実機で変わらない →
viewportのmetaタグを確認（最有力） - 書いたのに何も起きない →
@mediaのあとに半角スペース、(min-width: 768px)の括弧とコロンを確認 - PC向けの指定が消えない →
min-widthとmax-widthが混ざっていませんか？ - 条件は合っているのに上書きされない → 素のCSSのほうが詳しいセレクタ（
.card p spanなど）になっていると、メディアクエリ側が負けます。セレクタの強さをそろえます - 横スクロールが出る → はみ出している要素を
overflowで隠す前に、原因の要素を探します。width: 100vwや固定pxの幅が犯人になりがちです - 画像が枠を超える → 画像に
max-width: 100%を付けます。レスポンシブの土台になる指定です
まとめ
- 最初は768pxと1024pxの2つで足りる。増やすのは崩れた幅を見つけたときだけ
min-widthのモバイルファーストで書く。max-widthと混ぜないviewportのmetaタグがないと、メディアクエリはスマホで効かないrepeat(auto-fit, minmax())・clamp()・max-widthで、段階を作らずに済む場面は多い- ブレークポイントは机の上で決めず、幅をドラッグして崩れた場所で決める
ブレークポイントは少ないほど良いものです。まず2つで組んでみて、困ったところだけ足していってください。