レイアウトとレスポンシブ対応｜スマホでも崩れないページに【ホームページ制作入門 第6回】

シリーズ第6回は、要素を並べる「レイアウト」と、スマホ・タブレット・PCのどれでも見やすくする「レスポンシブデザイン」です。多くのサイトでアクセスの半分以上がスマホからなので、とても大切な回です。

レスポンシブデザインとは

画面の幅に合わせて、レイアウトや文字サイズを自動で切り替える作り方です。1つのHTMLで、あらゆる端末に対応できます。

準備：viewport の指定

第4回で書いた、次の1行が必須です。これがないと、スマホでPC用の表示が縮小されてしまいます。

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

Flexboxで横に並べる

<div class="cards">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

.cards {
  display: flex;
  gap: 16px;
}
.card {
  flex: 1;
  padding: 16px;
  background: #f5f5f5;
}

親要素に display: flex を指定すると、子要素が横に並びます。gap で要素同士の間隔、flex: 1 で均等な幅を指定できます。

メディアクエリで画面幅ごとに切り替える

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

これは「画面幅が768px以下のときは、縦並びにする」という意味です。PCでは3列、スマホでは1列、といった切り替えができます。

※上の例は、PC用の指定を先に書いて、狭い画面で上書きする「PCファースト」の書き方です。分かりやすさを優先して、この形で説明しました。

スマホファーストという考え方

最初にスマホ用のCSSを書き、画面が広くなったときに min-width で調整を足していく方法です。必要なものだけを足す形になり、CSSがすっきりします。同じカードを、スマホファーストで書くと次のようになります。

.cards {
  display: block;
}
.card {
  padding: 16px;
  margin-bottom: 16px;
  background: #f5f5f5;
}

@media (min-width: 769px) {
  .cards {
    display: flex;
    gap: 16px;
  }
  .card {
    flex: 1;
    margin-bottom: 0;
  }
}

768pxという幅は一例です。端末の機種に合わせるより、「レイアウトが崩れる幅」を目安に決めるのがコツです。なお、2次元の配置が得意な「CSS Grid」という機能もあるので、慣れてきたら調べてみてください。

画像をはみ出させない

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

この指定を入れておくと、画像が親要素からはみ出さず、縦横比も保たれます。

確認のしかた

1. Chromeの検証ツール（F12）を開く
2. 左上の端末アイコン（デバイスツールバー）をオンにする
3. iPhoneやiPadなどを選んで表示を確認する
4. 可能なら、実機のスマホでも確認する

まとめと次回予告

Flexboxとメディアクエリで、端末に合わせて変わるレイアウトが作れるようになりました。次回は、サイトの印象を大きく左右する「画像・フォント・配色」の基本を学びます。