アコーディオンメニューの作り方をHTMLとCSSで学ぶ完全ガイド

折原 慧ウェブデザインデイ 編集ライター

Webサイトを制作していると、限られた画面スペースにたくさんの情報を詰め込みたい場面に必ず出会います。そんなときに頼りになるのが「アコーディオンメニュー」です。項目をクリックすると内容がスッと開き、もう一度押すと閉じる、あの馴染み深いUIですね。

個人的な経験では、FAQページやスマホ用ナビゲーションを作るとき、このアコーディオンを使えるかどうかで、ページの見やすさが大きく変わってきました。実装方法もHTMLとCSSだけで完結する手軽なものから、JavaScriptで細かく制御するものまで幅広くあります。

この記事では、初心者の方でも段階的に理解できるよう、基本から応用まで丁寧に解説していきます。

アコーディオンメニューとは何か

アコーディオンメニューとは、Webページ上で項目をクリックまたはタップすると、その場で領域が縦に広がって詳細な内容を表示し、再度操作すると閉じる形式のメニューUIのことです。

名前の由来は楽器のアコーディオンにあります。操作に応じてメニューの領域が伸びたり縮んだりする様子が、あの蛇腹の動きに似ていることからこう呼ばれるようになりました。

この仕組みの魅力は、なんといっても限られたスペースに多くの項目を一覧できる点。ユーザーは必要な情報だけを開いて閲覧できるため、情報探索がとてもスムーズになります。

特にFAQやスマホナビゲーションでは、縦スクロールが長くなりすぎるのを防ぎ、すっきりとした見やすいUIを実現できます。

アコーディオンメニューが活躍する主な場面

実際にどんな場所で使われているのか、代表的な利用シーンを整理してみましょう。

FAQ（よくある質問）ページ

質問だけを一覧表示し、クリックで回答を展開する形式です。ユーザーは自分が知りたい質問だけを開けるので、ページ全体がすっきりします。

サイドメニューやドロワーメニュー

カテゴリーをクリックするとサブメニューが開くナビゲーションです。階層構造を持つサイトで特に重宝します。

スマホ向けグローバルナビゲーション

ハンバーガーメニュー内の階層メニューとしてよく使われます。狭いスマホ画面でも、深い階層をコンパクトに表現できます。ハンバーガーメニューの実装方法と組み合わせると、スマホ対応のナビゲーションがぐっと充実します。

絞り込み検索のフィルターパネル

検索条件を折りたたみ表示することで、ECサイトなどの絞り込み画面を整理できます。プロフィールや商品情報など、詳細説明を折りたたむコンテンツブロックにも便利です。

HTMLとCSSだけで作る実装パターン

まずはJavaScriptを使わない、シンプルな実装から見ていきましょう。スクリプトを避けたいケースや、初心者の方に特におすすめの方法です。

チェックボックスとラベルを使う方式

この方式では、input type=”checkbox”とそれに対応するlabel、そしてコンテンツブロックをセットで用意します。各メニュータイトル用にチェックボックスとラベルを、コンテンツ用にdivやulを配置する構造が一般的です。

CSSの基本ロジックはこうです。初期状態ではコンテンツブロックにmax-height: 0やopacity: 0、overflow: hiddenを指定して非表示にしておきます。

そしてチェックされた状態を示す隣接要素セレクタ（例：input:checked + .accordion_content）を使い、max-heightやopacityを変更して表示するのです。transitionを加えれば、開閉時に滑らかなアニメーションもつけられます。

ちなみに、チェックボックスの代わりにラジオボタンを使えば「一つ開くと他は閉じる」挙動もCSSだけで実現できます。用途に合わせて使い分けるとよいでしょう。

detailsとsummaryタグを使うHTML5方式

もっと手軽に作りたい方には、HTML5標準のdetails要素がおすすめです。各項目をdetailsで包み、その中にsummary（見出し）と詳細コンテンツを配置するだけで完成します。

detailsタグはブラウザが標準で折りたたみ機能を提供してくれるため、クリックすると自動的に開閉します。JavaScriptもCSSの複雑な記述も不要。これほど手軽な方法はありません。

見た目を整えたい場合は、summaryのスタイルや開閉時のアイコン変更などをCSSでカスタマイズしていきます。標準機能を土台にしつつ、デザインの自由度も確保できるバランスの良い選択肢です。

JavaScriptで作る本格的なアコーディオン

より細かい制御や滑らかなアニメーションを求めるなら、JavaScriptを使った実装が向いています。jQueryを使わない純粋なJavaScriptでも、十分にきれいなものが作れます。

ボタンとコンテンツのクラス切り替え方式

基本構造は、アコーディオンの各項目をボタンとコンテンツブロックのペアで構成し、複数項目がある場合は同じクラス名でグループ化します。

JavaScriptの処理の流れはこうです。

開閉状態を示すクラス（例：.is-open）を付け外しし、CSS側でそのクラスに応じて高さや表示状態を切り替えるのが基本の考え方です。

高さアニメーションを滑らかにする工夫

より丁寧に作りたいなら、子要素の高さをoffsetHeightで取得し、初期状態で高さ0にしておいたコンテンツにその値を代入する手法があります。これにより、開閉に伴うスライドアニメーションが自然な動きになります。

CSSのtransitionと組み合わせることで、ふわっと開く上質な操作感が生まれます。アニメーションの表現をさらに磨きたい場合は、CSSアニメーションの基礎知識を押さえておくと応用の幅が広がります。

なお、複数項目を同時に開けるようにするか、一つ開いたら他を閉じるようにするかは、JavaScriptの条件分岐で自由にコントロールできます。FAQなら同時開閉、ナビゲーションなら単一開閉が使いやすい傾向にあります。

実装方法の選び方

ここまで複数の方法を紹介してきましたが、それぞれに向き不向きがあります。メリットとデメリットを比べてみましょう。

目安としては、シンプルなFAQならdetailsタグ、デザインにこだわりたいならCSS方式、細かい制御や滑らかなアニメーションが必要ならJavaScript方式、という選び方がおすすめです。

使いやすさを高めるための注意点

アコーディオンメニューは便利なUIですが、実装時にいくつか気をつけたいポイントがあります。

まずアクセシビリティへの配慮です。detailsタグは標準でキーボード操作に対応していますが、自作する場合はaria属性を適切に設定し、キーボードでも操作できるようにする必要があります。

次に、開閉状態がひと目でわかるアイコンを用意すること。三角形やプラスマイナスの記号が閉じているのか開いているのかを示すと、ユーザーは迷わず操作できます。

また、重要な情報を折りたたみの中に隠しすぎないことも大切です。ユーザーが開かないと見えない情報は、そもそも見てもらえない可能性があるからです。似た性質を持つモーダルウィンドウと使い分けながら、情報の見せ方を設計するとよいでしょう。

よくある質問

CSSだけとJavaScript、どちらで作るべきですか

シンプルな開閉だけならCSSやdetailsタグで十分です。一つ開くと他が閉じるといった複雑な挙動や、細かなアニメーション制御が必要な場合はJavaScriptを選びましょう。まずはCSSで試し、物足りなければJavaScriptに移行する流れが無理がありません。

detailsタグは古いブラウザでも動きますか

現在の主要ブラウザではほぼ問題なく動作します。ごく一部の古い環境を除けば実用上の心配はほとんどありません。幅広い環境を確実にサポートしたい場合のみ、JavaScriptによる代替を検討するとよいでしょう。

アニメーションがカクつくのですが原因は何ですか

heightプロパティを直接アニメーションさせると動作が重くなりがちです。max-heightを使う方法や、JavaScriptでoffsetHeightの値を代入する手法に変えると滑らかになります。transitionの秒数を短めに設定するのも効果的です。

jQueryを使った方が簡単ではないですか

slideToggleなどの便利なメソッドがあり手軽なのは確かです。ただ、近年は純粋なJavaScriptでも十分簡潔に書けるため、あえてjQueryを導入する必要性は下がっています。既存プロジェクトで使っているなら活用してもよいでしょう。jQueryのCDN読み込み方法を押さえておけば、すぐに試せます。

スマホで押しにくいのですが改善方法はありますか

クリック領域が小さいことが原因の場合が多いです。ラベルやボタンに十分なpaddingを設定し、指でタップしやすいサイズを確保しましょう。目安として高さ44ピクセル以上あると、快適に操作できるようになります。

まとめ

アコーディオンメニューは、限られたスペースを有効活用しながら情報を整理できる、Web制作に欠かせないUIです。detailsタグを使えば最短で、CSS方式ならデザイン自由度を保ちつつ、JavaScript方式なら細かな制御と滑らかな動きを実現できます。

まずは作りたいものに一番近い方法から手を動かしてみてください。実際に開閉が動いた瞬間は、きっと制作の楽しさを感じられるはずです。

アクセシビリティや情報の見せ方への配慮を忘れずに、ユーザーにとって本当に使いやすいメニューを目指していきましょう。