09. レスポンシブ対応

この章では、レスポンシブ対応を学びます。

レスポンシブ対応とは、スマホ、タブレット、PCなど、画面幅が違っても読みやすく使いやすい表示にすることです。

Web制作では、最初からスマホ表示を前提に考えることが大切です。

viewportの指定

レスポンシブ対応では、まずHTMLのheadにviewportを指定します。

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

この指定がないと、スマホでPCサイトを縮小したような表示になることがあります。

HTMLファイルの基本形に入れておきましょう。

メディアクエリ

画面幅に応じてCSSを切り替えるには、メディアクエリを使います。

.card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

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

この例では、基本は1列です。

画面幅が768px以上になったら3列に切り替えます。

モバイルファースト

モバイルファーストとは、スマホ表示を基本にして、画面が広くなった時にスタイルを追加していく考え方です。

.hero-title {
    font-size: 28px;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 40px;
    }
}

スマホは画面幅が狭いため、余白や文字サイズ、列数を慎重に決める必要があります。

スマホで読みやすい状態を作り、PCでは余白や横並びを追加する方が整理しやすいです。

ブレイクポイント

ブレイクポイントとは、表示を切り替える画面幅のことです。

よく使う目安は次の通りです。

ただし、必ずこの数値を使う必要はありません。

デザインやコンテンツが崩れ始める場所に合わせて決めます。

幅を固定しすぎない

レスポンシブ対応でよくある失敗は、幅を固定しすぎることです。

.banner {
    width: 1000px;
}

この指定では、スマホ画面より要素が大きくなり、横スクロールが出ることがあります。

代わりに、max-widthを使います。

.banner {
    width: 100%;
    max-width: 1000px;
}

これなら、画面が狭い時は画面幅に合わせて縮み、広い時は最大1000pxで止まります。

画像の扱い

画像は、親要素からはみ出さないようにします。

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

max-width: 100%;で親要素より大きくならないようにします。

height: auto;で縦横比を保ちます。

display: block;は、画像下に意図しない余白が出るのを防ぐためによく使います。

横並びを縦並びに変える

PCでは横並び、スマホでは縦並びにするパターンはよくあります。

.media {
    display: grid;
    gap: 24px;
}

@media (min-width: 768px) {
    .media {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

基本は縦並びにし、画面が広い時だけ2カラムにします。

この考え方は、カード一覧、サービス紹介、会社紹介などでよく使います。

タップしやすさ

スマホでは、クリックではなくタップで操作します。

ボタンやリンクが小さすぎると押しづらくなります。

意識したいポイントは次の通りです。

• ボタンの上下左右に十分な余白を取る
• リンク同士を近づけすぎない
• フォーム入力欄を小さくしすぎない
• 固定ヘッダーで本文を隠さない
• 横スクロールを出さない

見た目だけでなく、指で操作しやすいかを確認します。

実機確認

ブラウザの開発者ツールでもスマホ幅の確認はできます。

ただし、最終的には実際のスマホで見ると気づきやすいことがあります。

• 文字が小さく感じる
• ボタンが押しづらい
• 固定要素が邪魔になる
• 画像の見え方が違う
• スクロール量が多すぎる

同じWi-Fi内で開発サーバーにアクセスできるようにしておくと、実機確認がしやすくなります。

よくある失敗

• viewportを書き忘れる
• PC幅だけで作って、最後にスマホ対応しようとする
• 固定幅を多用して横スクロールが出る
• 画像にmax-width: 100%;を指定していない
• PCの横並びをスマホでも無理に維持する
• ボタンやリンクが小さくてタップしづらい

レスポンシブ対応は、最後にまとめて直すより、作りながら確認する方が楽です。

この章のまとめ

• レスポンシブ対応では、viewport指定が必要
• メディアクエリで画面幅に応じてCSSを切り替える
• スマホを基本にして、画面が広い時にスタイルを追加すると整理しやすい
• 固定幅を避け、max-widthやwidth: 100%;を使う
• 見た目だけでなく、タップしやすさも確認する