問題
20
HTML/CSS
アコーディオンメニューを作ってみよう
max-heightとoverflowを使ったアニメーションの制御を学習します。実務でもよく使用されるものになるので是非ここで習得しておきましょう！
HTML/CSSの問題に挑戦しよう！
問題
「アコーディオンメニューを作ってみよう」
以下のコードを使って、クリックで展開されるアコーディオンメニューを作成してください。
あらかじめエディタに書くコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アコーディオンメニュー</title>
</head>
<body>
<button class="accordion">セクション 1</button>
<div class="panel">
<p>セクション 1 の内容。</p>
</div>
<button class="accordion">セクション 2</button>
<div class="panel">
<p>セクション 2 の内容。</p>
</div>
<script>
const accordions = document.querySelectorAll(".accordion");
accordions.forEach(accordion => {
accordion.addEventListener("click", function() {
this.classList.toggle("active");
const panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
});
</script>
</body>
</html>
¥HTML¥
期待する画面
解答と解説（アコーディオンメニューを作ってみよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
アコーディオンメニューは、max-heightを使ってコンテンツの表示と非表示を制御します。
初期状態ではmax-height: 0に設定され、overflow: hiddenでコンテンツが隠されます。
ユーザーがボタンをクリックすると、max-heightが増加し、コンテンツが展開されます。
transition: max-height 0.2s ease-outを使用することで、アニメーションが滑らかに行われます。これによって、動的なUIを実現し、ユーザーがクリック操作で情報を確認しやすくなります。
