問題
20アコーディオンをCSSで作ろう
CSSのアコーディオンは、クリック操作によってコンテンツを開閉できるUIとして、FAQページやナビゲーションメニューなどで広く利用されています。この問題では、max-heightやoverflowを活用しながら、CSSでアコーディオンを実装する方法を学習します。実務でもよく使われるテクニックのため、この機会にしっかり身につけておきましょう。
CSSアコーディオンとは
CSSアコーディオンの特徴
CSSアコーディオンとは、クリックやタップによってコンテンツの表示・非表示を切り替えられるUIのことです。FAQページやナビゲーションメニュー、お知らせ一覧などでよく利用されています。限られたスペースでも多くの情報を整理して表示できるため、Web制作の現場でも頻繁に採用されているデザイン手法です。
CSSアコーディオンの作り方
CSSアコーディオンは、HTMLで作成した要素にCSSを適用することで実装できます。クリック操作に応じてコンテンツの表示状態を切り替える仕組みを利用し、FAQページやナビゲーションメニューなどで活用されています。まずは基本的な構造を理解しながら、実際にアコーディオンを作成してみましょう。
【上級】CSSアコーディオンを作ってみよう
問題
「アコーディオンをCSSで作ろう」
以下のコードを使って、クリックで展開される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¥
期待する画面
解答と解説（アコーディオンをCSSで作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
CSSアコーディオンは、クリック操作に合わせてコンテンツの表示・非表示を切り替えるUIです。今回の問題では、CSSを使ってアコーディオンメニューが展開される動きを実装しています。
初期状態では、コンテンツ部分の高さを抑えることで中身が見えない状態にします。さらに、はみ出した内容を非表示にする指定を組み合わせることで、閉じた状態のアコーディオンを表現できます。クリック操作によって開いた状態になると、コンテンツの表示領域が広がり、中身が見えるようになります。
また、開閉時にtransitionを指定することで、急に表示が切り替わるのではなく、なめらかに展開されるアニメーションを作ることができます。FAQページやナビゲーションメニューでは、情報を整理しながら見せたい場面が多いため、CSSアコーディオンは実務でもよく使われるUIです。
初心者がつまずきやすい点として、表示領域の高さだけを指定しても、はみ出したコンテンツが見えてしまう場合があります。そのため、高さの制御と非表示の指定をセットで考えることが重要です。アコーディオンCSSの仕組みを理解しておくと、限られたスペースに情報を整理して表示できるようになります。
補足
CSSアコーディオンは、FAQページやメニューなど、限られたスペースに情報を整理して表示したい場面でよく使われます。実務では、開閉アニメーションだけでなく、クリックしやすさや見出しの分かりやすさも重要です。関連して、CSSのアニメーションやhover、JavaScriptを使った開閉処理も学ぶと、より実践的なUI制作に応用できます。
・CSSレイアウト関連：要素の高さに縛りをつけよう
・問題集一覧：HTML/CSS問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
CSSアコーディオンのポイント
CSSアコーディオンの開閉を制御する方法
CSSアコーディオンでは、コンテンツの表示領域を制御することで開閉を実現します。今回の問題で使用したmax-heightは要素の最大高さを指定するプロパティで、初期状態を0にすることでコンテンツを折りたたむことができます。また、overflow: hiddenを指定することで表示領域からはみ出した内容を非表示にできます。さらにtransitionを組み合わせることで、CSSアコーディオン特有の滑らかな開閉アニメーションを実装できます。
CSSアコーディオンを実務で活用する場面
CSSアコーディオンは、FAQページやサイドメニュー、お知らせ一覧など、情報量の多いWebサイトでよく利用されています。近年はdetailsタグとsummaryタグを使う実装も増えていますが、max-heightやoverflowを使った方法も現在のWeb制作で広く使われています。実装につまずいた場合は、実務経験者へ相談しながら学習を進めるのもおすすめです。
