５歳の息子が、「中部地方」のことを「ちゅうぶちちほう」、「近畿地方」のことを「きんきちちほう」と、なぜか「ち」を一個多く発音するのが可愛すぎるので、その間違いを訂正してやらない アラフォーシンママの あき です。
今日は、CSSでアコーディオンを作るおはなし。
WEBサイトの中にある「Ｑ＆Ａ」や、スマホで表示する際のメニューなどに良く使われるアコーディオンメニュー。
アコーディオンを使って、
始めはメニューの内容を非表示にしておき、クリックされたら表示する。
という方法をとることによって、表示部分をコンパクトにしてスペースを節約できたり、すっきりして見やすいページになったりしますよね。
アコーディオンメニューというと、jQueryで作るのが簡単で一般的かと思います。
でも実は、HTMLとCSSでも実装が可能なんです！
今回は、jQueryを使わずCSSだけでアドーディオンメニューを実装する方法をご紹介します。
目次
CSSで作るアコーディオンメニューの基本的な仕組み
inputタグとlabelを使用する
HTMLでチェックボックスのlabelとinputタグを使用し、labelをクリックした時に、そのlabelに紐づいているチェックボックスのチェックを、付けたり外したりするようにします。
labelの中身には、
「最初から表示させるメニューのタイトルなど」
を指定します。
チェックボックスで表示の切り替え
labelをクリックしてチェックを付けたり外したりすることによって、隣に配置した要素の表示・非表示を切り替えます。
隣に配置する要素には、
「メニューのタイトルなどをクリックした時に展開されるメニュー」
を指定します。
隣接セレクタを使う
CSSの隣接セレクタ 「 + 」 を使うことによって、その要素のすぐ隣の要素にのみプロパティを適用させることができます。
これを利用し、
「それぞれのメニュータイトルごとに、その中身のメニューを表示させる」
という動きを実現します。
これが、CSSで作るアコーディオンメニューの仕組みです。
といっても、言葉での説明では理解しづらいと思いますので、実際のコードを見てから詳細を解説していきます。
CSSアコーディオンの動作デモ
See the Pen
CSS_accordion by akiyo (@akiyohayakawa)
on CodePen.
CSSアコーディオン 実際のコードと解説
では、実際のコードを見ていきましょう。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="accordion"> <input type="checkbox" id="check1" class="acc-hidden" /> <label for="check1" class="acc-label">メニュー１</label> <div class="acc-content"> <p>コンテンツ１</p> </div> <input type="checkbox" id="check2" class="acc-hidden" /> <label for="check2" class="acc-label">メニュー２</label> <div class="acc-content"> <p>コンテンツ２</p> </div> <input type="checkbox" id="check3" class="acc-hidden" /> <label for="check3" class="acc-label">メニュー３</label> <div class="acc-content"> <p>コンテンツ３</p> </div> </div> |
解説
サンプルコードでは、最初に表示させるメニューと、クリックすると表示されるコンテンツを各々３つずつ用意しています。
labelで指定したメニューをクリックすると、その隣のdivタグで指定したコンテンツが表示されるというものですね。
最初に書いてあるチェックボックスのinputタグは、表示の切り替えを行う仕組みのためのものです。
・input の id と、label の for の内容を同じにして紐づけておくことで、labelをクリックすればチェックボックスのチェックの付け外しをすることができます。
チェックボックスは、表示・非表示の仕組みに使うだけで画面上では見えないようにしたいため、そのことが分かりやすいように、クラス名を「acc-hidden」としました。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
* { margin: 0; padding: 0; } .accordion { width: 300px; margin: 20px auto; } .acc-hidden { display: none; } .acc-label { cursor: pointer; background: purple; color: #fff; display: block; text-align: center; padding: 10px; } .acc-content { border: 1px solid #333; text-align: center; height: 0; opacity: 0; padding: 0 10px; transition: 0.5s; visibility: hidden; } .acc-hidden:checked + .acc-label + .acc-content { height: auto; opacity: 1; padding: 10px; visibility: visible; } |
解説
まず、チェックボックスを display:none; で非表示にしておきます。
クリックした後に表示されるコンテンツである acc-content には、チェックが入っていない状態の時は非表示にしたいので、
|
1 2 |
height: 0; opacity: 0; |
|
1 |
visibility: hidden; |
と指定しています。
また、クリックした時少しスローに開くようにするためのアニメーションを
|
1 |
transition: 0.5s; |
でつけています。
そして、
|
1 |
.acc-hidden:checked + .acc-label + .acc-content |
隣接セレクタ「 + 」を使ったこの指定により、
・チェックボックスにチェックが入った状態の acc-content に対して、プロパティを指定できます。
その指定内容を、
|
1 2 3 4 |
height: auto; opacity: 1; padding: 10px; visibility: visible; |
とすることで、非表示の状態から0.5秒かけて表示されるという仕組みです。
まとめ
以上、CSSだけで作るアコーディオンメニューについてご紹介しました。
jQueryを使えば簡単に実装できるアコーディオンメニューですが、あえてCSSを工夫して作るというところが、なんだかロマンがありますよね！
CSSはとっても奥が深くて、拘ればこだわるほど沼にはまって楽しそうです。
あえてCSSをこねくり回してアコーディオンメニューを作りたい！ という方は、ぜひ参考にしてみてください。
