Webサイトのデザインでよく使われるアコーディオンメニュー。JavaScriptを使わず、CSSだけで作成する方法を紹介します。初心者でも簡単に実装できるので、ぜひ試してみてください！
CSSのみでアコーディオンを作る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSのみで作るアコーディオン</title>
<style>
.accordion {
width: 100%;
max-width: 600px;
margin: auto;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.accordion input {
display: none;
}
.accordion label {
display: block;
padding: 15px;
background-color: #f1f1f1;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
.accordion label:hover {
background-color: #ddd;
}
.accordion .content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding: 0 15px;
background-color: #fff;
}
.accordion input:checked + label + .content {
max-height: 200px;
padding: 15px;
}
</style>
</head>
<body>
<div class="accordion">
<input type="checkbox" id="section1" />
<label for="section1">セクション1</label>
<div class="content">
<p>セクション1の内容です。</p>
</div>
<input type="checkbox" id="section2" />
<label for="section2">セクション2</label>
<div class="content">
<p>セクション2の内容です。</p>
</div>
<input type="checkbox" id="section3" />
<label for="section3">セクション3</label>
<div class="content">
<p>セクション3の内容です。</p>
</div>
</div>
</body>
</html>サンプル
まとめ
CSSだけで簡単にアコーディオンメニューを作成する方法を紹介しました。JavaScriptを使わずに実装できるので、軽量でシンプルなウェブサイトに最適です。ぜひあなたのサイトでも活用してみてください！
