[CSS]デザインも美しい、アニメーションで開閉するアコーディオンを実装するチュートリアル

HTML5+CSS3を使って、ユーザビリティを考慮した省スペースで多くのコンテンツを配置するアコーディオンパネルを実装するスタイルシートを紹介します。

デモのキャプチャ

Pure CSS3 accordion
デモページ

[ad#ad-2]

画像は一切使用されていませんが、とても美しいデザインとなっています。

デモのキャプチャ

デモページのキャプチャ

Pure CSS3 accordionの実装

HTML5への対応

HTML5(section要素)を使用するので、サポートしていない古いブラウザ用に準備します。

<script>document.createElement('section');</script>

参考:HTML5 Shiv

あとは、外部スクリプト「html5.js」を記述し、IEなどの古いブラウザでもHTML5のエレメントが利用できるようにします。

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

HTML

各パネルはsection要素で管理し、バーはh2要素、コンテンツはdiv要素で実装します。

<div class="accordion">

	<section id="one">
		<h2><a href="#one">Heading 1</a></h2>
		<div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
		</div>
	</section>

	<section id="two">...</div>
	<section id="three">...</div>
</div>

CSS

section{
	display: block;
}

.accordion{
	background-color: #eee;
 	border: 1px solid #ccc;
	width: 600px;
	padding: 10px;
	margin: 50px auto;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

	-moz-box-shadow: 0 1px 0 #999;
	-webkit-box-shadow: 0 1px 0 #999;
	box-shadow: 0 1px 0 #999;
}

.accordion section{
	border-bottom: 1px solid #ccc;
	margin: 5px;

	background-color: #fff;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
		background-image: -webkit-linear-gradient(top, #fff, #eee);
		background-image:    -moz-linear-gradient(top, #fff, #eee);
		background-image:     -ms-linear-gradient(top, #fff, #eee);
		background-image:      -o-linear-gradient(top, #fff, #eee);
		background-image:         linear-gradient(top, #fff, #eee);

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.accordion h2,
 .accordion p{
	margin: 0;
}

.accordion p{
	padding: 10px;
}

.accordion h2 a{
	display: block;
	position: relative;
	font: 14px/1 'Trebuchet MS', 'Lucida Sans';
	padding: 10px;
	color: #333;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.accordion h2 a:hover{
	background: #fff;
}

.accordion h2 + div{
	height: 0;
	overflow: hidden;
	-moz-transition: height 0.3s ease-in-out;
	-webkit-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
}

.accordion :target h2 a:after{
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -3px;
	border-top: 5px solid #333;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

.accordion :target h2 + div{
	height: 100px;
}

対応ブラウザ

対応ブラウザは、「:target」をサポートしているブラウザです。

  • Firefox3
  • Chrome, Safari
  • Opera10
  • IE9

「:target」をサポートしているブラウザの詳しい情報は、下記ページを参照ください。

[ad#ad-2]

sponsors

top of page

©2018 coliss