よく使われるブレークポイント規準｜CSSレスポンシブ設計の目安を解説

ブレークポイントとは、画面幅に応じてレイアウトや文字サイズ、余白、表示要素を切り替えるための基準値です。CSSでは主にメディアクエリを使い、「768px以上なら2カラムにする」「1024px以上ならナビゲーションを横並びにする」のように指定します。MDNでも、メディアクエリはビューポート幅などの条件に応じてCSSを適用し、レスポンシブレイアウトを作るための重要な仕組みとして説明されています。

ただし、ブレークポイントには絶対的な世界共通規格があるわけではありません。Bootstrap、Tailwind CSS、Material UIなどのフレームワークにはよく使われる初期値がありますが、最終的にはサイトのデザイン、コンテンツ量、対象ユーザー、管理しやすさに合わせて調整する必要があります。この記事では、実務で使いやすいブレークポイントの目安と、CSSでの書き方を丁寧に整理します。

1. ブレークポイントとは

ブレークポイントは、レスポンシブデザインでレイアウトを切り替える境界のことです。画面幅がある値を超えたとき、または下回ったときに、CSSの指定を変更します。

たとえば、スマートフォンでは1カラム、タブレットでは2カラム、PCではサイドバー付きレイアウトにする場合、それぞれの切り替え位置がブレークポイントになります。

1.1 ブレークポイントの役割

ブレークポイントの役割は、画面幅に合わせて見やすいレイアウトへ切り替えることです。小さい画面では縦並び、大きい画面では横並びにすることで、ユーザーが読みやすく操作しやすいページになります。

特に、ナビゲーション、カード一覧、2カラムレイアウト、画像とテキストの横並び、フォーム、記事本文の最大幅などは、ブレークポイントの影響を受けやすい部分です。

1.2 メディアクエリとの関係

ブレークポイントは、CSSのメディアクエリで指定することが多いです。@media (min-width: 768px) のように書くと、画面幅が768px以上の場合だけ、その中のCSSが適用されます。

MDNでは、幅や高さの条件には min- や max- を付けて、指定した値以上または以下でCSSを適用できると説明されています。つまり、ブレークポイントはメディアクエリで使う条件値だと考えると分かりやすいです。

1.3 絶対的な正解はない

ブレークポイントには「必ずこの値にしなければならない」という絶対的な正解はありません。デバイスの種類は多く、スマートフォンやタブレットの画面幅も年々変化します。

そのため、特定の端末だけを基準にするより、コンテンツが崩れる位置、読みづらくなる位置、余白が不自然になる位置を見て決めるのが実務では重要です。

2. よく使われるブレークポイントの目安

Web制作でよく使われるブレークポイントには、いくつかの代表的な幅があります。特に 576px、640px、768px、900px、992px、1024px、1200px、1280px、1400px、1536px などは、フレームワークや実務のCSS設計でよく見かけます。

ただし、すべてを使う必要はありません。ブレークポイントが多すぎるとCSSが複雑になるため、まずは3〜5段階くらいで設計するのがおすすめです。

2.1 実務で使いやすい基本セット

実務で使いやすい基本セットは、480px、768px、1024px、1280px、1536px あたりです。スマートフォン、タブレット、ノートPC、デスクトップ、大型ディスプレイを大まかに分けられます。

小規模サイトなら、768pxと1024pxだけでも十分な場合があります。逆に、管理画面や複雑なLP、カード一覧が多いサイトでは、1280px以上の調整も必要になります。

2.2 Bootstrapの規準

Bootstrap 5.3では、初期ブレークポイントとして xs、sm、md、lg、xl、xxl の6段階が用意されています。値は、xsが576px未満、smが576px以上、mdが768px以上、lgが992px以上、xlが1200px以上、xxlが1400px以上です。Bootstrapは、これらをレスポンシブレイアウトの基礎として使い、Sassでカスタマイズできると説明しています。

Bootstrap基準は、一般的なWebサイトや管理画面で使いやすい構成です。特に md: 768px と lg: 992px は、タブレットとPCの切り替え目安としてよく使われます。

2.3 Tailwind CSSの規準

Tailwind CSSでは、初期ブレークポイントとして sm、md、lg、xl、2xl があり、それぞれ 640px、768px、1024px、1280px、1536px です。Tailwindはモバイルファーストの考え方を採用しており、接頭辞なしのクラスは全画面幅に適用され、md: のような接頭辞付きクラスはその幅以上で適用されます。

Tailwind基準は、現代的なWebアプリやLPで使いやすい値です。特に lg: 1024px と xl: 1280px は、PC向けのレイアウト切り替えに使いやすいポイントです。

2.4 Material UIの規準

Material UIでは、初期ブレークポイントとして xs、sm、md、lg、xl があり、それぞれ 0px、600px、900px、1200px、1536px です。Material UIでは、これらのブレークポイントがコンポーネント内部のレスポンシブ制御にも使われ、必要に応じてカスタマイズできます。

Material UI基準は、Reactアプリや管理画面でよく使われます。md: 900px という値はBootstrapやTailwindの md: 768px より広めなので、レイアウトの切り替えが少し遅くなる点に注意します。

3. 代表的なフレームワークの違い

ブレークポイントを決めるときは、既存フレームワークの規準を参考にすると便利です。ただし、Bootstrap、Tailwind CSS、Material UIでは値が少しずつ違います。

そのため、複数の技術を混ぜて使う場合は、どの規準をプロジェクトの基準にするかを先に決めておくことが重要です。

3.1 比較表

以下は、よく使われるフレームワークの初期ブレークポイントの比較です。CSSを自作する場合でも、この表を参考にすると設計しやすくなります。

3.2 Bootstrap寄りにする場合

Bootstrap寄りにする場合は、576px、768px、992px、1200px、1400px を基準にします。既存のBootstrapサイト、管理画面、12カラムグリッドを使うプロジェクトでは、この値に合わせると扱いやすいです。

特に、Bootstrapのグリッドやユーティリティクラスを使う場合、自作CSSのブレークポイントもBootstrapに合わせた方が混乱しにくくなります。

3.3 Tailwind寄りにする場合

Tailwind寄りにする場合は、640px、768px、1024px、1280px、1536px を基準にします。Tailwindを使わない自作CSSでも、この値は現代的なPC・タブレット・スマートフォン対応に使いやすいです。

Tailwindはモバイルファーストなので、小さい画面向けのCSSを先に書き、大きい画面に向けて上書きする設計と相性が良いです。Tailwind公式ドキュメントでも、モバイルレイアウトを先に実装し、sm、md などで大きい画面向けに重ねる考え方が説明されています。

4. おすすめの独自ブレークポイント

自作CSSでレスポンシブ設計をする場合、フレームワークの値をそのまま使ってもよいですが、プロジェクト用に少し整理したブレークポイントを決めるのもおすすめです。

重要なのは、値を増やしすぎないことです。ブレークポイントが多すぎると、同じコンポーネントに何度も上書きCSSを書くことになり、保守が難しくなります。

4.1 小〜中規模サイト向け

小〜中規模サイトでは、まず 768px、1024px、1280px の3つを基準にすると管理しやすいです。スマートフォンは基本スタイル、768px以上でタブレット、1024px以上でPC、1280px以上で広めのPCという考え方です。

LP、企業サイト、ブログ、サービス紹介ページでは、この3段階だけでも十分なことが多いです。必要になったときだけ、480pxや1536pxを追加します。

4.2 ブログ・SEO記事向け

ブログやSEO記事では、本文の読みやすさが最優先です。スマートフォンでは1カラム、タブレット以上で余白を増やし、PCではサイドバーを表示する設計が使いやすいです。

おすすめは、768pxで本文余白を広げ、1024pxで2カラムに切り替え、1280pxで全体の最大幅を調整する方法です。これなら、本文の読みやすさとサイドバー表示のバランスを取りやすくなります。

4.3 Webアプリ・管理画面向け

Webアプリや管理画面では、ナビゲーション、サイドメニュー、テーブル、カード、フォームが多いため、ブレークポイントをやや細かく設定することがあります。

600px、900px、1200px、1536px のように、Material UI寄りの値を採用すると、React系UIライブラリとの相性がよくなります。特に管理画面では、900px前後でサイドメニューやグリッドを切り替えるケースがよくあります。

5. モバイルファーストで書く

現在のレスポンシブ設計では、モバイルファーストでCSSを書く方法が一般的です。まずスマートフォン向けの基本スタイルを書き、画面幅が広くなるにつれてCSSを追加します。

この方法は、CSSが整理しやすく、スマートフォン表示を優先しやすいというメリットがあります。Bootstrapもモバイルファーストを目標とし、最小ブレークポイント向けの最小限のスタイルから大きい画面向けに重ねる考え方を説明しています。

5.1 min-widthを使う

モバイルファーストでは、min-width を使うことが多いです。基本CSSはスマートフォン向けに書き、768px以上、1024px以上のように段階的に上書きします。

この書き方にすると、小さい画面向けのCSSが土台になり、大きい画面だけに必要なCSSを追加できます。結果として、CSSの流れが読みやすくなります。

ファイル名: style.css｜言語: CSS｜用途: モバイルファーストの基本ブレークポイント

.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

5.2 max-widthを使う場面

max-width は、PC向けCSSを先に書いて、狭い画面だけ上書きしたい場合に使えます。ただし、プロジェクト全体で min-width と max-width が混ざりすぎると、CSSの流れが分かりにくくなります。

既存サイトの改修では max-width が便利な場合もありますが、新規制作ではモバイルファーストの min-width を基本にする方が管理しやすいです。

ファイル名: style.css｜言語: CSS｜用途: PC基準のCSSをスマートフォンで上書きする

.layout {
  display: flex;
  gap: 32px;
}

@media (max-width: 767px) {
  .layout {
    display: block;
  }
}

6. CSS変数でブレークポイントを管理する

ブレークポイントを複数のファイルやコンポーネントで使う場合は、値をどこかにまとめて管理すると便利です。CSSだけで完全にメディアクエリの値を変数化するには制限がありますが、Sassや設計ドキュメントでは共通値として管理できます。

プロジェクトで使うブレークポイント名を決めておくと、チーム内でも「tabletは768px」「desktopは1024px」のように認識をそろえやすくなります。

6.1 CSSコメントで基準を明記する

純粋なCSSだけで書く場合でも、ファイル上部にブレークポイント一覧をコメントとして残しておくと便利です。あとから見た人が、どの値を使えばよいか迷いにくくなります。

特に、複数人でCSSを書く場合は、勝手に790pxや1100pxなどの中途半端な値が増えないように、最初に規準を明記しておくことが大切です。

ファイル名: style.css｜言語: CSS｜用途: ブレークポイント規準をコメントで明記する

/*
  Breakpoints:
  - tablet: 768px
  - desktop: 1024px
  - wide: 1280px
*/

.section {
  padding: 32px 20px;
}

@media (min-width: 768px) {
  .section {
    padding: 56px 32px;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 80px 40px;
  }
}

6.2 Sassで管理する

Sassを使う場合は、変数やマップでブレークポイントを管理できます。これにより、同じ値を何度も手書きする必要がなくなり、変更時の修正漏れを減らせます。

BootstrapもSassのマップでブレークポイントをカスタマイズできるため、Sassを使った設計では、ブレークポイント管理を変数化する考え方が一般的です。

ファイル名: _breakpoints.scss｜言語: SCSS｜用途: ブレークポイントを変数で管理する

$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;
$breakpoint-wide: 1280px;

@mixin mq($width) {
  @media (min-width: $width) {
    @content;
  }
}

.layout {
  display: block;

  @include mq($breakpoint-desktop) {
    display: flex;
    gap: 32px;
  }
}

7. コンテンツ基準で決める考え方

ブレークポイントは、端末名だけで決めるより、コンテンツが崩れる位置で決める方が実務的です。たとえば、カードが2列では窮屈になる幅、ナビゲーションが折り返す幅、本文が長すぎて読みにくくなる幅を確認します。

MDNでも、FlexboxやCSS Gridを使えばメディアクエリなしで柔軟なコンポーネントを作れる場合があり、常にメディアクエリが必要とは限らないと説明されています。つまり、ブレークポイントは「画面幅」だけでなく「コンテンツがどう見えるか」を基準に考えることが大切です。

7.1 ナビゲーションの崩れを見る

ヘッダーナビゲーションは、ブレークポイントを決める重要な要素です。メニュー項目が横に並びきらなくなる幅で、ハンバーガーメニューに切り替えると自然です。

このとき、「スマホだから768pxで切り替え」と決めるのではなく、実際にナビゲーションの文字数や余白を見ながら調整します。項目数が多いサイトでは、1024px未満でメニューを畳む方がよい場合もあります。

7.2 カード一覧の列数を見る

カード一覧では、カードの最小幅を決めてから列数を考えると設計しやすくなります。たとえば、カード1枚に最低280px必要なら、画面幅に応じて1列、2列、3列に切り替えます。

この場合、ブレークポイントを固定値で細かく決めるより、CSS Gridの auto-fit や minmax() を使った方が柔軟に対応できる場合もあります。

ファイル名: style.css｜言語: CSS｜用途: ブレークポイントを減らすカード一覧

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

7.3 本文幅を見る

SEO記事やブログでは、本文幅が広すぎると読みづらくなります。PCだからといって本文を画面いっぱいに広げるのではなく、最大幅を制限することが重要です。

本文幅はブレークポイントだけでなく、max-width や max-inline-size で管理します。読みやすさを優先するなら、大型画面では余白を増やし、本文の行長を一定に保つ設計が向いています。

ファイル名: style.css｜言語: CSS｜用途: 記事本文の最大幅を調整する

.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px;
}

@media (min-width: 1024px) {
  .article {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

8. よく使うブレークポイント命名

ブレークポイントをチームで管理する場合、名前の付け方も重要です。sm、md、lg のような短い名前でもよいですが、独自CSSでは tablet、desktop、wide のように意味が分かる名前も使いやすいです。

命名を統一しないと、同じ768pxでも md、tablet、tab のように複数の名前が混在し、保守しにくくなります。

8.1 シンプルな命名

小規模サイトでは、tablet、desktop、wide の3つで十分です。意味が分かりやすく、デザイナーやディレクターとも共有しやすい名前です。

ただし、フレームワークを使っている場合は、そのフレームワークの命名に合わせた方が混乱しにくくなります。Bootstrapなら sm、md、lg、Tailwindなら sm、md、lg、xl などです。

8.2 推奨命名表

独自CSSで迷った場合は、以下のように名前を決めると分かりやすいです。

9. 2カラムレイアウト用のブレークポイント

2カラムレイアウトでは、どの幅から横並びにするかが重要です。早すぎる幅で2カラムにすると本文が狭くなり、遅すぎるとPCで余白が無駄になります。

ブログやSEO記事なら、1024px以上で2カラムにするのが安全です。タブレットでは1カラムのまま余白だけ広げ、PC以上でサイドバーを表示すると読みやすくなります。

9.1 1024px以上で2カラムにする

1024px以上で2カラムにすると、メイン本文とサイドバーの両方に十分な幅を確保しやすくなります。768pxで2カラムにすると、サイドバーが狭くなりすぎる場合があります。

特に、記事本文を読みやすくしたいSEOページでは、無理にタブレットで2カラムにしない方がよい場合があります。

ファイル名: style.css｜言語: CSS｜用途: 1024px以上で2カラムにする

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
}

.main {
  min-width: 0;
}

@media (min-width: 1024px) {
  .page {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1;
  }

  .sidebar {
    flex: 0 0 300px;
  }
}

9.2 768px以上でカードを2列にする

カード一覧や商品一覧では、768px以上で2列、1024px以上で3列にする設計がよく使われます。本文とサイドバーの2カラムよりも、カード一覧の方が早い段階で複数列にしやすいです。

ただし、カード内の文字量が多い場合は、2列化を遅らせた方が読みやすいこともあります。実際のコンテンツを入れて確認することが大切です。

ファイル名: style.css｜言語: CSS｜用途: カード一覧を段階的に複数列へ切り替える

.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

10. ブレークポイントを増やしすぎない

ブレークポイントを細かく増やしすぎると、CSSの管理が難しくなります。たとえば、480px、600px、640px、720px、768px、900px、1024px、1100px、1200px、1280px のように多くなると、どこで何を上書きしているのか追いづらくなります。

必要な値だけを使い、例外的な調整はコンポーネント単位で考える方が保守しやすいです。

10.1 基本は3〜5個で十分

一般的なサイトでは、基本ブレークポイントは3〜5個で十分です。たとえば、768px、1024px、1280px の3つを使い、必要に応じて1536pxを追加する程度で管理しやすくなります。

小さいスマートフォン向けに特別な調整が必要な場合だけ、360pxや480pxを追加します。最初から多くの値を用意する必要はありません。

10.2 中途半端な値を増やさない

「この部分だけちょっと崩れるから837pxで直す」のような指定を繰り返すと、CSSが複雑になります。中途半端な値が増えると、後から別の人が見たときに意図が分かりにくくなります。

どうしても必要な場合は、そのコンポーネント専用の理由をコメントで残すと安全です。グローバルなブレークポイントとしては、できるだけ共通値にそろえましょう。

ファイル名: style.css｜言語: CSS｜用途: 例外ブレークポイントに理由を書く

/* カードタイトルが3行以上になりやすいため、このコンポーネントのみ900pxで調整 */
@media (min-width: 900px) {
  .pricing-card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

11. コンテナクエリも検討する

最近のCSSでは、画面幅ではなく親要素の幅に応じてスタイルを切り替えるコンテナクエリも使われます。Tailwind CSSのドキュメントでも、コンテナクエリはビューポート全体ではなく親要素のサイズに基づいてスタイルを変更でき、コンポーネントをより再利用しやすくすると説明されています。

コンポーネント単位でレイアウトを切り替えたい場合、ブレークポイントよりコンテナクエリの方が自然なことがあります。

11.1 画面幅ではなく部品幅で考える

同じカードでも、メインエリアに置く場合とサイドバーに置く場合では、使える幅が違います。ビューポート幅だけで判断すると、同じ画面幅でも部品の見た目が不自然になることがあります。

コンテナクエリを使えば、部品そのものが置かれた場所の幅に応じてスタイルを変えられます。再利用コンポーネントが多いサイトでは便利です。

11.2 コンテナクエリのコード例

コンテナクエリでは、親要素に container-type を指定し、その中の要素を @container で切り替えます。カードやメディアオブジェクトのような部品に向いています。

ファイル名: style.css｜言語: CSS｜用途: コンテナ幅に応じてカードを切り替える

.card-wrapper {
  container-type: inline-size;
}

.profile-card {
  display: grid;
  gap: 16px;
}

@container (min-width: 480px) {
  .profile-card {
    grid-template-columns: 160px 1fr;
    align-items: center;
  }
}

12. 実務向けの推奨規準

実務で迷った場合は、まず以下のような規準から始めると扱いやすいです。BootstrapやTailwind CSSの値を参考にしつつ、自作CSSではシンプルな3〜5段階に整理します。

この規準は絶対ではありませんが、企業サイト、ブログ、LP、サービスサイトで使いやすいバランスです。

12.1 推奨ブレークポイント

12.2 推奨CSS

以下のように、まずスマートフォン向けのCSSを書き、768px、1024px、1280pxで段階的に調整すると、CSSの流れが分かりやすくなります。

ファイル名: style.css｜言語: CSS｜用途: 実務向けの推奨ブレークポイントセット

:root {
  --container-width: 1120px;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 40px 0;
}

@media (min-width: 768px) {
  .container {
    padding: 0 32px;
  }

  .section {
    padding: 64px 0;
  }
}

@media (min-width: 1024px) {
  .layout {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1;
    min-width: 0;
  }

  .sidebar {
    flex: 0 0 300px;
  }
}

@media (min-width: 1280px) {
  .section {
    padding: 88px 0;
  }
}

13. チェックポイント

ブレークポイントを決めたら、必ず実際の表示で確認します。数値だけを見て決めると、コンテンツ量や文字数の違いで崩れることがあります。

特に、ナビゲーション、カード一覧、2カラム、記事本文、画像、表、フォームは重点的に確認しましょう。

13.1 確認する項目

画面幅を少しずつ変えながら、レイアウトが急に崩れないか確認します。ブラウザの開発者ツールを使って、360px、375px、390px、414px、768px、1024px、1280pxあたりを確認すると実務では便利です。

ただし、特定端末だけに依存しすぎるのは避けます。目的は「特定の端末に合わせること」ではなく、「どの幅でも読みやすく操作しやすいこと」です。

13.2 チームで共有する項目

チーム制作では、ブレークポイントの名前、値、用途を共有しておくことが重要です。デザイナー、フロントエンドエンジニア、CMS担当者が同じ基準を見ていると、修正や追加がスムーズになります。

Figmaやドキュメントにも、CSSと同じブレークポイント名を記載しておくと、デザインと実装のズレを減らせます。

おわりに

よく使われるブレークポイントには、Bootstrapの 576px、768px、992px、1200px、1400px、Tailwind CSSの 640px、768px、1024px、1280px、1536px、Material UIの 600px、900px、1200px、1536px などがあります。これらは実務で参考にしやすい値ですが、絶対的な正解ではありません。

自作CSSで迷った場合は、まず 768px、1024px、1280px を基本にし、必要に応じて 1536px を追加する設計が扱いやすいです。スマートフォン向けの基本CSSを書き、画面幅が広くなるにつれて min-width のメディアクエリで上書きするモバイルファースト設計をおすすめします。

最も大切なのは、ブレークポイントを端末名だけで決めないことです。ナビゲーションが崩れる位置、カードが読みにくくなる位置、本文幅が広がりすぎる位置を実際に確認し、コンテンツに合った値を選びましょう。そうすることで、SEOにもユーザー体験にも強いレスポンシブデザインを作れます。