レスポンシブのブレークポイントは？

✅ 回答

768pxと1024pxの2つで、ほとんどのサイトに対応できます。「デバイスの種類」ではなく「コンテンツが崩れるポイント」で決めるのが正しい考え方です。

定番のブレークポイント

幅	対象デバイス	レイアウト例
〜767px	スマホ	1列、ハンバーガーメニュー
768px〜1023px	タブレット	2列、サイドバー表示
1024px〜	PC	3列、フルナビゲーション

なぜこの数値？

• 768px — iPadの縦向き幅。タブレットとスマホの境界として広く使われている
• 1024px — iPadの横向き幅。ここからPC向けレイアウトにするサイトが多い

ただし「iPadに合わせる」のが目的ではなく、「このあたりでレイアウトを変えると自然」という経験則です。

実装例

/* モバイルファースト：まずスマホ向けを書く */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* タブレット以上（768px〜）：2列に */
@media (min-width: 768px) {
  .card-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .card {
    width: calc(50% - 0.5rem);
  }
}

/* デスクトップ（1024px〜）：3列に */
@media (min-width: 1024px) {
  .card {
    width: calc(33.3% - 0.67rem);
  }
}

よくある間違い

間違い	正しい考え方
ブレークポイントを5個以上設定	2〜3個で十分。多いと管理が大変
特定の機種に合わせる	機種は毎年変わる。コンテンツ基準で決める
max-widthで書く（デスクトップファースト）	min-width（モバイルファースト）のほうがコードが少ない

「コンテンツが崩れるポイント」で決める方法

ブラウザの幅を狭めていって、「ここでレイアウトが崩れる」ポイントにブレークポイントを置くのが本来の正しいやり方です。768pxと1024pxはあくまで出発点。自分のサイトのコンテンツに合わせて微調整してOKです。

実践的なブレークポイント設定

/* モバイルファースト：小さい画面から書く */

/* スマホ（デフォルト）: 〜767px */
.container { padding: 0 16px; }
.grid { grid-template-columns: 1fr; }

/* タブレット: 768px〜 */
@media (min-width: 768px) {
  .container { padding: 0 32px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* PC: 1024px〜 */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* 大画面: 1440px〜 */
@media (min-width: 1440px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

この4段階（スマホ→タブレット→PC→大画面）で、ほとんどのデバイスに対応できます。

「デバイスの幅」ではなく「コンテンツが崩れる幅」で決める

「iPhone は 375px だから375pxで切る」ではなく、「ブラウザの幅を狭めていって、レイアウトが崩れるポイント」をブレークポイントにするのがベストプラクティスです。デバイスは毎年新しいサイズが出ますが、コンテンツベースなら将来のデバイスにも対応できます。