スマホでも崩れないページに——レスポンシブ対応

前のチャプターの最後に、宿題を残しました。「3列のカードやギャラリー、スマホで見たらどうなる?」——答えは、つぶれます。PCの広い画面を前提に組んだ3列レイアウトは、スマホの狭い画面では1枚1枚が窮屈に押しつぶされて、文字も読めなくなります。

これは重大な問題です。今、Webサイトを見る人の多くはスマホから見ています。つまり「スマホで崩れるページ」は、大半の訪問者にとって壊れたページなのです。画面の広さに応じて見た目を変えること——これをレスポンシブ対応と呼びます。実務では「できて当たり前」の必須技術です。

メディアクエリ——「画面が狭いときだけ」のCSS

レスポンシブの道具は、メディアクエリという書き方です。実物を見ましょう。

.card-list {
  display: flex;
  gap: 24px;
}

@media (max-width: 600px) {
  .card-list {
    flex-direction: column;
  }
}

注目は @media (max-width: 600px) { ... } の部分です。これは「画面の幅が600px以下のときだけ、この中のCSSを有効にする」という意味。上の例だと——普段(広い画面)ではカードは横並び。でも画面幅が600px以下(≒スマホ)になった瞬間、flex-direction: column; が効いて縦並びに切り替わる。「PCでは3枚横並び、スマホでは縦に1枚ずつ」——見たことのある、あの挙動です。

読み方のコツは、「もし画面が◯px以下なら」という条件文だと思うことです。中に書くCSSは普通のCSSで、条件を満たしたときだけ上書きで効きます。「基本のスタイルを先に書き、狭い画面用の差分をメディアクエリで上書きする」——この二段構えが、レスポンシブの基本形です。

Gridの場合も同じ

前章のギャラリー(3列Grid)なら、こうなります。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}