【よくある質問】アコーディオンで作ってみた【HTMLとCSSのみ】

何を作るのか

アコーディオンのサンプル

完成したもの


気をつけたところ

・important、transitionの値 ease、transformの値 rotate

今回のことで得た知識

・importantは優先順位を操作するもの

・チェックボックスのidとラベルを紐づけてラベルをクリックしたときにチェックボックスのon/offが切り替わる仕組み

ソースコード

ソースコードを見る。(Codepenで表示されます。)

デモサイト

https://temochic.com/sample/accordion-sample

https://codepen.io/deeman/pen/zWVyba

今回はなし

あとがき

今回は、アコーディオンを使用したよくある質問風なレイアウトを作成しました。

結構シンプルな構成なので、実装方法を理解して覚えて何も見ずとも組めるようになります。