初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：短編集
2章：診断系コンテンツ
3章：製品抽出系コンテンツ
番外：Simulation Game

タブメニュー(4)

概要

タブに合わせて背景色を変更する

前回のタブメニューに少しjQueryを追加するだけで、タブメニューの背景色に合わせてコンテンツエリアの背景色を変更するタブメニューが作成できます。色を変更することで視認性が高まり、どのコンテンツが表示されているか分かりやすくなります。

解説

htmlとcssの確認

まずはhtmlを確認します。サンプル（tab4/01.html）のソースを開いて、タブの部分にclass属性が設定されていることを確認して下さい。htmlの変更点はコレだけです。 

<li class="yellow" id="tab_1">tab_1</li>
<li class="pink" id="tab_2">tab_2</li>
<li class="blue" id="tab_3">tab_3</li>

cssは多少変更されていますが、確認すべきは以下の部分だけです。上記htmlに追加したclass属性の設定で、背景色を設定しています。 

.yellow{
	background-color:#ffd;
}
.pink{
	background-color:#fdf;	
}
.blue{
	background-color:#dff;	
}

このサンプルでは前回のjQueryから変更されていないため、タブやコンテンツは切り替わりますが、コンテンツエリアの背景色は変わりません。次項ではjQueryを追加してコンテンツエリアの背景色をタブの色に合わせて変更するようにします。

タブの色を取得、コンテンツの色を設定

サンプル（tab4/02.html）を開いてタブをクリックし、コンテンツエリアの色が変わることを確認して下さい。jQueryを2行追加するだけで、このように変更できます。ソースを開いてjQueryのクリック処理に以下の2行が追加されていることを確認して下さい。 

var myColor = $(this).css("background-color");
$("#textArea").css("background-color", myColor);

まず1行目で、クリックされたタブ（this）の背景色をcssメソッドで取得して変数「myColor」に代入します。そして2行目でコンテンツエリアにcssメソッドを利用して背景色をmyColorに設定しています。

前回までのサンプルであれば、タブの下ボーダーを削除した方がデザイン的に良かったのですが、今回の場合は少し違和感があります。左図のように選択されている部分では下ボーダーが無いほうがよいのは共通ですが、それ以外の色の違うタブの部分はボーダーがあった方が良いと思います。

ですので次項では選択されていないタブの下ボーダーを表示するようにしたいと思います。jQueryの変更はなくcss設定だけで対応できます。

ボーダーの設定

当初この問題は簡単に解決できると思ったのですが、思ったようには解決できませんでした。備忘録として、まずは失敗例を紹介します。サンプル（tab4/03.html）のソースを開いてjQueryに変更がないことを確認して下さい。変更したのはcss設定だけで、以下の様に「ul li」の設定と「ul li.selected」の設定を変更しています。

まず「ul li」の設定を変更して、下ボーダーも表示するようにしました。 

ul li {
	float: left;
	padding:5px 15px 5px 15px;
	border: 1px #ddd solid;			
	color: #999;
	height:15px;
	line-height:15px;
	margin: 5px 0px 0px 5px;
}

そして選択されたタブだけ下ボーダーを表示しないように0pxでnoneの設定にしました。 

ul li.selected {
	color: #000;
	height:20px;
	line-height:20px;
	margin: 0px 0px 0px 5px;			
	border-bottom:0px none;
}

しかしこの方法では一部のブラウザ（主にMacのブラウザ）で下ボーダーを消すことができません。なので発想を転換して選択されたタブの下ボーダーの色を背景色と同じにするようにしました。サンプル（tab4/04.html）のソースを開いてhtmlとjQueryに変更がないことを確認して下さい（Macのブラウザでも問題ないはずです）。

変更したのはcss設定だけで、まずサンプル（tab4/03.html）で「ul li.selected」に追加した下ボーダーを消す処理は機能しないので削除しました。その代わり、以下の様なcss設定を追加しています。 

ul li.yellow.selected{
	border-bottom: 1px #ffd solid;
}
ul li.pink.selected{
	border-bottom: 1px #fdf solid;
}
ul li.blue.selected{
	border-bottom: 1px #dff solid;
}

つまり各タブ毎に、選択されたら下ボーダーを背景色と同じにしています。これで完成です。

マウスカーソルの設定、そして完成

最後に（正直にいうと設定を忘れていました...）cssでタブがクリックできることを示すようにカーソルを変更するようにしましょう。サンプル（tab4/05.html）のソースを開いてhtmlとjQueryに変更がないことを確認して下さい。変更したのは以下のcssの設定だけです。 

ul li {
	float: left;
	padding:5px 15px 5px 15px;
	border: 1px #ddd solid;
	color: #999;
	height:15px;
	line-height:15px;
	margin: 5px 0px 0px 5px;
	cursor:pointer;
}
ul li.selected {
	color: #000;
	height:20px;
	line-height:20px;
	margin: 0px 0px 0px 5px;
	cursor:default;
}

タブはli要素で作成されているので、li要素の設定でcssのcursor属性をpointer（指カーソル）にしています。選択されたタブはクリックしても何も変化しない（クリックしても意味が無い）ので、カーソルを矢印（default）に戻します。これで完成です。

今回でタブメニューに関する説明は全て終了ですが、タブメニューを実現する「考え方」は他にもあります。簡単に説明すると「選択された要素を記憶し、次回クリックされた際に、その情報を基に選択を解除する」という考え方です。難易度は上がるのですが、興味のある方は2章の「診断系コンテンツ：選択肢の作成(1)」で説明しているので確認してみて下さい。

次回からは新着情報などで利用できる、カテゴリ切替について説明していきます。