cssだけで作れる!アコーディオンの実装方法
jsで当たり前のように作っていた、アコーディオンもchecked疑似クラスと~を組み合わせたセレクタを使用すれば、cssだけで作れてしまうので紹介します。
少ないcssで実装できるので、あまりchecked疑似クラスと~の組み合わせを使ったことがない人でも理解しやすいと思います。
今回実装するもの
色々なサイトのよくある質問とかで使われているコンポーネントがアコーディオンです。
質問内容が書かれたラベル部分をクリックすると、答えが出てくるような仕組みです。
サンプル
- はい!アコーディオンです。
- cssで動かしているアコーディオンです。
アコーディオン用HTMLの準備
アコーディオンはコンポーネントをひとつひとつ用意するような形でマークアップしてみました
div要素の中にチェックボックスとdl・dt・dd要素を兄弟になるように配置し、dt要素の中にlabel要素を仕込みました
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="accordion"> <input type="checkbox" id="accordion1" class="checkbox"> <dl> <dt><label for="accordion1">アコーディオンですか?</label></dt> <dd> はい!アコーディオンです。 </dd> </dl> </div> <div class="accordion"> <input type="checkbox" id="accordion2" class="checkbox"> <dl> <dt><label for="accordion2">どんなアコーディオンですか?</label></dt> <dd> cssで動かしているアコーディオンです。 </dd> </dl> </div> |
アコーディオン用のcss
cssは矢印やそのアニメーションがあるので長く感じるかも知れませんが、実際にアコーディオンを動かしている部分は、かなり少ない行数で収まります。
一つ注意点があり、「height:0」から「height:auto」とすると、高さの変化にアニメーションがつかないので、ぱきっと出てくる様になってしまいます。
ここで紹介しているものは、paddingを上下につけることでアニメーションぽくしていますが、きれいにアニメーションさせたいのであれば、heughtはautoではなく絶対値を指定する必要があります
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/*チェックボックスを消す*/ .checkbox{ display: none; } /*アコーディオンの大きさと位置調整*/ .accordion{ width: 600px; margin: 0 auto 20px; } /*アコーディオンのラベルの設定*/ .accordion dt{ background-color: #d3ffd8; } .accordion dt label{ position: relative; display: block; padding: 10px 20px; cursor: pointer; } /*ラベル内の矢印の設定*/ .accordion dt label::after{ content:''; display: block; border-left:7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #797676; position: absolute; top: 50%; right: 20px; transform: translate(0,-50%); transition:.4s .4s; } /*表示される要素の基本設定*/ .accordion dd{ height: 0; transition:.4s; overflow: hidden; padding: 0 20px; border: solid 2px transparent; } /*ラベル内の矢印のアニメーション設定*/ .checkbox:checked ~ dl dt label::after{ transform: translate(0,-50%) rotate(-180deg); } /*表示される要素のアニメーション設定*/ .checkbox:checked ~ dl dd{ height: auto; padding: 10px 20px; border: solid 2px #d3ffd8; } |
最近~とchecked疑似クラスの記事ばかり書いていて飽きてきたしネタ切れなので、当分の間他の記事を書きます。