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

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

Create the accordion effect using CSS3
デモページ

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

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

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

HTML

<dl>
<dt><a href="#Section1">Section 1</a></dt>
<dd id="Section1">


			Lorem ipsum dolor sit amet...
		
</dd>
<dt><a href="#Section2">Section 2</a></dt>
<dd id="Section2">


			Lorem ipsum dolor sit amet...
	</dd>

	...
</dl>

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

HTML（IE用）

<dl>
	<!--[if IE]>
		<a href="#Section1" class="ie">
<div>
	<![endif]-->
<dt>
		<!--[if !IE]>-->
			<a href="#Section1">
				<!--<![endif]-->Section 1<!--[if !IE]>-->
			</a>
		<!--<![endif]-->
	</dt>
<dd id="Section1">


			Lorem ipsum dolor sit amet...
		
</dd>

	<!--[if IE]>
		</div>

</a>
	<![endif]-->
	...
</dl>

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

Post on:2010年2月5日