メディアクエリを使用すると、パソコン用、タブレット用、スマホ用など、アクセスするユーザーの端末ごとにWebページのデザイン(CSS)を切り替えることができます。
このページでは、主にスマホ用のメディアクエリの設定方法を見ていきます。
参考ページ
メディアクエリ[MDN Web Docs]
もう逃げない。HTMLのviewportをちゃんと理解する
Viewport
メディアクエリの設定より先にViewportの設定をします。
これをしないとメディアクエリが思ったように反映されないからです。
スマホやタブレット用のブラウザは、仮想画面にいったんHTMLをレンダリングし、そこからスマホやタブレット用に画面を縮小してから表示されます。
Viewportでこの仮想画面の横幅を決めます。
（縦幅は気にしなくてOKです）
Viewportを設定しなかった場合はデフォルト値（980px）が適用されます。
スマホの横幅はたいてい980pxより小さいものですが、それがどのようなものであったとしても、いったん980pxとしてレンダリングされ、そこから見ているスマホのサイズに合わせて縮小表示されます。
なのでたいていのスマホでは文字や画像が小さくて見にくいページになります。
メディアクエリでは、このViewportの値を読んでそれぞれのCSSを読み込みます。Viewportを設定しなければメディアクエリは適切に反映されません。
Viewportの設定は<head>の中で行います。
<meta>を一文追加するだけです。
<meta name="viewport" content="width=device-width, initial-scale=1">
これはViewportの横幅を、見ているユーザーのデバイス幅に設定し、その表示倍率を1倍にします。
最初の画像と同じページに上記の設定だけを反映させると、下のような結果になります。
画像を見比べてもらうと、これだけでもだいぶ見やすくなっていますよね。
メディアクエリを設定しても、Viewportの設定をしていなければ効果的にはならない、ということが伝わったでしょうか。
メディアクエリ
メディアクエリをCSSファイルに書くときには、次のような文型になります。
@media メディアタイプ and メディア特性 {
/* ここにCSSを記述 */
}
メディアタイプには特定のキーワードを選択しますが、今回は画面に関する設定なのでscreenにします。
メディア特性は、Viewport（画面サイズ）の条件を選びます。
この部分でユーザーの端末を判別します。
条件には、max-widthかmin-width、一般的にはどちらかを使います。
max-width 画面幅の最大値
例 (max-width: 数値)
min-width 画面幅の最小値
例 (min-width: 数値)
※条件には()を忘れずに。
(max-width: 800px)とすると「もしユーザーの画面サイズが800px以下なら」となり、
(min-width: 800px)とすると「もしユーザーの画面サイズが800px以上なら」となります。
この条件の部分をブレイクポイントといいます。
ブレイクポイントはandを使って組み合わせることができます。
(min-width: 0px) and (max-width: 600px)
「Viewportのwidthが0pxから600px以内だったら」
では実際に「追加でスマホの設定をしたいんだけど、ブレイクポイントはどうするの？」と聞かれると、（max-width: 480px）にするのが良いと答えます。
まとめて書くと次のようになります。
@media screen and (max-width: 480px) {
}
480pxにしたのは、現在普及しているスマホの横幅はたいていそれに収まるからです。
「480px？ 自分の使ってるスマホはもっと大きかったはずだけど？」と思った方がいるかもしれませんが、たぶんそれは解像度で、CSSピクセルではありません。
上の画像は「３×３のマス目の正方形」と「６×６のマス目の正方形」です。
解像度はこの「３×３」や「６×６」に当たります。
正方形の大きさは左右同じですよね。でも黒く塗られたところを表現するのに左は１マスですが、右は４マスを使っています。高解像度になるほど同じものを表すのに多くのマス目を使って表示されます。
CSSピクセルは正方形そのものの大きさで、左右ともに「200px×200px」になります。
具体的に「iphone13」を例にしてみましょう。
iphone13の解像度は２５３２×１１７０ですが、CSSピクセルは８４４×３９０です。
縦は2532個、横は1170個のマス目があることになります。そのマス目を複数使ってひとつのピクセルを表現するので、実際のサイズはそれよりも小さくなり、８４４×３９０になるわけです。
Viewportで使うのは横幅なので、iphone13でいえば、width=390pxとなります。
(max-width: 480px)の区分に入りました。
正直なところ、これが絶対の正解だとは言えません。
480pxでなくても、切のいい500pxや、余裕をもたせて600pxでも問題ないと思います。
スマホは日々新しいものが出ているし、その画面のサイズも様々です。
画面の大きなスマホが流行れば設定値を大きく取る必要がありますし、小さいのが流行ればもっと小さく取っても大丈夫でしょう。
私は現状スマホ用は上記の設定を選んでいます。
書く順番
パソコン用のCSSがあってスマホ用の設定を追記する場合は、パソコン用の下にメディアクエリを使います。
css
/* パソコン用のCSSを記述 */
@media screen and (max-width: 480px) {
/* スマホ用のCSSを記述 */
}
もし順序を逆にし、メディアクエリを使ってスマホ用のCSSを書いたあと、メディアクエリなしでパソコン用のCSSを記述すると、（CSSは上から順に読まれるため）上書きされて意味がなくなってしまいます。
モバイルファーストの考えでは、先にスマホ用のCSSを書いてから、メディアクエリでタブレット用やパソコン用の設定を書きます。
css
/* 共通部分とスマホ用のCSSを記述 */
@media screen and (min-size: 768px) {
/* タブレット用のCSSを記述 */
}
@media screen and (min-size: 1024px) {
/* パソコン用のCSSを記述 */
}
モバイルファーストは今後ますます重要視されると思われます。
一からCSSを記述する場合にはモバイルファーストで書くのが良いかもしれません。
メディアクエリで読み込むCSSを変える
サイトの規模が大きくなると、スマホ用、タブレット用、PC用とCSSを分けると管理がしやすくなるでしょう。
CSSを分けた場合、メディアクエリで読み込むCSSを切り替えることができます。
htmlの<link>に属性としてメディアクエリを追加します。
media="screen and (ブレイクポイント)"
<!-- 例 -->
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 480px)">
まとめ
Viewportとスマホ用のメディアクエリの設定方法を見てきました。
Viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1">
スマホ用メディアクエリの追加
@media screen and (max-width: 480px) {
/* 適用させたいCSSを記述 */
}
モバイルファースト
/* 共通部分とスマホ用のCSSを記述 */
@media screen and (min-size: 768px) {
/* タブレット用のCSSを記述 */
}
@media screen and (min-size: 1024px) {
/* パソコン用のCSSを記述 */
}
読み込むCSSの切り替え
<link href="ファイルのパス" rel="stylesheet" media="screen and (ブレイクポイント)">
このページが少しでもお役に立てたのなら幸いです。