css3のみ(JS無し)で実装する動的なタブ

備忘録, 子ネタ, 戯言

早速ですが作ったものの動画


というわけでこんな感じの物を作ってみました。
実際のサンプルはこちら

概要と対応ブラウザ

概要みたいなもの

タブにカーソルを合わせると少し光り、クリックすると中身がフェードインして切り替わります。
このサンプルで表現されているアニメーションやグラデーション、影や角丸などはすべてCSS3です。
JavascriptOFFでも同じ挙動になりますよ。

動作環境

Chrome4とSafari4での動作確認はしてあります。
Firefox3.5以上でもそれなりに動きますがアニメーションは動きません。
Firefox3.6↑だとグラデーションも有効になるように記述してあります。

詳細と実物は続きから。

ソースの説明

HTML(HTML5)

一応HTML5で書いてありますが、お好きにDivなどに変えても動きますのでそこら辺は厳密には書いていません。
使いたい状況でかき分けてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<section id="kzms2tab">
	<nav>
		<ul>
			<li><a href="#kzms2tab1">タブ1</a></li>
			<li><a href="#kzms2tab2">タブ2</a></li>
			<li><a href="#kzms2tab3">タブ3</a></li>
		</ul>
	</nav>
	<div class="kzms2bd">
		<article id="kzms2tab1">
			<p>タブ1の内容ですよ。</p>
		</article>
		<article id="kzms2tab2">
			<p>タブ2の内容ですよ。</p>
		</article>
		<article id="kzms2tab3">
			<p>タブ3の内容ですよ。</p>
		</article>
	</div>
</section>

CSS(CSS3)

CSSはかなりの量があるので分けて書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* sample source
-------------------*/
#kzms2tab ul:first-child{
	margin-bottom:-1px;
	/* タブが増えてもフレキシブルな横幅に調整 */
	display:box;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	/* for firefox */
	width:100%;
}
#kzms2tab ul:first-of-type li{
	text-align:center;
	/* タブが増えてもフレキシブルな横幅に調整 */
	box-flex:1;
	-webkit-box-flex:1;
	-moz-box-flex:1;
	-ms-box-flex:1;
}
#kzms2tab ul:first-of-type li a{
	border:1px solid;
	display:block;
	padding:5px;
	text-decoration:none;
	/* タブ部分角丸 */
	-moz-border-radius:5px 5px 0 0;
	/* Safari対応のために分けて記載 */
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
}
#kzms2tab ul:first-of-type li a:hover{
	/* hover時に光ってる様に見せる為に透過 */
	opacity:0.8;
}

まずはタブの基本設定。
上部分のタブの部分の見た目の調整を行っています。

一つ一つのタブの色などは次のソースで指定してます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* タブ1つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(1) a{
	background-color:#1a62db;
	border-color:#1f54bc;
	color:#fff;
	/* webkit用グラデーション */
	background-image:-webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#1a62db),
		color-stop(0.5,#3690f0),
		color-stop(0.5,#55a4ee),
		to(#70b6f2)
	);
	/* mozilla用グラデーション */
	background-image:-moz-linear-gradient(
		top,
		#1a62db,
		#3690f0 50%,
		#55a4ee 50%,
		#70b6f2
	);
	/* テキストシャドウ */
	text-shadow:-1px -1px 0px #1f54bc;
}
/* タブ2つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(2) a{
	background-color:#ff7d00;
	border-color:#dc6b00;
	color:#fff;
	/* webkit用グラデーション */
	background-image:-webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#ff7d00),
		color-stop(0.5,#ff7c00),
		color-stop(0.5,#ffa73d),
		to(#ffa03c)
	);
	/* mozilla用グラデーション */
	background-image:-moz-linear-gradient(
		top,
		#ff7d00,
		#ff7c00 50%,
		#ffa73d 50%,
		#ffa03c
	);
	/* テキストシャドウ */
	text-shadow:-1px -1px 0px #dc6b00;
}
/* タブ3つ目の色設定 */
#kzms2tab ul:first-of-type li:nth-of-type(3) a{
	background-color:#7dbe0a;
	border-color:#5b9400;
	color:#fff;
	/* webkit用グラデーション */
	background-image:-webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#7dbe0a),
		color-stop(0.5,#80c218),
		color-stop(0.5,#a1d54f),
		to(#a2d93f)
	);
	/* mozilla用グラデーション */
	background-image:-moz-linear-gradient(
		top,
		#7dbe0a,
		#80c218 50%,
		#a1d54f 50%,
		#a2d93f
	);
	/* テキストシャドウ */
	text-shadow:-1px -1px 0px #5b9400;
}

ここがかなり長いですね・・・CSS3のグラデーション部分でかなり長いコードとなっています。
この詳細については別の機会にまた説明したいと思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.kzms2bd{
	border:1px solid #ddd;
	/* タブ部分角丸 */
	-moz-border-radius:0 0 5px 5px;
	/* Safari対応のために分けて記載 */
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	/* タブ全体のボックスシャドウ */
	-moz-box-shadow:3px 3px 7px #999;
	-webkit-box-shadow:3px 3px 7px #999;
}
.kzms2bd article{
	display:none;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	border:1px solid;
	padding:10px;
	margin:-1px;
	height:200px;
	/* タブ部分角丸 */
	-moz-border-radius:0 0 5px 5px;
	/* Safari対応のために分けて記載 */
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
}

ここはタブ内容部分の外枠の見た目の調整。
影をつけたり、箱を作っています。

1
2
3
4
5
6
7
8
/* :targetの対象のarticle */
.kzms2bd article:target{
	display:block;
}
/* :targetの対象でないarticle */
.kzms2bd article:not(:target){
	display:none;
}

ここはセレクタについて(2/4)その2 – css3を触ってみて思った4個の利点などでも説明している、CSS3のセレクタを使って、ターゲットになっている部分となっていない部分をだし分けています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* :targetの対象のarticle */
.kzms2bd article:target{
	-webkit-animation-duration:1s;
	-webkit-transform-origin:50% 0;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name:kzms2alpha;
	opacity:1;
}
/* アニメーション用 */
@-webkit-keyframes kzms2alpha{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

ここでタブの中身がフェードインするアニメーションを追加しています。
Webkit系でないと期待した表示になりません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* タブ内容1つ目の色設定 */
.kzms2bd article:nth-of-type(1){
	background-color:#edf7ff;
	border-color:#1f54bc;
}
/* タブ内容2つ目の色設定 */
.kzms2bd article:nth-of-type(2){
	background-color:#ffeeda;
	border-color:#dc6b00;
}
/* タブ内容3つ目の色設定 */
.kzms2bd article:nth-of-type(3){
	background-color:#edffd0;
	border-color:#5b9400;
}

そして最後にタブの中身の背景色と、枠線色の設定をしています。

やってみた感想とかまとめ

  1. CSS3でもMozillaとWebkitで解釈の仕方が異なる部分がいくつかあった。
    →display:box;の部分にwidth:100%;と指定しないとMozillaだと期待しない表示になる 等
  2. セレクタだけで場合分けをするには限界がある
    →割りきってやっていたことですが、細かな状態分けはやはりJavascriptに頼らないと無理だと言うことがわかりました。(今カレントのタブを変化させられない)
  3. 楽チン・綺麗・軽い
    →地味な感想ですが、やっぱりCSS3は素敵でした

動かせるブラウザIEなどが限られている、とかはもう若干お決まりになってきたので、そこまで触れないことにします。

今回はこの辺でおしまいとさせていただきたいと思います。

7 Comments »

  1. 【Blog】css3のみ(JS無し)で実装する動的なタブ http://bit.ly/8eeWP2 #css3

    トラックバック by ずま/Zuma — 2009/12/15 火曜日 @ 18:17:00

  2. 【Blog】kzms2 – html,css,javascript » css3のみ(JS無し)で実装する動的なタブ http://bit.ly/8eeWP2 #css3

    トラックバック by ずま/Zuma — 2009/12/16 水曜日 @ 0:55:41

  3. RT @kzms2: 【Blog】kzms2 – html,css,javascript » css3のみ(JS無し)で実装する動的なタブ http://bit.ly/8eeWP2 #css3

    トラックバック by css3watcher — 2009/12/16 水曜日 @ 1:00:02

  4. CSS3ステキ:kzms2 – html,css,javascript » css3のみ(JS無し)で実装する動的なタブ > http://kzms2.com/2009/12/16/css3_tab-without_js/

    トラックバック by すくえあ — 2009/12/16 水曜日 @ 1:57:56

  5. いい! RT @skuare: CSS3ステキ:kzms2 – html,css,javascript » css3のみ(JS無し)で実装する動的なタブ > http://bit.ly/7SzzCi

    トラックバック by 川上 大 — 2009/12/16 水曜日 @ 1:59:39

  6. なんてこった! RT @DaiKawakami いい! RT @skuare: CSS3ステキ:kzms2 – html,css,javascript » css3のみ(JS無し)で実装する動的なタブ > http://bit.ly/7SzzCi

    トラックバック by 眼鏡は体の一部 — 2009/12/16 水曜日 @ 2:03:20

  7. css3のみ(JS無し)で実装する動的なタブ | kzms2 – html,css,javascript [css3][html5] http://kzms2.com/2009/12/16/css3_tab-without_js/

    トラックバック by WDScratch — 2009/12/17 木曜日 @ 9:02:57

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。