HTML

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

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

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

レスポンシブ対応とは?

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

  1. フルードグリッド(Fluid Grid)
    CSSの width: 100% や flexbox を活用し、コンテンツのサイズを柔軟に変化させることで、どのデバイスでも適切なレイアウトを保つ手法です。
  2. フレキシブルイメージ(Flexible Images)
    画像の max-width: 100% を指定することで、親要素の幅に合わせて自動的に調整されるようにします。
  3. メディアクエリ(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; /* スマホ時にハンバーガーボタン表示 */
    }
}

解説

1. PCとスマホで異なるナビゲーションを実装

PCの場合
  • .nav-pc にメニューを横一列に配置(display: inline-block;)。
  • PCでは .menu-btn は表示しない。
スマホの場合
  • .menu-btn をクリックすると .nav-mobile が右からスライドして表示。
  • .close-btn で .nav-mobile を閉じる。

2. @media screen and (max-width: 768px) を適用

スマホ時
  • .nav-pc を display: none; で非表示に。
  • .menu-btn を display: block; にし、ハンバーガーメニューを表示。

3. JavaScript でメニューを開閉

  • .menu-btn をクリック → .nav-mobile に active クラスを追加し、右からスライド。
  • .close-btn をクリック → active クラスを削除し、メニューを隠す。

今更聞けないレスポンシブWebページサンプルスケルトンコード

スケルトンサンプルコードを実装したサンプルページは以下のリンクから確認してみてください。

今更聞けないレスポンシブWebページサンプルスケルトンコード

注意点

  • メディアクエリの適切な利用:
    異なる画面サイズに応じたデザインをしっかりと適用する
  • 画像のサイズ最適化:
    大きすぎる画像をそのまま使用すると、スマホでは読み込みが遅くなる
  • タッチデバイス対応:
    スマホでのタップ操作を考慮し、ナビゲーションメニューを適切に配置する
  • テストを怠らない: Chrome DevToolsや実機でのテストを行い、さまざまなデバイスでの表示を確認する

まとめ

このコードを使用すると、PCでは横並びのメニュー、スマホではハンバーガーメニューをクリックすると右からスライドするメニューが表示される仕組みになります。

レスポンシブWebデザインは、今やWebサイト制作において欠かせない要素です。基本的な概念を理解し、スケルトンコードを活用することで、初心者でも簡単にレスポンシブ対応のWebページを作成できます。

今回紹介したHTMLとCSSのコードをベースに、ぜひ自分のサイトに適用してみてください。さらに発展させて、CSSフレームワーク(BootstrapやTailwind CSS)を活用すると、より洗練されたレスポンシブデザインが実現できます。

Webページをレスポンシブ対応して、より多くのユーザーに最適なWeb体験を提供しましょう!

 
※参考にされる場合は自己責任でお願いします。
 サンプルページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。