こんにちは(・∀・) CSS3のAnimationやtransitionといったプロパティのおかげでJavaScriptを使わなくても動きのあるWebサイトが作れるようになってきました。そこで今回はCSSだけで作る、サイズが可変してスマホにも対応したアコーディオンをご紹介します。 Contents チェックボックスでアコーディオン ラジオボタンでアコーディオン チェックボックスを使ったアコーディオンとラジオボタンを使ったアコーディオンの2種類です。それぞれの特質にあわせた形でアコーディオンが展開されます。チェックボックスを使ったアコーディオンはその性質上、ボタンを選択(クリック)したら選択した分すべて展開しますが、ラジオボタンのアコーディオンはnameでグループになっているので選択(クリック)した分だけ展開します。また、最初から展開している状態で表示したい場合はinput要素にchecke
![【Labs】CSSだけでサイズ可変・スマホ対応のアコーディオン](https://cdn-ak-scissors.b.st-hatena.com/image/square/929965b64f864995cb4c462a2e83a9327994c4da/height=288;version=1;width=512/https%3A%2F%2Fwww.webdlab.com%2Fcommon%2Fimg%2Fogp-img.png)