問題

3
HTML/CSS

CSSのみでアコーディオンを実装しよう

Webにおけるアコーディオンとは、アコーディオンメニューのことを指しており、クリックすることで隠れている詳細を展開表示させる事ができます。 jQueryでも作れますが、今回CSSで実装していきます。

HTML/CSSの問題に挑戦しよう!

問題

CSSのみでアコーディオンを実装しよう

CSSのみでアコーディオンを実装してみましょう。

また、要素をクリックするとアニメーションで
パカパカアコーディオンになるようにしましょう。

見本を参考に作成してください。

期待する画面

解答と解説(CSSのみでアコーディオンを実装しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

CSSのみでのアコーディオン実装で肝なのは
チェックボックスを使用するということです。
inputがcheckdの時にコンテンツを出すといたって単純なことをやっております。

まず、inputとlabelを連動する為にはinputのid属性とlabelのfor属性を同じ名前にします。
その際にinputのチェックボックスは、display: none;で消しときましょう。
そして、開いた時のコンテンツにはデフォルト値として
max-height: 0;とoverflow-y: hidden;を付与しておきます。

こうしておく事で、視認できなくなり要素は隠れます。

そして、セレクタを上手く使用してinputにcheckdがついたら隠しておいた要素に高さをつけ見えるようにします。アニメーションについては、隠す要素のデフォルト値にtransition: all 0.5s;などすれば、アニメーションできます。

補足

今回の問題はセレクタの指定方法が少し難しく感じたのではないかと思います。

チェックボックスを表示させているinput要素にcheckedが入ったときに
アコーディオンメニュー内のli要素を表示させるというセレクタの書き方が
少し複雑になります。
+(プラス)演算子を付けて記述しておかないと、うまく表示させることはできません。

また、animationさせる場合のtransitionはchecked内に記述してしまうと戻るときにanimationされなくなってしまうのでliタグ自体に対して付与するようにしましょう。

さらにスキルアップしたい方は公式LINEから「HTML/CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら
最大100,000円OFF 対象期間中に初めて無料相談にお申し込みされた方へ 無料相談はこちら