HTML・CSS入門③ スマホ対応のページを作ろう

パソコンで見やすいページでも、スマートフォンでは文字や画像がはみ出すことがあります。

画面の大きさに合わせて配置を変える考え方が、レスポンシブWebデザインです。この記事では、HTML・CSS入門②で作ったページをスマホ対応にします。

まずスマホ向けに作る

小さい画面を基準に作り、必要になったところで大きい画面用の指定を加える方法をモバイルファーストと呼びます。

最初から横幅を固定せず、画面に合わせて変わるようにします。

main {
  width: min(90%, 960px);
  margin: 32px auto;
}

幅は画面の90%まで広がりますが、960pxより大きくはなりません。

HTMLのhead内に次の設定があるか確認します。

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewportは、ブラウザーがページを表示する範囲です。この指定により、スマートフォンの実際の画面幅を基準にレイアウトできます。

画像には次の指定を加えます。

img {
  display: block;
  max-width: 100%;
  height: auto;
}

max-width: 100%により、画像が親要素より大きくなりません。height: autoは元の縦横比を保ちます。

メディアクエリーは、画面幅などの条件によってCSSを切り替える仕組みです。

.card-list {
  display: grid;
  gap: 16px;
}

@media (min-width: 720px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

719pxまでは1列、720px以上では同じ幅の2列になります。境目の数値は端末名で決めず、内容が窮屈になる場所を見ながら調整します。

ブラウザーの開発者ツールには、画面幅を変えて確認する機能があります。ただし、それだけで終わらせず、可能なら実際のスマートフォンでも確認しましょう。

次の点を見ると問題を見つけやすくなります。

画面幅が1000px以上のときだけ、カードを3列にしてください。

@media (min-width: 1000px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

後に書いた条件が追加で適用されます。小さい画面の1列、中くらいの画面の2列、大きい画面の3列という順に変わります。