[CSS]レスポンシブ対応、高さ可変のアコーディオンをピュアCSSで実装するテクニック
Post on:2016年11月7日
sponsors
パネル全体の高さは可変、幅はレスポンシブ対応、各アイテムの中身は少なかったり多かったり、開閉はアニメーション、そんなアコーディオンをピュアCSSで実装するテクニックを紹介します。
異なる高さにアニメーションを適用するために「height」ではなく「max-height」を使用するアイデアがすごいです。
アコーディオンのデモ
ピュアCSSのアコーディオンはたまに見かけますが、レスポンシブ対応でアニメーションを伴ったものは初めて見かけました。
実際の動作は、下記ページでご覧ください。
アコーディオンの実装
HTML
各パネルはラジオボタン・ラベル・テキストで構成されています。
下記のコードは2つ分ですが、実際のデモでは5つのパネルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="block"> <div> <input type="radio" name="item" id="item-one" checked hidden /> <label for="item-one">ラベル 1</label> <div> <p>テキスト</p> </div> </div> <div> <input type="radio" name="item" id="item-two" hidden /> <label for="item-two">ラベル 2</label> <div> <p>テキスト</p> </div> </div> ... ... ... </div> |
CSS
実装のポイントは「height」の代わりに、アコーディオンパネルの「max-height」を設定することです。CodePenのページでは、SCSSの変数でアコーディオンの数・サイズ・カラーなどを簡単に変更できます。
|
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
* { box-sizing: border-box; } .block > div{ margin: 0; padding: 0; } .block { max-width: 400px; width: 100%; height: 100%; float: left; padding: 15px; z-index: 10; background-color: white; overflow: hidden; } @media screen and (max-width: 599px) { .block { max-width: 100%; } } .block > div { display: block; position: relative; padding: 0 0 0 35px; border-bottom: 1px solid white; background-color: #e6e6e6; color: black; } .block > div:nth-child(1):before { content: "1"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div:nth-child(2):before { content: "2"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div:nth-child(3):before { content: "3"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div:nth-child(4):before { content: "4"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div:nth-child(5):before { content: "5"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div input + label { cursor: pointer; display: block; padding: 7.5px 15px; background-color: #a2c0c6; -webkit-transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s; transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s; color: black; } .block > div input ~ div { visibility: hidden; max-height: 0; padding: 0; opacity: 0; -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s; transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s; } .block > div input ~ div p { padding: 0 15px; } .block > div input:checked + label { background-color: #739fa8; -webkit-transition: background-color 0s ease-in-out 0s; transition: background-color 0s ease-in-out 0s; color: black; } .block > div input:checked ~ div { display: block; opacity: 1; visibility: visible; max-height: 200px; padding: 15px 0; -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s; transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s; } |
sponsors
