Webページの構成において、ナビゲーションメニューや広告、プロフィール情報などを表示する「サイドバー」はとても重要です。特に情報量が多いブログや管理画面では、サイドバー付きのレイアウトがユーザーの操作性を高めてくれます。この記事では、HTML・CSS・JavaScriptを使って簡単に構築できるサイドバー付きレイアウトを3パターンご紹介します。固定サイドバー、開閉式サイドバー、レスポンシブ対応のサイドバーを取り上げ、それぞれのコード付きで解説します。
サイドバー付きレイアウトは大きく分けて、次の2つの構成で作られます。
<aside>タグを使うのが一般的）<main>や<section>）以下が最も基本的なHTML構造です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>基本サイドバー付きレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<aside class="sidebar">
<h2>サイドバー</h2>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
</ul>
</aside>
<main class="content">
<h1>メインコンテンツ</h1>
<p>ここに本文が入ります。</p>
</main>
</div>
</body>
</html>
そして、CSSで横並びに表示させるのが基本です。
.container {
display: flex;
}
.sidebar {
width: 250px;
background-color: #f0f0f0;
padding: 1em;
}
.content {
flex: 1;
padding: 1em;
}
スクロールしてもサイドバーが画面に固定されているタイプです。管理画面やダッシュボードでよく使われます。
<aside class="fixed-sidebar">
<h2>固定サイドバー</h2>
<ul>
<li><a href="#">メニューA</a></li>
<li><a href="#">メニューB</a></li>
</ul>
</aside>
<main class="fixed-content">
<h1>メインコンテンツ</h1>
<p>たくさんのスクロールコンテンツがここに入ります。</p>
</main>
body {
margin: 0;
font-family: sans-serif;
}
.fixed-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
height: 100vh;
background: #2c3e50;
color: white;
padding: 1em;
}
.fixed-content {
margin-left: 220px;
padding: 1em;
}
スマートフォン対応や管理画面で人気のある開閉式のサイドバー。JavaScriptを使って実装します。
<button id="toggleBtn">☰ メニュー</button>
<aside id="toggleSidebar" class="toggle-sidebar">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
</ul>
</aside>
<main class="toggle-main">
<h1>メインコンテンツ</h1>
</main>
.toggle-sidebar {
width: 200px;
height: 100vh;
background: #34495e;
color: white;
position: fixed;
top: 0;
left: -200px;
transition: left 0.3s;
}
.toggle-sidebar.active {
left: 0;
}
.toggle-main {
margin-left: 0;
padding: 1em;
}
#toggleBtn {
margin: 1em;
}
document.getElementById('toggleBtn').addEventListener('click', function() {
document.getElementById('toggleSidebar').classList.toggle('active');
});
パソコンでは横並び、スマホでは縦並びに切り替えるレイアウトです。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
}
.content {
margin-left: 0;
}
}
上記のようにメディアクエリで幅768px以下になった場合、横並びから縦並びに変更されます。
overflowを適切に設定しましょう。display: none;や開閉式にして切り替えましょう。z-indexやpositionの関係に注意しましょう。サイドバー付きのレイアウトは、一見難しそうに見えても、基本のHTML + CSS + JavaScriptの組み合わせで簡単に実装できます。この記事で紹介した3つのパターン（固定・開閉・レスポンシブ）を使えば、あなたのWebサイトにもすぐ応用できるはずです。実際のプロジェクトでは、UIライブラリ（Bootstrapなど）を活用してもいいでしょうが、まずは自分で作って構造を理解することが大切です。