メディアクエリを使ったレスポンシブデザイン

メタタグが一つないだけで、多くのスマートフォンは画面がずっと広いかのようにページをレイアウトし（MDN は例として 980 ピクセルをあげています）、それを縮小して表示します。そのため、スマートフォン向けのメディアクエリがまったくはたらきません。

一つのページで、すべての画面に

レスポンシブデザインとは、モバイル用のサイトを別に作るのではなく、せまいスマートフォンから広いモニターまで、表示される画面に合わせて変わるページを一つ作ることです。これは三つの考え方にもとづいています。固定の幅ではなくのび縮みする幅で作るレイアウト、入れ物の中で大きさが変わるメディア、そしてレイアウトがうまくいかなくなるところで調整するメディアクエリです。前の二つの単元で、折り返すカードや auto-fill の列を見たように、仕事の多くはフレックスボックスとグリッドがすでにしてくれます。

viewport メタタグ

昔のサイトはデスクトップ向けに作られていたので、多くのスマートフォンは画面より広い仮想のビューポート（MDN は例として 980 ピクセルをあげています）でページを描き、その結果を縮小します。画面に合わせて変わるように作ったページでは、これがじゃまになります。600 ピクセル未満で切りかわるはずのメディアクエリが、ブラウザーが画面の幅を 980 ピクセルだと考えるので、まったくはたらかないのです。head の中に <meta name="viewport" content="width=device-width"> を書くと、ブラウザーは CSS ピクセルで測った端末の本当の幅を使います。user-scalable=no や小さい maximum-scale はけっして加えないでください。MDN は、拡大をできなくすると視力の弱い人を締め出すことになると警告しており、WCAG 1.4.4 は文字を 200 パーセントまで拡大できることを求めています。

のび縮みする幅と画像

スマートフォンで横スクロールが出てしまういちばんの原因は、固定の幅です。width より max-width を使いましょう。ページ全体を包む要素に max-width: 70rem を指定すると、小さな画面ではいっぱいに広がり、大きな画面ではそれ以上広がらなくなります。画像は既定でもとのピクセルの大きさのままなので、1200 ピクセルの写真は 390 ピクセルの画面からはみ出します。img { max-width: 100%; height: auto; } とすると、画像は縦横の比率を保ったまま、入れ物に合わせて縮みます。WCAG 1.4.10（リフロー）は、幅 320 CSS ピクセルで、二方向にスクロールしなくても内容が使えることを求めています。幅 320 ピクセルのウィンドウでページを確かめる習慣をつけましょう。

メディアクエリ

メディアクエリは、条件が成り立つときだけ適用されるルールを囲みます。@media (min-width: 600px) { ... } は、ビューポートの幅が 600 ピクセル以上のときに中のルールを適用します。よく使われるのはモバイルファーストという方法です。まず、せまい画面用の基本のスタイルを書きます（一列ですべて縦に積む、というように、たいていいちばん簡単です）。そして、場所が広がるにつれてレイアウトを組みかえる min-width のクエリを加えていきます。ブレークポイントは、よくある端末の大きさを当てずっぽうで選ぶのではなく、内容がおかしく見えはじめるところで決めましょう。新しい画面サイズは毎年出てくるからです。ブレークポイントを 40em のように em で書くと、読者が文字を大きくしたときにも反応するようになります。

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

クエリで調べられるほかのこと

メディアクエリは幅のほかにも調べられます。読者の好みを調べる機能は Media Queries Level 5 で加わりました。(prefers-color-scheme: dark) は、読者がオペレーティングシステムでダークテーマを選んでいるときに一致するので、暗い配色を自動で出せます。(prefers-reduced-motion: reduce) は、読者が動きを減らすよう設定しているときに一致します。アニメーションでめまいがする人などです。この中では大きな動きやパララックス効果を止めましょう。Level 4 の (hover: hover) は、主なポインターでホバーできるかどうかを教えてくれます。タッチスクリーンではホバーできません。print は、たとえばメニューを隠すなど、紙に印刷するときのスタイルを決めます。最後に、clamp() を使うと、クエリなしでなめらかに大きさを変えられます。font-size: clamp(1.5rem, 4vw, 2.5rem) は画面に合わせて大きくなりますが、1.5rem より小さくも 2.5rem より大きくもなりません。