[CSS]CSS3を使用してアコーディオンを実装するチュートリアル

IE6やFx1.5などCSS3非対応ブラウザにも配慮した、CSS3のアニメーションで開閉するアコーディオンを実装するチュートリアルをThe CSS Ninjaから紹介します。

Create the accordion effect using CSS3
デモページ

上記のキャプチャはCSS3に対応したChromeのもので、アコーディオンの開閉はスムーズなアニメーションで行われます。

CSS3非対応ブラウザでは、アニメーションのエフェクト無しで開閉します。
CSS3で使用してるものは、角丸とアニメーションの開閉です。

アコーディオンはdl要素で実装されており、下記のようなシンプルなものです。

HTML

IEに対応させるには条件付きコメントを使用して、下記のように変更します。

HTML（IE用）

また、スタイルシートもIEにはhover時のバグなどがあるため、IE用のスタイルシートを用意する必要があります。