PIGNOTE

2026.06.29

レスポンシブの最適ブレイクポイントは?メディアクエリの書き方も実例つきで解説

レスポンシブデザインを実装するうえで、「最適なブレイクポイントは何pxか」「メディアクエリはどう書くか」で迷う方は多いです。本記事では、最新の主要デバイスのサイズシェアを踏まえた最適ブレイクポイントの結論と、メディアクエリの書き方をHTML・CSSの実例で解説します。

Table of Contents

結論:最適ブレイクポイントは600pxと834px

結論として、汎用的に最も使いやすいブレイクポイントは 600px(スマホ↔タブレット) と 834px(タブレット↔PC) の2点です。理由はこの2点を境にすると、市場でシェアの高い主要デバイスの大半でレイアウト崩れが起きにくいためです。

なぜ600pxなのか

600〜700px帯にはAndroidタブレットや小型タブレット(横向きスマホを含む)が一定のシェアを占めます。600pxを境にスマホ表示とタブレット表示を分けると、Android系の小型タブレットでもレイアウトが破綻しません。

なぜ834pxなのか

iPadシリーズ(Air・Pro 11インチ)の縦持ち横幅が820〜834pxに集中しています。834pxを境にPCレイアウトへ切り替えると、iPad縦持ち時はタブレット用UIが表示され、iPad Pro 13インチや横持ち時にPCレイアウトが出るという自然なユーザー体験を作れます。

主要フレームワークの標準値

自分で決め切れない場合は、採用しているCSSフレームワークのデフォルト値に合わせるのも実務では合理的です。代表的なフレームワークのブレイクポイントは以下の通り。

フレームワーク	sm	md	lg	xl
Tailwind CSS	640px	768px	1024px	1280px
Bootstrap 5	576px	768px	992px	1200px
Material UI	600px	900px	1200px	1536px

いずれも「600〜700px台」「768〜900px台」「1200px前後」に境界を置いている共通点があります。本記事の推奨値(600px・834px)も、この実務的なレンジに収まっています。

ブレイクポイントとは

ブレイクポイントとは、レスポンシブデザインにおいて画面幅に応じてCSSを切り替える境界値のことです。新しい端末が出るたびに最適値は変わりますが、シェアの高いデバイスを基準に決めることでメンテナンス性の高い設定が可能です。

デバイス別の代表サイズ一覧

シェアの高いデバイスを中心に、最新の代表的なCSSピクセル横幅をまとめます(出典:Statcounter Global Stats)。

スマートフォン

機種	CSSピクセル横幅
iPhone 16 / 15 標準	393px
iPhone 16 Pro Max / 15 Pro Max	430px
iPhone SE(第3世代)	375px
Pixel 9	412px
Galaxy S24	360px

スマホ表示の基準幅は 360〜430px がボリュームゾーンです。ディスプレイ拡大機能や旧機種を考慮して、最小幅は320pxまで対応しておくと安全です。

タブレット

機種	CSSピクセル横幅(縦持ち)
iPad mini(A17 Pro)	744px
iPad(11th gen)	810px
iPad Air 11inch(M3)	820px
iPad Pro 11inch(M4)	834px
iPad Air 13inch(M3)/Pro 13inch(M4)	1024px

iPadの縦持ち横幅は 744〜1024px に分布します。834pxにブレイクポイントを置くと、iPad Pro 11インチまではタブレット表示、13インチではPC表示というUXを実現できます。

PC

端末	論理解像度
MacBook Air 13inch(M3)	1470pt
MacBook Pro 14inch(M4)	1512pt
iMac 24inch	2240pt
Windowsフルサイズ(FHD)	1920px
WindowsノートPC(HD+)	1366px

PCの主要解像度は 1366〜1920px がボリュームゾーンです。コンテンツ最大幅は1280px前後に収めれば、ほぼすべてのPCで快適に表示できます。

メディアクエリの書き方

画面幅に応じてスタイルを切り替えるには、CSSの @media ルール(メディアクエリ)を使います。ここでは推奨の書き方を実例で解説します。

基本構文

/* 600px以下に適用(max-width) */
@media screen and (max-width: 600px) {
  .container { padding: 16px; }
}

/* 834px以上に適用(min-width) */
@media screen and (min-width: 834px) {
  .container { padding: 32px; }
}

max-width は「指定値以下」、min-width は「指定値以上」で発火します。どちらを使うかで設計の方針が変わります。

モバイルファースト(min-width)を推奨

近年のCSS設計のスタンダードは モバイルファースト です。ベースをスマホ用CSSにして、画面が大きくなるにつれて min-width で上書きしていく書き方になります。理由は次の通り。

スマホからのアクセスが多くを占めるため、ベースをスマホ用にしておくと無駄なCSSを読み込ませなくて済む
ベース+追加で組み立てるため、CSSの構造がシンプルでメンテしやすい
TailwindやBootstrapなど主要フレームワークの内部実装もmin-widthベース

/* 1. ベース:スマホ向けCSS(無条件で適用) */
.container {
  padding: 16px;
  font-size: 14px;
}

/* 2. タブレット以上 */
@media (min-width: 600px) {
  .container {
    padding: 24px;
    font-size: 15px;
  }
}

/* 3. PC以上 */
@media (min-width: 834px) {
  .container {
    padding: 32px;
    font-size: 16px;
  }
}

viewport metaタグの設定も必須

メディアクエリを正しく動作させるには、HTMLの <head> 内に viewport meta タグの記述が必要です。

<meta name="viewport" content="width=device-width, initial-scale=1">

これを忘れるとスマホで横スクロールが発生したり、メディアクエリが想定通り発火しません。必ずセットで設定してください。

コンテナクエリで「親要素サイズに応じた切り替え」も可能

近年のCSSでは、画面幅ではなく親要素の幅に応じてスタイルを変える コンテナクエリ(@container) が主要ブラウザで使えるようになりました。サイドバー付きレイアウトなど、画面幅だけでは判断しきれない場面で有効です。

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

.card { padding: 16px; }

@container (min-width: 480px) {
  .card {
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

「コンポーネント単位で振る舞いを定義したい」場合の選択肢として、メディアクエリと使い分けられると設計の幅が広がります。

よくある間違いと注意点

端末固有のpx値に合わせすぎる:新機種が出るたびズレるため、代表的な幅(360px・768px・1024pxなど)を基準にする
viewport meta未設定:メディアクエリが効かない原因No.1
max-widthとmin-widthの境界が重なる:両方が発火して意図しないスタイルが適用される
ブレイクポイントを増やしすぎる:メンテコストが増える。基本は2〜3点で十分

まとめ

レスポンシブデザインの最適ブレイクポイントは 600pxと834px が汎用的です。迷ったらTailwind・Bootstrap・Material UIなど採用フレームワークの標準値に合わせるのも有効。メディアクエリは モバイルファースト(min-width) で書くと、シンプルでメンテしやすいCSSになります。

レスポンシブ対応の実装方法をより詳しく知りたい方は、以下の記事もご覧ください。

【テンプレあり】レスポンシブ対応の実装方法・書き方をわかりやすく解説

サイト制作やSEOでお困りのことがあれば、弊社ピグナスでも対応可能です。無料のオンライン相談を実施していますので、お気軽にご相談ください。

監修者

PIGNUS編集部

PIGNUSは「価値を、本気で」をタグラインとし、あらゆるドメインで独自の価値提供を行っています。事業を伸ばすパートナーとしてあらゆるサポートに奔走するWebマーケティング事業、現代に最適化したWeb広告運用を提唱するプロダクト、BtoB購買における情報の非対称を解決するプロダクトを展開しています。