スライドメニューの実装
スライドメニューは、モダンなWebサイトで広く使用されているナビゲーション要素です。このチュートリアルでは、HTMLとCSSだけでスムーズなスライドメニューを作成する方法を紹介します。JavaScriptは追加のインタラクティブ機能を必要とする場合のみ使用します。
基本構造（HTML）
まず、メニューとメインコンテンツの基本的なHTML構造を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スライドメニューのデモ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navigation">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">製品</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">会社情報</a></li>
</ul>
</nav>
<div class="content">
<h1>メインコンテンツ</h1>
<p>ここにページの主要なコンテンツが表示されます。メニューを開くと、このコンテンツが右側にスライドします。</p>
</div>
<script src="script.js"></script>
</body>
</html>スタイル設定（CSS）
次に、CSSを使用してメニューの外観とアニメーションを設定します。
/* 基本的なスタイルリセット */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
}
/* ナビゲーションメニューのスタイル */
.navigation {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #2c3e50;
color: #ecf0f1;
transform: translateX(-100%);
transition: transform 0.4s ease-in-out;
z-index: 1000;
padding: 20px 0;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
border-bottom: 1px solid #34495e;
}
.navigation ul li a {
display: block;
padding: 15px 25px;
color: #ecf0f1;
text-decoration: none;
transition: background-color 0.3s;
}
.navigation ul li a:hover {
background-color: #34495e;
}
/* メニューが開いた状態 */
.navigation.active {
transform: translateX(0);
}
/* メインコンテンツのスタイル */
.content {
margin-left: 20px;
padding: 20px;
transition: margin-left 0.4s ease-in-out;
}
/* メニューが開いたときのコンテンツの位置調整 */
.navigation.active ~ .content {
margin-left: 270px;
}
/* メニュートリガーボタンのスタイル */
.menu-toggle {
position: fixed;
top: 20px;
left: 20px;
z-index: 1001;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.menu-toggle:hover {
background-color: #2980b9;
}インタラクティブ機能（JavaScript）
最後に、JavaScriptを使用してメニューの開閉機能を実装します。
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.createElement('button');
menuToggle.className = 'menu-toggle';
menuToggle.textContent = 'メニューを開く';
document.body.insertBefore(menuToggle, document.body.firstChild);
const navigation = document.querySelector('.navigation');
menuToggle.addEventListener('click', function() {
navigation.classList.toggle('active');
if (navigation.classList.contains('active')) {
menuToggle.textContent = 'メニューを閉じる';
} else {
menuToggle.textContent = 'メニューを開く';
}
});
// メニュー項目をクリックしたら自動的に閉じる
const menuItems = document.querySelectorAll('.navigation ul li a');
menuItems.forEach(item => {
item.addEventListener('click', function() {
navigation.classList.remove('active');
menuToggle.textContent = 'メニューを開く';
});
});
});カスタマイズのヒント
- メニューの幅はCSSのwidthプロパティで調整できます
- アニメーションの速度はtransitionプロパティの時間値で変更できます
- 色やフォントはサイトのデザインに合わせて変更できます
- レスポンシブデザインに対応するには、メディアクエリを使用してモバイル表示を調整します