今更聞けないレスポンシブWebデザインの基本とスケルトンコード｜初心者向けサンプル付き｜DAD UNION

Webページの閲覧環境は日々多様化しており、スマートフォン、タブレット、PCなど、異なるデバイスに対応できるレスポンシブWebデザインが求められています。
しかし、初心者のWebエンジニアにとって、レスポンシブ対応のページを作成するのは少し難しく感じられるかもしれません。

そこで本記事では、レスポンシブWebデザインの基本概念を解説し、すぐに使えるスケルトン（基本テンプレート）コードを紹介します。
さらに、スマホではハンバーガーメニューをクリックすると右からスライドしてメニューが表示される仕様を実装してます。

Contents

レスポンシブ対応とは？
コピペで使えるスケルトンサンプルコード
今更聞けないレスポンシブWebページサンプルスケルトンコード
注意点
まとめ

レスポンシブ対応とは？

レスポンシブWebデザインとは、画面サイズに応じてレイアウトを動的に調整し、ユーザーに最適な表示を提供する技術のことを指します。
主に以下の3つの手法を組み合わせて実装されます。

フルードグリッド（Fluid Grid）
CSSの width: 100% や flexbox を活用し、コンテンツのサイズを柔軟に変化させることで、どのデバイスでも適切なレイアウトを保つ手法です。
フレキシブルイメージ（Flexible Images）
画像の max-width: 100% を指定することで、親要素の幅に合わせて自動的に調整されるようにします。
メディアクエリ（Media Queries）
特定の画面サイズに応じたCSSルールを適用することで、デバイスごとに適切なデザインを提供します。

コピペで使えるスケルトンサンプルコード

以下のコードは、PCの場合は横一列のメニュー、スマホの場合はハンバーガーメニューをクリックすると右からスライドしてメニューが表示されるように設計されています。

HTML・JavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="今更聞けないレスポンシブWebページの基本と、すぐに使えるスケルトンコードを解説！初心者Webエンジニアにもわかりやすい解説付きで、コピペですぐに使えるHTMLとCSSを紹介します。">
    <title>今更聞けないレスポンシブWebページサンプルスケルトンコード</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <h1>レスポンシブWebページのスケルトン</h1>

    <!-- PC用ナビゲーション -->
    <nav class="nav-pc">
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">サービス</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>

    <!-- スマホ用ハンバーガーメニュー -->
    <button class="menu-btn">&#9776;</button>
    <nav class="nav-mobile">
        <button class="close-btn">&times;</button>
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">サービス</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>レスポンシブデザインとは？</h2>
        <p>画面サイズに応じてレイアウトを調整する技術です。</p>
        <img src="https://dad-union.com/wp-content/uploads/2023/06/logo2.jpg" alt="レスポンシブWebデザインの例">
    </section>
</main>

<footer>
    <p>© 2025 All Rights Reserved.</p>
</footer>

<script>
    // ハンバーガーメニュー開閉の処理
    document.querySelector(".menu-btn").addEventListener("click", function() {
        document.querySelector(".nav-mobile").classList.add("active");
    });

    document.querySelector(".close-btn").addEventListener("click", function() {
        document.querySelector(".nav-mobile").classList.remove("active");
    });
</script>
</body>
</html>

CSSコード（styles.css）

/* 全体のリセット */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* ヘッダー */
header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: relative;
}

/* PC用ナビゲーション */
.nav-pc ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.nav-pc ul li {
    display: inline-block;
    margin: 0 15px;
}

.nav-pc ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/* ハンバーガーボタン */
.menu-btn {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: none;
}

/* スマホ用ナビゲーション */
.nav-mobile {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background-color: #333;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}

/* メニューが開いた状態 */
.nav-mobile.active {
    right: 0;
}

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

/* メニューのリスト */
.nav-mobile ul {
    list-style: none;
    padding: 0;
    width: 100%;
    text-align: center;
}

.nav-mobile ul li {
    margin: 20px 0;
}

.nav-mobile ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

/* メインコンテンツ */
main {
    padding: 20px;
    text-align: center;
}

section {
    max-width: 800px;
    margin: auto;
}

/* 画像のレスポンシブ対応 */
img {
    max-width: 100%;
    height: auto;
}

/* フッター */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

/* スマホ時のナビゲーション設定 */
@media screen and (max-width: 768px) {
    .nav-pc {
        display: none; /* PCメニューを非表示 */
    }

    .menu-btn {
        display: block; /* スマホ時にハンバーガーボタン表示 */
    }
}