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

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

CSS3 TAB【SAMPLE 01】

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

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

内部構成について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】

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

こちらの構成はHTMlソースは【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が必要になった際に是非。。。

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

SHARE

Comments (8)

  • はる | 2011.10.04 0:42

    すごく勉強になりました。
    ところで,このページを最初に開いたときに,自動的にコンテンツ1の内容を表示している仕様にするには
    どうしたらよいでしょうか?ご教示願います。

  • BlackFlag | 2011.10.05 0:17

    コメントありがとうございます。

    このサンプルで、CSSをちょっと変えて
    ページを開いたときにコンテンツの内容を展開するのは
    少々厳しいかもしれません。

    どこかの別ページからリンクしてくるページの場合は
    リンク先URLの最後に「#contents01」をつけて
    【例】——————————————————————-
    https://black-flag.net/devel/CSS3_Tab_v02/index_blank01.html#contents01
    ————————————————————————-
    といったURLにすることで実現することができます。

    もしくはJavaScriptを使って一つ目のタブをクリックさせる方法もありますが
    CSSのみで実現、ということではなくなってしまいます。

    今度、CSS3のみで一つ目のコンテンツが展開されたパターンの
    タブUIを作ってみますね。

  • 一時保管 | Annotary | 2013.07.23 16:00

    […] black-flag.net tesshow hanamura 0 minutes ago Sort […]

  • すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ | コムテブログ | 2014.11.01 13:01

    […] CSS(CSS3)のみでタブUI(ボタンアクティブ付き)を実装する方法。(Ver.2) | BlackFlag […]

  • maki | 2015.04.16 11:45

    質問させてください。
    ver1のようにulで組んだ場合はボタンアクティブはできないのでしょうか?
    サイドバーにボタンアクティブを実装したいと考えています。

  • BlackFlag | 2015.04.18 21:01

    >makiさん
    コメントありがとうございます。

    ver1の構成ではCSSのみで実装する場合、
    ボタンアクティブを実装するのは厳しいかと思っております。
    (スクリプトと併せて実装すれば可能ですが・・・)

    よろしくお願いします。

  • miya | 2015.10.21 11:04

    すごく勉強になりました。ありがとうございます。

    質問ですが、こちらではブラウザのどの位置にタブ置いてクリックしてもページが動かずその場でタブが切り替わりますが、
    実際にサンプルコードを頂いて実装してみますとページ内リンクとしてでブラウザ内上部にタブが飛んで切り替わってしまいます。

    どのように記述すればこちらのように動かずタブが切り替わるのでしょうか?

  • BlackFlag | 2015.10.24 22:52

    >miyaさん
    コメントありがとうございます。

    実際に実装されているページを確認できないと何とも言えないのですが
    タブ切り替えの際に「#」を使用しているので
    アンカーリンクとして動いている可能性がありますので
    スクリプト制御にてスクロール位置が変化しないように
    指定する構成になるかと想定しております。

    お試しください。
    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して