CSS入門 #5 - スマホ対応のレスポンシブデザイン

入門 | 13分 で読める | 2026.07.12

公式ドキュメント
CSS

今回やること

レスポンシブデザインは、画面幅に合わせて表示を調整する考え方です。

最初からスマホでも読める幅、押しやすい余白、はみ出さないレイアウトを意識することが重要です。

今回は、これまで作った自己紹介ページをスマホ対応にします。

viewportを確認する

head に次があるか確認します。

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

これがないと、スマホでページが縮小表示され、文字が読みにくくなることがあります。

横幅を制限する

本文が横に広がりすぎると読みにくくなります。中央寄せのコンテナを作ります。

<body>
  <div class="container">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</body>

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

max-width は最大幅、margin: 0 auto は左右中央寄せです。

画像をはみ出させない

画像は親要素より大きくならないようにします。

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

この指定は多くのページで基本設定として使えます。

メディアクエリを書く

画面幅が狭い時だけCSSを変えるには、メディアクエリを使います。

@media (max-width: 640px) {
  .container {
    padding: 16px;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  h1 {
    font-size: 28px;
  }
}

max-width: 640px は、画面幅が640px以下の時に適用するという意味です。

タップしやすいリンクにする

スマホでは、リンクやボタンの押しやすさも重要です。

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
}

小さすぎるボタンは押し間違いの原因になります。

全体のCSS例

body {
  margin: 0;
  color: #1f2937;
  background-color: #f9fafb;
  font-family: sans-serif;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

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

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: #ffffff;
}

@media (max-width: 640px) {
  .container {
    padding: 16px;
  }

  h1 {
    font-size: 28px;
  }
}

確認すること

DevToolsでスマホ幅に切り替え、次を確認します。

確認項目OKの状態
横スクロール出ない
文字サイズ読める
ボタン押しやすい
カードはみ出さず折り返す
余白狭すぎない

よくあるミス

ミス問題修正
viewportがないスマホで縮小表示されるmeta viewport を追加
固定幅を使いすぎる横スクロールが出る%、max-width、Gridを使う
文字が小さい読みにくいスマホ幅でサイズ確認
ボタンが小さい押しにくいmin-height と余白を確保

練習

次を確認してください。

  1. DevToolsでスマホ表示に切り替える
  2. 横スクロールが出ていないか見る
  3. カード一覧が折り返すか見る
  4. ボタンが押しやすい大きさか見る

次のステップ

次は JavaScript入門 #14 - DOM要素の取得 や JavaScript入門 #15 - イベント処理 に進むと、HTMLとCSSで作ったページに動きを付けられます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR