レスポンシブ — 画面幅で変わるレイアウト

同じページを、いろんな画面で見る時代

あなたのサイトは、大きなPC画面でも、細長いスマホでも見られます。PCで横3列に並んでいたカードが、スマホでも横3列のままだと、一つひとつが小さすぎて読めません。画面の幅に合わせて見た目を変える考え方をレスポンシブ(レスポンシブ)と呼びます。

まずは「伸び縮みする」土台

レスポンシブの第一歩は、幅をピクセルでガチガチに固定しないことです。幅を 300px と決め打ちすると、狭い画面でははみ出します。代わりに % や、画面幅に応じた単位を使うと、器に合わせて伸び縮みします。

.card {
  width: 600px;
}

.card {
  width: 100%;
  max-width: 600px;
}

幅で切り替える「メディアクエリ」

伸び縮みだけでは足りない場面もあります。たとえば「PCでは横3列、スマホでは縦1列」のように、並び方そのものを変えたいときです。これには「画面幅がこれ以下なら、このスタイルを使う」という条件付きの指示、メディアクエリを使います。

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

@media (max-width: 600px) が「画面幅が600px以下のとき」という条件です。その波カッコの中に書いたスタイルは、その条件を満たしたときだけ効きます。AI生成CSSでこの記号を見つけたら、「ここはスマホなど狭い画面向けの調整だな」と読めます。