CreaTools LogoCreaTools
Tech Notes
Tips

ブレークポイント、768pxと1024pxで大体足りる

2025-11-03

結論：768pxと1024pxの2つでほぼカバー

ブレークポイント対象
768pxタブレット縦 / スマホ横
1024pxタブレット横 / 小さいPC

この2つで9割のケースをカバーできる。3つ以上必要になることは稀。

なぜ768pxなのか

iPadの縦幅が768px。ここで切ると、タブレット以上とスマホを分けられる。

**ただし「iPadに合わせた」わけではない。**768px付近でコンテンツが崩れやすいから。

2カラムレイアウトがこのあたりで窮屈になる。だから切る。

デバイスではなくコンテンツで決める

「iPhone 14に合わせて390pxで切る」→ 来年iPhone 15が出たら古くなる。

コンテンツを見て、崩れる箇所で切る。

確認方法

  1. DevTools → デバイスモード
  2. 幅をドラッグで動かす
  3. 崩れる箇所を見つける
  4. その幅でブレークポイントを設定

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

/* モバイル（デフォルト） */
.container {
  padding: 16px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .container {
    padding: 32px;
  }
}

/* PC以上 */
@media (min-width: 1024px) {
  .container {
    padding: 48px;
  }
}

min-widthで書く。小さい画面から大きい画面へ拡張していく。

よくある間違い

1pxの罠

/* ❌ 768pxが両方に該当 */
@media (max-width: 768px) { ... }
@media (min-width: 768px) { ... }

/* ✓ 1pxずらす */
@media (max-width: 767px) { ... }
@media (min-width: 768px) { ... }

境界値が重複しないように。

Tailwind CSSのブレークポイント

prefixmin-width
sm640px
md768px
lg1024px
xl1280px

独自に決めるより、フレームワークの規約に従った方が一貫性が保てる。

私がやらかした失敗

「375px、414px、390pxで切る」→ 端末ごとに細かく設定

結果：

  • CSSが膨大になる
  • 新端末が出るたびに追加
  • どの端末で確認すればいいかわからない

**デバイスに合わせると終わりがない。**コンテンツで決めれば、端末が増えても対応不要。

最低限のチェック

幅確認すること
320px最小幅で崩れないか
768pxタブレット境界
1024pxPC境界
1920pxフルHDで余白が広すぎないか

320pxで崩れなければ、大体のスマホで問題ない。

コンテナクエリ（新しい方法）

画面幅ではなく、親要素の幅で切り替え。

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

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

コンポーネント単位で制御できる。2023年以降の主要ブラウザで対応。

サイドバーの有無でカードの見せ方を変えたいときに便利。

まとめ

  • 768pxと1024pxの2つでほぼ足りる
  • デバイスではなくコンテンツで決める
  • 幅をドラッグして崩れる箇所を探す
  • モバイルファースト（min-width）で書く
  • 境界値の1pxに注意