【CSS】レスポンシブ対応のブレイクポイント・メディアクエリを考えてみた

レスポンシブ対応でコーディングする時、「メディアクエリどう書こうか？ブレイクポイントいくつにしよう？」って、毎度考えていませんか？

この記事では、そんな悩みを抱えている方のために、僕がよく使うレスポンシブ対応のための PC ファースト、モバイルファーストそれぞれのメディアクエリを紹介しています。

僕自身、「メディアクエリのブレイクポイントっていくつだっけ？？？」となることも多々あるので、コーディング時のためのコピペ用も兼ねてまとめています。

ブレイクポイントの考え方が人によって異なると思いますので、あくまで僕個人の考えであることをご了承ください。

2022/03/05

レスポンシブ対応で 600〜1024px での細かい調整が増えてきたので、ベースを再考中です。 TailwindCSS を参考にブレイクポイントを定数化して、デバイスのシェア率の変化に応じて調整した方がコーディングしやすそうなので、見直します。

PC ファーストのメディアクエリ

まず、PC ファーストのメディアクエリです。

/*----------------------------------------------------------*/
/* PC用のCSS */
/*----------------------------------------------------------*/

/*----------------------------------------------------------*/
/* タブレット用のCSS */
/*----------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 1024px) {
}

/*----------------------------------------------------------*/
/* スマホ用のCSS */
/*----------------------------------------------------------*/
@media not all and (min-width: 600px) {
}

1024px より大きい画面幅（1024px は含めない）に PC 用を、600px 以上 1024px 以下の画面幅にタブレット用の CSS とします。

600px 未満の画面幅にスマホ用の CSS を記述するメディアクエリです。

1024px にした理由は、縦画面でのタブレットの最大幅が 1024px であることと最もシェア率の高いタブレットサイズが 768px × 1024px だからです。

最大幅 1024px のタブレットのシェア率は１％未満で多くありませんが、最もシェア率の高いデバイスを横画面にしたときの画面幅が 1024px となるため、1024px を PC・タブレット間のブレイクポイントにすることにしました。

スマホ・タブレット間のブレイクポイントは、タブレットの最小画面幅が 600px であるため、600px をブレイクポイントとしました。

過去には、

@media only screen and (max-width: 600px) {
}

と記述していましたが、599.5px のような中途半端な画面幅はどうなるのかという議論を見かけたため、600px 未満（最小サイズ 600px より小さい）を、

@media not all and (min-width: 600px) {
}

で表現しています。

PC ファーストでもモバイルファーストでも、未満や以下、以上の表現には注意していこうと思った次第です。

モバイルファーストのメディアクエリ

以下のがモバイルファーストのメディアクエリです。

/*----------------------------------------------------------*/
/* スマホ用のCSS */
/*----------------------------------------------------------*/

/*----------------------------------------------------------*/
/* タブレット用のCSS */
/*----------------------------------------------------------*/
@media only screen and (min-width: 600px) {
}

/*----------------------------------------------------------*/
/* PC用のCSS */
/*----------------------------------------------------------*/
@media not all screen and (max-width: 1024px) {
}

ブレイクポイントの決定基準は、PC ファーストのメディアクエリと同じです。

モバイル表示は PC 表示に比べてシンプルなレイアウトやデザインになることが多いため、モバイルファーストのほうがコーディングしやすい言われています。

僕自身、モバイルファーストでの経験が少ないので何とも言えませんが、シンプルから複雑へのコーディングのほうが効率がいいのではないかと思っています。

終わりに

今回は、レスポンシブ対応のための PC ファースト、モバイルファーストそれぞれのメディアクエリを僕自身が考えるブレイクポイントを基準に紹介しました。

人によって考え方が異なり、僕自身、僕の考えの良し悪しがわからないので、ご意見をいただけると嬉しいです。