良く使われる画面サイズの判定
レスポンシブデザインにおけるブレイクポイントの目安
| デバイスタイプ | ブレイクポイント (max-width / min-width) | 主な用途と意図 |
|---|---|---|
| 小型スマートフォン (縦向き) | `max-width: 480px` | ほとんどのスマートフォンの縦向き表示に対応。ナビゲーションの切り替え（ハンバーガーメニュー）、1カラムレイアウトへの調整。 |
| 中型スマートフォン (縦向き) | `max-width: 576px` / `580px` | やや大きめのスマートフォンに対応。コンテンツのパディング調整や、フォントサイズの微調整。 |
| スマートフォン (横向き) / 小型タブレット (縦向き) | `max-width: 767px` / `768px` | スマートフォンの横向きや、iPad miniなどの小型タブレット向け。コンテンツブロックの並び替え、画像サイズの調整、カラム数の変更。 |
| タブレット (縦向き) / 小型デスクトップ | `max-width: 991px` / `992px` | 一般的なタブレットの縦向きや、デスクトップ未満の画面。メニューの表示形式変更、3カラムから2カラムへの変更。 |
| 大型タブレット (横向き) / デスクトップ | `max-width: 1199px` / `1200px` | タブレットの横向きや、標準的なデスクトップ画面。コンテンツの最大幅設定、より複雑なレイアウトの適用。 |
| 大型デスクトップ | `min-width: 1200px` / `1400px` | 非常に大きなディスプレイ向け。固定幅コンテナの最大幅調整、広々としたレイアウトの最適化。 |
| ※ これらの値はあくまで目安であり、コンテンツやデザインによって最適なブレイクポイントは異なります。 | ||
モバイルファーストのアプローチでは、通常 `min-width` を使用して小さい画面から大きい画面へとスタイルを適用していく。
`max-width` は、特定のサイズより小さい画面にのみスタイルを適用したい場合に使われる。
定義例
/* デスクトップPC用のスタイル */
.site-main {
max-width: 960px;
}
/* タブレット用のスタイル（画面幅が1024px以下の場合に適用） */
@media (max-width: 1024px) {
.site-main {
max-width: 768px;
}
}
/* スマートフォン用のスタイル（画面幅が767px以下の場合に適用） */
@media (max-width: 767px) {
.site-main {
max-width: 100%;
padding: 0 15px;
}
}