アコーディオンWebサイト上で今では頻繁に見かけるアコーディオンUI。この動作は基本的にはJavaScriptやjQueryなどスクリプトを使って実装することになりますが、CSS3アニメーションだとスクリプトを使わずにCSSのみでアコーディオンUIを実装することが可能になります。今回はそんなアコーディオンUIをCSSのみで実装する方法を紹介してみます。ACCORDION≫アンカーリンクが効いてしまって、うまく動作が見れない場合はこちらから各リスト(リンク)をクリックするとアコーディオン形式でコンテンツが表示されます。クリック後、現在アクティブな状態のリストに対しては背景色等も変化させています。