Webページの閲覧環境は日々多様化しており、スマートフォン、タブレット、PCなど、異なるデバイスに対応できるレスポンシブWebデザインが求められています。
しかし、初心者のWebエンジニアにとって、レスポンシブ対応のページを作成するのは少し難しく感じられるかもしれません。
そこで本記事では、レスポンシブ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">☰</button>
<nav class="nav-mobile">
<button class="close-btn">×</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とスマホで異なるナビゲーションを実装
- .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アナリティクスタグは流用しないで下さい。