2011年初投稿です。
本年もWeb制作に役立つのではないかと思われる情報を紹介していきますので
何卒、よろしくお願いします。

去年暮れに紹介したCSSのみでのアコーディオンUI作成方法に引き続き、
今度は(スクリプトを使用せずに)CSS3アニメーションを利用してCSSのみでタブUIを実装する方法の紹介してみます。

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

CSS3 TAB

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

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

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

◆HTML
<div id="tab_area">

<ul>
<li><a href="#contents01">CONTENTS【01】</a></li>
<li><a href="#contents02">CONTENTS【02】</a></li>
<li><a href="#contents03">CONTENTS【03】</a></li>
</ul>

<div id="switch_area">

<div id="contents01" class="switch">
<p><strong>CONTENTS【01】</strong></p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</div><!--/contents01-->

<div id="contents02" class="switch">
<p><strong>CONTENTS【02】</strong></p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</div><!--/contents02-->

<div id="contents03" class="switch">
<p><strong>CONTENTS【03】</strong></p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</div><!--/contents03-->

</div><!--/switch_area-->

</div><!--/tabarea-->

タブボタン部分は<ul>のリストで、
クリック後に表示するコンテンツ要素は通常の<div>で切り分けてあります。

リストをクリックすることで、表示コンテンツ<div>に付けているIDに対して
CSS3「:target」を使って表示/非表示を切り替えています。

「:target」となった要素に対して「表示」の指定を加える方法は今までも何度か紹介してきましたが、
今回は「非表示」の要素に対して「:not(:target)」を使って制御をかけています。

CSSの記述は以下。

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

#tab_area ul {
	width: 540px;
	height: 30px;
	border-top: #777 1px solid;
	border-right: #777 1px solid;
}

#tab_area ul li {
	width: 180px;
	display: inline;
	float: left;
}

#tab_area ul li a {
	width: 100%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	display: block;
	border-left: #777 1px solid;
	border-bottom: #777 1px solid;
}

#tab_area #switch_area {
	width: 539px;
	height: 300px;
	border-left: #777 1px solid;
	border-right: #777 1px solid;
	border-bottom: #777 1px solid;
	overflow-y: auto;
	position: relative;
	clear: both;
}

#tab_area #switch_area .switch {
	top: 0;
	left: 0;
	width: 539px;
	height: 200px;
	background: #fff;
	position: absolute;
}

#tab_area #switch_area .switch p {
	padding: 10px 10px;
}


/* CSS3 TabAnimation
-------------------------- */
@-webkit-keyframes TabSwitch {
	0% {height: 0;opacity: 0;}
	100% {height: 200px;opacity: 1;}
}

.switch:target {
	-webkit-animation-name: TabSwitch;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: 1;
	height: 200px;
	opacity: 1;
	z-index: 15;
}

/* Remove--------------------------- */
@-webkit-keyframes TabRemove {
	0% {height: 0;opacity: 0;z-index:10;}
	100% {height: 0;opacity: 0;z-index: 5;}
}

.switch:not(:target) {
	-webkit-animation-name: TabRemove;
  	-webkit-animation-duration: 1.5s;
  	-webkit-animation-iteration-count: 1;
	height: 0;
	opacity: 0;
	z-index: 5;
}

「TabSwitch」と定義したタブアニメーション(フェードイン)動作を「:target」となった<div>に対して実行させ、
「:target」となっていない<div>に対しては「:not(:target)」プロパティで「TabRemove」定義のアニメーション動作を実行させています。

タブボタンと表示コンテンツ要素を分けたことで、
アクティブ状態のタブボタンに対しての装飾が難しくなってしまい、
現状はボタンに対しては何も変化しない(←今後の課題)のでこのサンプルは Ver.1 ということで。。。
(ちょっと作りが粗いところもあったり…)

「:target」と「:not(:target)」を組み合わせることで
CSS3でまた違った演出を組み込めるようになりそうです。

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

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

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

Related Posts

Comments (1)







コメント内容

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

CSS(CSS3)のみでタブUIを作ってみる。(Ver.1)

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