メディアクエリが効かないときは？

まず、HTMLのheadにviewportのmetaタグが入っているか確認しましょう。これが無いとスマホがページを縮小表示してしまい、メディアクエリの切りかえが期待どおりに動きません。次に、括弧の閉じ忘れや、既存のルールより上に書いていて上書きされていないかを確認します。

max-widthとmin-widthはどちらを使えばいい？

どちらでも作れますが、初心者はまず「パソコン向けをふつうに書き、max-widthでスマホ向けの上書きを足す」やり方が分かりやすいです。慣れてきたら、スマホから書き始めてmin-widthで広い画面向けを足す「モバイルファースト」も試してみましょう。

CSSは同じ強さのルールなら後に書いたほうが勝ちます。メディアクエリも例外ではないので、範囲の狭い書き方を先に書き、広い画面向けをあとに書くと上書きされてしまうことがあります。広い画面→狭い画面の順で書く基本を崩さないようにしましょう。

作ったページをスマホで開いたら、横にならべたカードがぎゅうぎゅうに潰れていた——スマホ対応の悩みは、Webづくりで必ず通る道です。画面の幅はパソコン・タブレット・スマホでバラバラ。そこで、画面の幅に合わせてCSSを切りかえる仕組みが用意されています。それがメディアクエリです。

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

読み下すと「画面の幅が600px以下なら、h1の文字を24pxにする」。広い画面ではふつうのCSSが効き、スマホサイズになった瞬間、この中のルールが上書きします。

メディアクエリの出番でいちばん多いのが、広い画面では横ならび、スマホでは縦積みという切りかえです。Flexboxと組み合わせます。

.cards {
  display: flex;
  gap: 16px;
}

@media (max-width: 500px) {
  .cards {
    flex-direction: column;
  }
}

ふだんはdisplay: flexで横ならび。幅500px以下になったらflex-direction: columnで縦にならべ直す——たった1行の上書きで、スマホでも読みやすくなります。

この枠の中でメディアクエリが生きています。パソコンで見ると横ならび、スマホで見ると縦積み——いま読んでいる画面の幅で、見え方が変わっているはずです。

メディアクエリを正しく効かせるには、HTML側に「スマホでは画面の幅どおりに表示してね」という指定が必要です。それがheadに書いたviewportのmetaタグ。これが無いと、スマホはページ全体を縮小表示してしまい、せっかくのメディアクエリが発動しません。

min-widthとmax-widthをandでつなぐと、「〜以上、かつ〜以下」という範囲だけに効くメディアクエリが書けます。

@media (min-width: 501px) and (max-width: 900px) {
  .cards {
    flex-direction: column;
  }
}

「幅が501px以上900px以下のときだけ」という意味になり、スマホ・タブレット・パソコンで別々のCSSを用意したいときに使います。