WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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

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

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

CSS3 TAB

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

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

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

[html]
◆HTML

CONTENTS【01】

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

CONTENTS【02】

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

CONTENTS【03】

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。


[/html]

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

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

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

CSSの記述は以下。

[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;
}
[/css]

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

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

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

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

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

CSS(CSS3)のみでタブUIを作ってみる。(Ver.1)」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です