CSSでアコーディオンメニューを作成する方法【初心者向け】
初心者向けにCSSでアコーディオンメニューを作成する方法について解説しています。CSSのみを使ってクリックした時に非表示にしておいたメニューを表示するようにします。label要素とcheckedの擬似クラスを使って実現します。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
CSSでアコーディオンメニューを作成する方法について解説します。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね!

どういう内容でしょうか?

CSSでアコーディオンメニューを作成する方法について詳しく説明していくね!

お願いします!
アコーディオンメニューとは
クリックすると、隠れているメニューがアコーディオンのようにビヨンと伸びて表示されるメニューを見たことがありますか?
このようなものです。
実は、このようなメニューはJQueryを使わずに、作ることができます。
アコーディオンメニューの書き方
inputのcheckboxを用いて行います。
チェックボックスをクリックされたときに、アコーディオンの内容を表示するようCSSを書いていきます。
・checkboxを普通のブロック要素のように書き換える
・チェックされた時、要素を表示するように書く
・ぬるっと動くように、transitionの値を書く
この3点を押さえておけば大丈夫です。
ここでは、要素がチェックされたあと、その後にあるの該当する全てのクラスが高さを持つことで、アコーディオンのような動きを実現します。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
実際に書いてみよう
HTML
<div class="menu"> <label for="menu_bar01">アコーディオン1</label> <input type="checkbox" id="menu_bar01" class="accordion" /> <ul id="links01"> <li><a href="">Link01</a></li> <li><a href="">Link02</a></li> <li><a href="">Link03</a></li> <li><a href="">Link04</a></li> </ul> <label for="menu_bar02">アコーディオン2</label> <input type="checkbox" id="menu_bar02" class="accordion" /> <ul id="links02"> <li><a href="">Link01</a></li> <li><a href="">Link02</a></li> <li><a href="">Link03</a></li> <li><a href="">Link04</a></li> </ul> </div>
CSS
.menu { max-width: 600px; } .menu a { display: block; padding: 15px; text-decoration: none; color: #000; } label { display: block; margin: 0 0 4px 0; padding : 15px; line-height: 1; color :#fff; background : green; cursor :pointer; } input { display: none; } .menu ul { margin: 0; padding: 0; background :#f4f4f4; list-style: none; } .menu li { height: 0; overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #menu_bar01:checked ~ #links01 li, #menu_bar02:checked ~ #links02 li { height: 54px; opacity: 1; }
この記事を監修してくれた方
和田 祥子(わださちこ) テニスと音楽とビールが好きです。 |

内容分かりやすくて良かったです!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。