レスポンシブデザイン実装完全ガイド｜スマートフォン対応CSSの書き方を一から解説

はじめに
1. レスポンシブデザインとは
- 1.1 レスポンシブデザインの概要
- 1.2 ブレークポイントとは
2. viewportの設定
- 2.1 viewportメタタグを必ず入れる
3. メディアクエリの書き方
4. よく使うレスポンシブのパターン
5. Flexboxでレスポンシブレイアウトを作る
- 5.1 Flexboxの基本
- 5.2 flex-wrapで自動的に折り返す
6. ブラウザの開発者ツールで確認する
- 6.1 デバイスツールバーでスマートフォン表示を確認する
- 6.2 よくある表示崩れと対処法
7. レスポンシブ実装チェックリスト
まとめ

はじめに

前回の記事ではモデリング（模写コーディング）の手順を解説しました。気に入ったサイトのコードを手元に持ってきて自分のサイトに作り変える練習です。今回はそのモデリングで作ったサイトをベースにレスポンシブデザインを実装する方法を解説します。スマートフォンの普及により、現在のWebサイトはスマートフォン・タブレット・PCのどの画面サイズでも崩れずに表示されることが必須になっています。メディアクエリの書き方・よく使うレスポンシブのパターン・Flexboxを使ったレイアウトまで一から解説します。

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

1.1 レスポンシブデザインの概要

レスポンシブデザインとは画面のサイズに応じてレイアウトやスタイルを自動的に切り替えるデザイン手法のことです。ひとつのHTMLファイルとCSSファイルで、スマートフォン・タブレット・PCすべての画面サイズに対応できます。

対応方法	特徴
レスポンシブデザイン	1つのHTMLでCSS（メディアクエリ）で画面サイズに応じてレイアウトを切り替える
別URLで対応	PC用とスマートフォン用でURLを分けて別々のHTMLを用意する（現在は非推奨）

💡 Googleはモバイルファーストインデックスを採用しています： Googleはスマートフォン版のコンテンツを基準にサイトを評価します。スマートフォン対応はSEOの観点からも必須です。

1.2 ブレークポイントとは

画面サイズによってレイアウトを切り替える基準となる幅をブレークポイントと呼びます。

デバイス	代表的なブレークポイント
スマートフォン（縦）	〜480px
スマートフォン（横）・大きめスマートフォン	〜767px
タブレット	768px〜1024px
PC・ラップトップ	1025px〜

2. viewportの設定

2.1 viewportメタタグを必ず入れる

レスポンシブデザインを正しく機能させるために、HTMLの <head> 内に必ず以下のメタタグを入れます。モデリングで取得したコードにはすでに入っている場合がほとんどですが、ない場合は追加します。

<head>
  <meta charset="UTF-8">

  <!-- レスポンシブデザインに必須のviewport設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>My Portfolio</title>
  <link rel="stylesheet" href="css/style.css">
</head>

⚠️ viewportメタタグがないとスマートフォンで縮小表示されます： このタグがないとスマートフォンはPC用の幅でページを表示して縮小するため、文字がとても小さく表示されます。必ず入れてください。

3. メディアクエリの書き方

3.1 メディアクエリの基本構文

メディアクエリはCSSの中で「画面幅が○○px以下のときにこのスタイルを適用する」という条件分岐を書く仕組みです。

/* 基本構文 */
@media (max-width: 768px) {
    /* 画面幅が768px以下のときに適用するスタイル */
    .container {
        padding: 0 16px;
    }
}

3.2 モバイルファーストとデスクトップファースト

メディアクエリには2つのアプローチがあります。

デスクトップファースト（max-width）： PC用のスタイルをベースに書いて、画面が小さくなったときに上書きする方法です。モデリングで取得したサイトのコードはこちらが多いです。

/* PCのスタイル（ベース） */
.hero {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

/* 768px以下（スマートフォン）のスタイル */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        gap: 20px;
    }
}

モバイルファースト（min-width）： スマートフォン用のスタイルをベースに書いて、画面が大きくなったときに上書きする方法です。現代的な開発ではこちらが推奨されています。

/* スマートフォンのスタイル（ベース） */
.hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 768px以上（PC）のスタイル */
@media (min-width: 768px) {
    .hero {
        flex-direction: row;
        gap: 40px;
    }
}

💡 モデリングしたサイトに合わせましょう： 既存のコードに手を加える場合は元のコードがどちらのアプローチかを確認して合わせるのが混乱しにくくておすすめです。

3.3 よく使うブレークポイントの書き方

/* スマートフォン専用 */
@media (max-width: 480px) { }

/* スマートフォン・タブレット共通 */
@media (max-width: 768px) { }

/* タブレット専用 */
@media (min-width: 481px) and (max-width: 1024px) { }

/* PC専用 */
@media (min-width: 1025px) { }

4. よく使うレスポンシブのパターン

4.1 横並びを縦並びに変える

PC版では横に並んでいる要素をスマートフォンでは縦に並べる最もよく使うパターンです。

<div class="card-grid">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
    <div class="card">カード3</div>
</div>

/* PC：3列横並び */
.card-grid {
    display: flex;
    gap: 24px;
}

.card {
    flex: 1;
    padding: 24px;
    background: #f5f5f5;
    border-radius: 8px;
}

/* スマートフォン：縦並びに変更 */
@media (max-width: 768px) {
    .card-grid {
        flex-direction: column;
        gap: 16px;
    }
}

4.2 ナビゲーションメニューをハンバーガーメニューに変える

PC版では横並びのナビゲーションをスマートフォンではハンバーガーメニューに変えるパターンです。

<header class="header">
    <div class="logo">My Portfolio</div>
    <button class="hamburger" id="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </button>
    <nav class="nav" id="nav">
        <ul class="nav-list">
            <li><a href="#about">About</a></li>
            <li><a href="#works">Works</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

/* PC：横並びナビ */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 64px;
}

.nav-list {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hamburger {
    display: none;  /* PCでは非表示 */
}

/* スマートフォン：ハンバーガーメニュー */
@media (max-width: 768px) {

    .header {
        padding: 0 16px;
    }

    .hamburger {
        display: flex;          /* スマートフォンで表示 */
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: #333;
    }

    .nav {
        display: none;          /* 初期状態は非表示 */
        position: fixed;
        top: 64px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 24px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .nav.is-open {
        display: block;         /* is-openクラスで表示 */
    }

    .nav-list {
        flex-direction: column;
        gap: 16px;
    }
}

// ハンバーガーメニューの開閉をJavaScriptで制御
const hamburger = document.getElementById('hamburger');
const nav = document.getElementById('nav');

hamburger.addEventListener('click', () => {
    nav.classList.toggle('is-open');
});

4.3 画像をレスポンシブ対応にする

画像は max-width: 100% を設定するだけで親要素の幅に合わせて縮小されます。

/* すべての画像にレスポンシブ対応を適用 */
img {
    max-width: 100%;
    height: auto;       /* アスペクト比を保ったまま縮小 */
    display: block;
}

4.4 フォントサイズをスマートフォンで小さくする

/* PC */
h1 {
    font-size: 48px;
    line-height: 1.3;
}

p {
    font-size: 16px;
    line-height: 1.8;
}

/* スマートフォン */
@media (max-width: 768px) {
    h1 {
        font-size: 28px;
    }

    p {
        font-size: 14px;
    }
}

4.5 余白（padding・margin）をスマートフォンで小さくする

PC版の余白をそのままスマートフォンに適用すると画面が狭く感じます。

/* PC */
.section {
    padding: 80px 40px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* スマートフォン */
@media (max-width: 768px) {
    .section {
        padding: 48px 16px;
    }

    .container {
        padding: 0 16px;
    }
}

5. Flexboxでレスポンシブレイアウトを作る

5.1 Flexboxの基本

Flexboxはレスポンシブレイアウトを作る上で最も使いやすいCSSのレイアウト機能です。

.flex-container {
    display: flex;           /* Flexboxを有効化 */
    flex-wrap: wrap;         /* 折り返しを許可 */
    gap: 24px;               /* 要素間の余白 */
    justify-content: center; /* 水平方向の揃え */
    align-items: center;     /* 垂直方向の揃え */
}

5.2 flex-wrapで自動的に折り返す

flex-wrap: wrap と flex-basis を組み合わせると画面幅に応じて自動的に折り返すレイアウトが作れます。

.works-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.works-item {
    flex: 1 1 300px;  /* 最小幅300px。余裕があれば横に並ぶ */
    max-width: calc(50% - 12px);  /* PCでは2列 */
}

@media (max-width: 768px) {
    .works-item {
        max-width: 100%;  /* スマートフォンでは1列 */
    }
}

6. ブラウザの開発者ツールで確認する

6.1 デバイスツールバーでスマートフォン表示を確認する

CSSを書いたらブラウザの開発者ツールでスマートフォン表示を確認します。

F12キーで開発者ツールを開きます。
左上のスマートフォンアイコン（デバイスツールバー）をクリックします。
上部のドロップダウンから確認したいデバイスを選択します（iPhone・Androidなど）。
表示を確認しながらCSSを調整します。

よく確認すべきデバイス：

デバイス	幅	確認するポイント
iPhone SE	375px	最小クラスのスマートフォン
iPhone 14 Pro	390px	標準的なスマートフォン
iPad	768px	タブレット・ブレークポイント付近
PC（1280px）	1280px	一般的なPC幅

6.2 よくある表示崩れと対処法

症状	原因	対処法
スマートフォンで横スクロールが出る	要素の幅が画面幅を超えている	`overflow-x: hidden` を `body` に設定
画像がはみ出る	`width` が固定値になっている	`max-width: 100%` を設定
テキストが小さすぎる	フォントサイズが固定されている	メディアクエリでスマートフォン用のサイズを指定
ボタンが押しにくい	タップ領域が小さい	`min-height: 44px` を設定する（Appleのガイドライン）

7. レスポンシブ実装チェックリスト

✓ <meta name="viewport" content="width=device-width, initial-scale=1.0"> が <head> 内にあるか

✓ すべての画像に max-width: 100%; height: auto; が設定されているか

✓ 開発者ツールのデバイスツールバーで主要なデバイスサイズを確認したか

✓ 横スクロールが発生していないか

✓ スマートフォンでナビゲーションが使いやすいか

✓ スマートフォンでフォントサイズが小さすぎないか（最小14px程度）

✓ ボタンのタップ領域が十分な大きさか（最低44×44px）

✓ 変更のたびにGitでコミットしているか