CSSのメディアクエリのブレイクポイントまとめ

2021-02-18

作成したWebサイトをレスポンシブ対応にするためにメディアクエリを利用します。

大まかにスマホ、タブレット、パソコンと画面サイズに分けての表示を切り分けていくわけですが、この時に設定するブレイクポイントをまとめて紹介します。

レスポンシブデザインとは？

そもそもレスポンシブデザインとはどういったものでしょうか？

以前まではWebサイトへのアクセスはパソコンがメインでしたが、現在ではモバイルからのアクセスの方が多数を占めています。

モバイルからアクセスした際もレイアウトが適切に調整します。

その際に利用されるのがメディアクエリと呼ばれるもので、スマホ・タブレット・パソコンの画面サイズにあわせてブレイクポイントを設定しどのデバイスからアクセスした場合でも表示が適切になるように調整することができます。

メディアクエリの書き方

さっそくメディアクエリの書き方を見ていきましょう。

メディアクエリをWebサイトに適用させるにはHTMLに直接書き込む方法と外部CSSに書く方法がありますが、ここでは外部CSSに書き込む方法を紹介します。

@media only screen and (max-width: 1200px){ }
@media only screen and (max-width: 1023px){ }
@media only screen and (max-width: 767px){ }
@media only screen and (max-width: 480px){ }

480px以下の小さなスマホ、480-767opx以下の少し大きなスマホ、小さめタブレット、大きめタブレットに対応するように記載しています。

そして、それぞれのコードの中にデバイスごとのルールを記載していきます。

小さなデバイスではトップの大きな背景画像を非表示にする
大きなデバイスでは文字の大きさを調整する

このような形でデバイスごとの表示を細かく指定することができます。

メディアクエリの指定順はWebサイトに合ったものを

上記の例ではディスプレイの大きなものから小さなものに向かって記述しています。(大→中→小)

コードは上から下へ読み込まれていくので、パソコンからのアクセスが多いようなサイトでは上記のような書き方で、しかしモバイルからのアクセスが多いサイトでは小→中→大の順序で書いた方が厳密にはいいでしょう。

これは各サイトにGoogleアナリティクスなどの計測ツールを埋め込むことで判断することができますが、最近ではほとんどの場合モバイルからのアクセスが多いサイトがほとんどなので、モバイルファーストな記述が望ましいと思います。

@media only screen and (max-width: 480px){ }
@media only screen and (max-width: 767px){ }
@media only screen and (max-width: 1023px){ }
@media only screen and (max-width: 1200px){ }