Webサイト上で今では頻繁に見かけるアコーディオンUI。
この動作は基本的にはJavaScriptやjQueryなどスクリプトを使って実装することになりますが、
CSS3アニメーションだとスクリプトを使わずにCSSのみでアコーディオンUIを実装することが可能になります。
今回はそんなアコーディオンUIをCSSのみで実装する方法を紹介してみます。

まずは動作サンプルから。
※動作環境はWebkitブラウザのSafariやChromeのみです!!!

CSS3 ACCORDION

アンカーリンクが効いてしまって、うまく動作が見れない場合はこちらから

各リスト(リンク)をクリックするとアコーディオン形式でコンテンツが表示されます。
クリック後、現在アクティブな状態のリストに対しては背景色等も変化させています。

内部構成について。
まずはHTMLソース。

◆HTML
<dl id="contents01">
<dt><a href="#contents01">CONTENTS【01】</a></dt>
<dd>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</dd>
</dl>

<dl id="contents02">
<dt><a href="#contents02">CONTENTS【02】</a></dt>
<dd>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</dd>
</dl>

<dl id="contents03">
<dt><a href="#contents03">CONTENTS【03】</a></dt>
<dd>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</dl>

全体は<dl>リストで構成しています。

ボタンとなる箇所は<dt>に、
アコーディオン動作で表示/非表示を切り替えるエリアは
<dd>の中に記載する要素になります。

<dl>はそれぞれ任意のIDを付け
そのIDに対してCSS3「:target」を使ってアコーディオン動作を実装します。

CSSの記述は以下。

◆CSS
/* AccordionArea
-------------------------- */
dl {
	margin: 0 auto;
	width: 500px;
	text-align: left;
	border-bottom: #fff 2px solid;
}

dl dt {
	padding: 5px 0;
	width: 495px;
	text-indent: 0.5em;
	background: #eee;
	border-left: #777 5px solid;
}
dl dt a {
	width: 100%;
	height: 100%;
	display: block;
}

dl dd {
	height: 0;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: height 1s;
}
dl dd p {
	padding: 10px 0;
}


/* CSS3 AccordionAnimation
-------------------------- */
@-webkit-keyframes ACD-Open {
	0% {height: 0;opacity: 0;}
	100% {height: 150px;opacity: 1;}
}
:target dd {
	-webkit-animation-name: ACD-Open;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	height: 150px;
	opacity: 1;
	overflow-y: auto;
}
:target dt {
	background: #ffefef;
	border-left: #ff0000 5px solid;
}
:target dt a {
	text-decoration: none;
}

「ACD-Open」と定義したアコーディオンアニメーション動作を
「:target」となった<dl>の<dd>に対して実行させている構成になっています。

アニメーション動作を実行する前は<dd>の高さを「0」に設定し非表示にして
アニメーション実行時に高さを「150px」に変化させています。
(透過度も「0」から「1」へ)

「:target」をうまく利用すると、
簡単な指定のみで一般的なWeb上のUIをCSSのみで実装させることができる
便利なものになっています。

CSS3のみでアコーディオンUIが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSS(CSS3)のみでアコーディオンUIの作成方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner