2011年初投稿です。
本年もWeb制作に役立つのではないかと思われる情報を紹介していきますので
何卒、よろしくお願いします。
去年暮れに紹介したCSSのみでのアコーディオンUI作成方法に引き続き、
今度は（スクリプトを使用せずに）CSS3アニメーションを利用してCSSのみでタブUIを実装する方法の紹介してみます。
まずは動作サンプルから。
※動作環境はWebkitブラウザのSafariやChromeのみです！！！
CSS3 TAB
≫アンカーリンクが効いてしまって、うまく動作が見れない場合はこちらから
３つのタブボタンをクリックすることで、
その下にそれぞれのコンテンツ要素がフェードインしてきます。
内部構成について。
まずは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が必要になった際に是非。。。