ブレイクポイントとは、レスポンシブデザインのレイアウトが構造を切り替える表示領域（ビューポート）の幅のことです。よく使われる無難な組み合わせは、大きめのスマホ向けに約640px、タブレット向けに768px、小型ノートPC向けに1024px、デスクトップ向けに1280pxで、remを使った min-width のクエリで書きます。ただし、この値はあくまで出発点と考え、端末のサイズを追いかけるのではなく、自分のコンテンツが崩れ始める位置にブレイクポイントを動かすほうが良い方法です。
よく使われるブレイクポイント一覧
| 範囲 | 典型的なブレイクポイント | 該当するもの |
|---|---|---|
| 小型スマホ | 基本スタイル（クエリなし） | 幅320〜375pxのスマホ |
| 大型スマホ | 480〜640px | 縦向きの390〜440pxのスマホ、横向きのスマホ |
| タブレット | 768px | iPad miniや縦向きのタブレット |
| 小型ノートPC、横向きのタブレット | 1024px | 横向きのiPad、拡大表示した13インチのノートPC |
| デスクトップ | 1280px | ほとんどのノートPCとデスクトップの画面 |
| ワイドデスクトップ | 1440〜1536px | 大型モニター |
ユーザーが標準の文字サイズを大きくしたときに追従するよう、remで書きましょう（40rem、48rem、64rem、80rem）。
主なフレームワークのブレイクポイント
| フレームワーク | ブレイクポイント（min-width） |
|---|---|
| Tailwind CSS v4 | 640、768、1024、1280、1536px |
| Bootstrap 5 | 576、768、992、1200、1400px |
| Material Design 3のウィンドウサイズクラス | compact < 600、medium 600〜839、expanded 840〜1199、large 1200〜1599、extra-large ≥ 1600（dp） |
大まかな形はどれも共通しています。600〜768前後でタブレットへ、1000〜1200前後でデスクトップへ切り替わり、さらに広いサイズが1〜2段階あります。詳しくはTailwindのブレイクポイントとBootstrapのブレイクポイントをご覧ください。
端末に合わせたブレイクポイントがすぐ古くなる理由
ブレイクポイントを端末の幅ぴったりに置きたくなるものです。あるiPhoneなら375、新しいモデルなら390、Plusモデルなら414といった具合です。問題は、端末が毎年変わることです。現行のiPhoneだけでも幅は375〜440 CSSピクセルに散らばっており（iPhone画面サイズ一覧を参照）、Androidスマホはさらに多くの幅を加え、折りたたみ端末や分割画面のウィンドウはどんな幅にもなり得ます。
特定の端末幅でしか成り立たないレイアウトは、その間の幅で崩れます。ブレイクポイントはレイアウトを変える必要がある位置を示すべきで、その間はレイアウトが可変であるべきです。
コンテンツからブレイクポイントを決める方法
- まず最も狭いレイアウトを作る。 幅は320px程度です。
- Chrome DevToolsのResponsiveモードで、表示領域をゆっくり広げる。
- デザインがおかしく見え始めたら止める。 1行が長くなりすぎた、カードが間延びした、2カラム目の余裕ができた、ナビゲーションが1行に収まりそう、といったタイミングです。
- その幅にブレイクポイントを追加する。 切りのよいremの値に丸めます。
- 対応する最も広いレイアウトまで繰り返す。
たいていは3〜5個のブレイクポイントになります。6個を超えるなら、一部はコンテナクエリや可変レイアウトの手法で解決したほうがよい、コンポーネント単位の問題を直している可能性があります。
可変レイアウトの手法でブレイクポイントを減らす
最近のCSSでは、多くのブレイクポイントが不要になります。
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))で列の数が自動的に増減します。flex-wrap: wrapとflex-basisを組み合わせると、場所が足りないときに要素が折り返します。clamp()で文字サイズや余白をなめらかに変化させられます：font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem)。width: min(100% - 2rem, 70rem)の1行で、左右の余白と最大幅を持つコンテナを作れます。
ブレイクポイントは、ナビゲーションの形式、ページのカラム数、サイドバーの位置など、構造の変更に使いましょう。
ブレイクポイントとタブレット
ブレイクポイントの選び方が最も表れるのがタブレットです。縦向きのiPadは機種によって幅744〜1032pxなので、768や1024のどちら側にも入り得ます。さらに回転すると別のブレイクポイントをまたぎます。タブレットは縦横両方でテストし、iPadのSafariは通常PC版サイトを要求することも覚えておきましょう。詳しくはChromeでサイトをiPad表示で見る方法をご覧ください。
ブレイクポイントのテスト方法
- DevToolsのデバイスツールバーで Show media queries をオンにすると、各ブレイクポイントがバーで表示されます。バーをクリックするとその幅に切り替わります。
- 各ブレイクポイントは、ちょうどの幅と1px狭い幅でテストします。
- 幅だけでなく、具体的なスマホやタブレットの機種でも確認しましょう。端末プリセットのある Mobile View Extension を使えば、複数の端末サイズでページを素早く見て回れます。
手順の全体はレスポンシブデザインのテスト方法で解説しています。
よくある質問
レスポンシブデザインの標準的なブレイクポイントは？
公式の標準はありません。よく使われるのは640、768、1024、1280px（Tailwind）や、576、768、992、1200、1400px（Bootstrap）です。どれか1つを選んで一貫して使いましょう。
スマホ向けにはどのブレイクポイントを使えばよいですか？
モバイルファーストのCSSでは、スマホにブレイクポイントは不要で、基本スタイルがそのまま適用されます。最初のブレイクポイントは通常480〜640pxの間で、レイアウトがより広いスペースを使い始める位置を示します。
サイトにはブレイクポイントがいくつ必要ですか？
3〜5個が一般的です。その間は可変レイアウトにし、コンテンツに構造の変更が必要な場所にだけブレイクポイントを追加しましょう。