×

CSS・jQueryを使って簡単にできる!3つの「タブ切り替え」実装方法

2015年12月27日 コーディング

タブ切り替え

ウェブ制作に携わっていると、サイトの同一ページ内でタブをクリックして表示を切り替える、いわゆるタブ切り替えを実装する機会があると思います。

基本的にタブ切り替えはCSSとjQueryを駆使して実装することになりますが、仕組みさえ理解すれば比較的容易に実装できます。

今回はタブ切り替えの代表的な実装の方法を紹介していきます。

タブ切り替え実装の基本的な考え方

例えば、3つのタブで切り替えをしたい場合は、まず表示させるコンテンツと切り替えのためのタブをそれぞれ3つずつHTMLで組みます。

CSSのみ、もしくはCSSとjQueryを組み合わせて、タブをクリックした際に、コンテンツ部分の要素の重なりの順番を変化させたり、要素の表示非表示を操作したりしてタブ切り替えを行います。

今回は3種類の方法で見た目・動作ともに同じになるようにタブ切り替えを実装しました。

【そのタブ切り替えを実装は本当に必要か?】
タブ切り替えを実装するコンテンツがユーザーにとって重要ならば、タブ切り替えでコンテンツを隠さずに初めから表示させておくべきです。

SEO的にも、ユーザーにとって分かりやすくするという意味でも、本当に重要なコンテンツなら表示させておきましょう。

CSSのみで実装する方法

CSSのみでタブ切り替えを実現するメリットとしては、jQuery読み込み必要がないので動作が比較的早いという点、jQueryの知識が不要でお手軽という点です。

フラグメント識別子により疑似的に切り替える

フラグメント識別子という難しい言い方ですが、簡単に言うと、ページ内リンクを設置する際に、aタグでリンク先に指定する「#id名」のことを指します。

このフラグメント識別子によるページ内リンクを利用して、タブ切り替えを疑似的に実現します。

デモページで動作を確認しましょう。

DEMO1

【HTML】

	

DEMO1

ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。 ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。
ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。 ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。
ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。 ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。

HTMLでタブを3つ、各タブに対応したコンテンツを3つそれぞれ組みます。

【CSS】


/*タブ部分*/
#demo1 .tab_area ul li{
	display:block;
	background:#dddddd;
	border-right:1px solid #ffffff;
	width: 100px;
	float:left;
	-webkit-box-sizing : border-box ;
	-moz-box-sizing : border-box ;
	box-sizing : border-box ;
}

#demo1 .tab_area ul li a{
	display:block;
	text-align:center;
	font-size:22px;
	padding: 5px;
	color:#313131;
}

#demo1 .tab_area ul li a:hover {
	background:#999999;
	color:#ffffff;
}

/*コンテンツ部分の表示領域を固定してはみ出さないようにする*/
#demo1 .content_area {
    width: 600px;
    overflow: hidden;
    height: 140px;
    font-size: 20px;
    border: 1px solid #DDDDDD;
}

/*コンテンツを1行にするために必要な幅をとる*/
#demo1 .content_area .content_area_inner {
	width:1800px;
}

/*コンテンツのスタイル設定*/
#demo1 .content_area .content_block {
	height: 140px;
	padding: 10px;
	width: 600px;
	float: left;
	-webkit-box-sizing : border-box ;
	-moz-box-sizing : border-box ;
	box-sizing : border-box ;
}

#demo1 #contents1 {
	background:#47CA40;
}

#demo1 #contents2 {
	background:#EBEF64;
}

#demo1 #contents3 {
	background:#F56B6B;
}

DEMO1では、コンテンツ表示領域を固定しています。
タブをクリックした時に、ページ内リンクを使って表示させたいコンテンツの場所にジャンプさせることで、表示が切り替わっているように見せています。
(切り替えのタイミングで表示がずれないように3つのコンテンツの高さ・幅を統一しています)

ターゲット疑似クラス(:target)とz-indexプロパティを使用する

ターゲット疑似クラスとはクリック時に、あるHTMLの要素に対してスタイルを与えるためのものです。

フラグメント識別子を使用した場合は、ページ内リンクで特定の場所に移動させていましたが、ターゲット疑似クラスでは、各コンテンツをすべて重ねて表示させ、タブクリック時に重なりの順番を変化させることでタブ切り替えを実現します。

デモページで動作を確認しましょう。

DEMO2

【HTML】

DEMO2

ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。 ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。
ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。 ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。ここはタブ2をクリックした時に表示されます。
ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。 ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。ここはタブ3をクリックした時に表示されます。

DEMOでも、基本的にはDEMO1と同様にHTMLを組みます。

【CSS】

#demo2 .tab_area ul li{
	display:block;
	float:left;
	background:#dddddd;
	width: 100px;
	border-right:1px solid #ffffff;
	-webkit-box-sizing : border-box ;
	-moz-box-sizing : border-box ;
	box-sizing : border-box ;
}

#demo2 .tab_area ul li a{
	display:block;
	text-align:center;
	font-size:22px;
	padding: 5px;
	color:#313131;
}

#demo2 .tab_area ul li a:hover {
	background:#999999;
	color:#ffffff;
}

#demo2 .content_area {
    width: 600px;
    overflow: hidden;
    height: 140px;
    font-size: 20px;
    border: 1px solid #DDDDDD;
    position: relative;
}

#demo2 .content_area .content_block {
	height: 140px;
	padding: 10px;
	width: 600px;
	-webkit-box-sizing : border-box ;
	-moz-box-sizing : border-box ;
	box-sizing : border-box ;
}

.content_block_2 {
	position:absolute;
	left:0;
	top:0;
	padding: 10px;
}

#contents2_1 {
	background:#47CA40;
	z-index:1;
}

#contents2_2 {
	background:#EBEF64;
	z-index:0;
}

#contents2_3 {
	background:#F56B6B;
	z-index:0;
}

#contents2_1:target {
	z-index:100;
}

#contents2_2:target {
	z-index:100;
}

#contents2_3:target {
	z-index:100;
}

DEMO2では、3つのコンテンツをposition:absoluteを使い、同じ場所に表示させるようにしています。

初めは緑色の背景のcontent2_1を一番上に表示させるためにz-index:1を設定します。

タブをクリックした時にCSSでターゲット疑似クラス(:target)を利用して3つのコンテンツのz-indexの値を変えることで表示の切り替えを行います。

CSSとjQueryを併用して実装する方法

CSSとjQueryを併用する方法は、仕組みが分かりやすく、より複雑なタブ切り替えに対応しうる点がメリットとして挙げられます。

仕組みとしては、タブをクリックした時に、クリックしたタブと関連づいた要素をdisplay:block(表示)の状態にして、それ以外をdisplay:none(非表示)にするという動作をjQueryで実現します。

デモページで動作を確認しましょう。

DEMO3

【HTML】

DEMO3

  • タブ1
  • タブ2
  • タブ3
ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。 ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。ここはタブ1をクリックした時に表示されます。

DEMO3でも、基本的にはDEMO1、DEMO2と同様にHTMLを組みます。

【CSS】

/*タブ部分*/
#demo3 .tab_area ul li{
	display:block;
	float:left;
	background:#dddddd;
	width: 100px;
	border-right:1px solid #ffffff;
	-webkit-box-sizing : border-box ;
	-moz-box-sizing : border-box ;
	box-sizing : border-box ;
	text-align:center;
	font-size:22px;
	padding: 5px;
	color:#313131;
}

#demo3 .tab_area ul li:hover {
	background:#999999;
	color:#ffffff;
	cursor:pointer;
}

/*コンテンツ部分の表示領域を固定してはみ出さないようにする*/
#demo3 .content_area {
    width: 600px;
    overflow: hidden;
    height: 140px;
    font-size: 20px;
    border: 1px solid #DDDDDD;
    position: relative;
}

#demo3 .content_area .content_block {
	height: 140px;
	padding: 10px;
	width: 600px;
	-webkit-box-sizing : border-box ;
	-moz-box-sizing : border-box ;
	box-sizing : border-box ;
}

.content_block_3 {
	background: #ffffff;
	padding: 10px;
}

#contents3_1 {
	background:#47CA40;
}

#contents3_2 {
	background:#EBEF64;
}

#contents3_3 {
	background:#F56B6B;
}

DEMO3では、コンテンツの表示領域だけを設定して、ブロック要素を単純に縦に並べています。

【jQuery】


タブをクリックした時に、クリックしたタブの順番を取得すると同時に、一度コンテンツ要素全てをdisplay:noneで非表示にします。
クリックしたタブの順番に対応する要素にだけdisplay:blockを適用して表示させています。

まとめ

いかがでしたか?

ウェブページ上でタブ切り替えを実装する方法は、どの方法が一番良いというのは無くて、環境や条件に最適なものを選ぶべきだと思います。

「なぜこれで正しく動作するのか」をしっかりと理解しておくことで動作を追加する、ビジュアルを変更するなどの細かいカスタマイズに対応しやすくなると思います。

個人的には、CSS+jQueryを併用したタブ切り替え実装のほうがデザイン的にも動作的にも自由度が高いという点でおすすめですね。

関連記事