パソコンで作ったページをスマホで開いたら、横にはみ出していた。誰もが一度は通る場面です。画面幅に応じて指定を切り替える仕組みが、メディアクエリです。

その前に、viewport の1行を確認する

メディアクエリを書く前に、HTMLのhead内にこの1行が入っているかを確かめてください。これが無いと、スマホが「パソコン向けの幅」で表示しようとして、全体が縮小されてしまいます。

index.html（head内）
<meta name="viewport" content="width=device-width, initial-scale=1" />

メディアクエリの書き方

style.css
/* 通常の指定（すべての画面幅で効く） */
.row {
  display: flex;
  gap: 16px;
}

/* 画面幅が768px以下のときだけ、この中が効く */
@media (max-width: 768px) {
  .row {
    display: block;
  }
}

@media の中に、その幅のときだけ効かせたい指定を書きます。中の書き方は普段のCSSと同じです。新しい文法はこの1行だけと考えて構いません。

書く順番に意味がある

メディアクエリは、後に書いたほうが勝ちます。通常の指定より前に @media を書いてしまうと、あとの指定に上書きされて効きません。「基本の指定を先に、メディアクエリは後に」と決めておくと事故が減ります。

区切る幅は、崩れたところで決める

「768px が定番」とよく言われますが、機種の幅に合わせる必要はありません。ブラウザの幅をゆっくり狭めていって、レイアウトが崩れたところで区切るのが確実です。デザインの都合で決めるほうが、機種の増減に振り回されずに済みます。

CODE幅で切り替わる様子を見るコードを書き換えると、すぐ下で動きます

仕切りをドラッグしてプレビュー側を狭くしてみてください。狭くなると縦積みに変わります（このデモはプレビューの幅を基準に判定しています）。

そもそも、切り替えずに済む書き方もある

メディアクエリを増やすほど管理は大変になります。次のような指定を先に使っておくと、切り替えの回数そのものを減らせます。

  • width: 100% ではなく max-width: 600px … 広い画面では広がりすぎず、狭い画面では収まる
  • flex-wrap: wrap … 入りきらない要素が自動で折り返す
  • 固定のpxではなく % や rem … 画面幅に応じて伸び縮みする

「まず崩れない書き方をして、どうしても足りないところだけメディアクエリで直す」。この順番が、結果としていちばん楽になります。