CSS（CSS3）のみでタブUI（ボタンアクティブ付き）を実装する方法。（Ver.2）

2011/02/07 TAGS :CSS, タブ

今年始めに紹介した、CSSのみでタブUIを作成する方法「CSS（CSS3）のみでタブUIを作ってみる。（Ver.1）」。
こちらの Ver.1 でも基本的なタブの動き（表示／非表示の切り替え）は実装できていましたが、タブボタンに対して、現在開いているアクティブ状態のボタンの見分けを付けることが実装できていなかったので、その部分を改善した、CSS（CSS3）のみでのタブUI実装方法 Ver.2 のご紹介。

まずは前回同様に動作サンプルから。
※動作推奨環境はWebkitブラウザのSafariやChromeですが、CSS3アニメーション部分を除いた、タブの基本動作はFirefox等でもご確認いただけます。

CSS3 TAB【SAMPLE 01】

≫アンカーリンクによって、うまく動作が見れない場合はこちらから（別ウィンドウで開きます）

３つのタブボタンをクリックすることで、その下にそれぞれのコンテンツ要素がフェードインします。

内部構成についてHTMLから。

前回はタブボタンは＜ul＞＜li＞～＜/li＞＜/ul＞のリストを使用し、表示／非表示を切り替えるコンテンツ部分は＜div＞で構成していましたが、今回は全てを＜dl＞を使って構成してあります。

◆HTML
<div id="tab_area">

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

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

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

</div><!--/#tab_area-->

タブボタンとそれに付随するコンテンツエリアは、それぞれ個々に＜dl＞でまとめています。

タブボタン部分は＜dt＞で、クリック後に表示するコンテンツ要素は＜dd＞としています。

タブの数だけ＜dl＞を用意し、「position:absolute」で重ね合わせ、それぞれID名を付加し、「:target」で表示／非表示などの制御をかけていきます。

CSSの記述は以下。

◆CSS
/* TabArea
-------------------------- */
#tab_area {
	margin: 0 auto;
	width: 540px;
	height: 350px;
	text-align: left;
	position: relative;
}

#tab_area dl {
	width: 540px;
	height: 340px;
	border: #777 1px solid;
	position: absolute;
}

#tab_area dl dt {
	top: 0;
	width: 180px;
	height: 40px;
	position: absolute;
	border-bottom: #777 1px solid;
	z-index: 5;
}
#tab_area dl#contents02 dt {
	border-left: #777 1px solid;
	border-right: #777 1px solid;
}


#tab_area dl#contents01 dt {left: 0;}
#tab_area dl#contents02 dt {left: 180px;}
#tab_area dl#contents03 dt {left: 360px;}

#tab_area dl dt a {
	width: 180px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: block;
}
#tab_area dl dt a:hover {background: #999;}

#tab_area dl dd {
	top: 41px;
	left: 0;
	height: 300px;
	position: absolute;
	opacity: 0;
	overflow-y: auto;
}

#tab_area dl dd p {
	padding: 10px 10px;
}

/* CSS3 TabAnimation
-------------------------- */
@-webkit-keyframes TabSwitch {
	0% {background: #fff;}
	100% {background: #777;}
}
#tab_area dl:target dt a {
	-webkit-animation-name: TabSwitch;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	color: #fff;
	font-weight: bold;
	background: #777;
}

@-webkit-keyframes ContentsSwitch {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
#tab_area dl:target dd {
	-webkit-animation-name: ContentsSwitch;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: 1;
	opacity: 1;
	z-index: 15;
}

「TabSwitch」と定義したアニメーションでは、タブクリック後のアクティブ状態にあるタブボタンに対して、背景色、ボタンテキスト装飾の変更を付けています。

そして、もう一方の「ContentsSwitch」と定義したアニメーションでは、コンテンツ部分の表示／非表示をフェードイン／アウトによって制御しています。

表示／非表示の切り替えアニメーションはフェードイン／アウトのみではなく、指定を変えることによってスライドダウン表示などにすることも可能です。

アニメーションパターンを変えたサンプルは以下。

CSS3 TAB【SAMPLE 02】

≫アンカーリンクによって、うまく動作が見れない場合はこちらから（別ウィンドウで開きます）

こちらの構成はHTMｌソースは【SAMPLE 01】と同様で、CSSのアニメーション部分のみ以下の様に変わります。

◆CSS
/* CSS3 TabAnimation
-------------------------- */
@-webkit-keyframes TabSwitch {
	0% {background: #fff;}
	100% {background: #777;}
}
#tab_area dl:target dt a {
	-webkit-animation-name: TabSwitch;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	color: #fff;
	font-weight: bold;
	background: #777;
}

@-webkit-keyframes ContentsSwitch {
	0% {height: 0;opacity: 0;}
	100% {height: 300px;opacity: 1;}
}
#tab_area dl:target dd {
	-webkit-animation-name: ContentsSwitch;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	height: 300px;
	opacity: 1;
	z-index: 15;
}

CSS3アニメーションでもjQueryと同様にさまざまなパターンの演出を加えることが可能です。

CSS3によってHTMLとCSSでの組み合わせのみでさまざまなUIの実装が可能になり、今後、JSを控えることで動作負荷の軽減などの期待が持てそうです。

CSS3のみでタブUIが必要になった際に是非。。。

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