HTMLとCSSのみでWebサイト用のタブ切り替え（タブパネル作成）

デモ／タブパネルとは

タブパネルは、次のデモのようにタブで中身を切り替えられるユーザーインタフェースのことです。

タブパネルのメリット

タブパネルのメリットは、ユーザーが同じ位置で中身を切り替えて見ることができるという点です。例えばコンテンツA、コンテンツB、コンテンツCをそれぞれ縦に並べると、見比べるときには、上下に移動しなければなりませんが、タブパネルの場合、移動が必要なくなります。

直感的にわかりやすいというのもあるのと、リンクでページを切り替える場合に比べると、表示の切り替わりが早いというのもあります。

タブパネルのデメリット

選択されているタブ以外は、CSSのdisplay: noneで非表示にしますので、デフォルトで非表示になっているコンテンツは、GoogleがSEO上評価してくれないというリスクがあります。

ソースコードと解説

HTML

<input id="tab-a" type="radio" role="tab" name="tab-radio" class="tab-input" value="usage" checked="">
<h2 class="tab-label-heading selected"><label class="tab-label" for="tab-a">タブA</label></h2>
<input id="tab-b" type="radio" role="tab" name="tab-radio" class="tab-input" value="type">
<h2 class="tab-label-heading"><label class="tab-label" for="tab-b">タブB</label></h2>
<input id="tab-c" type="radio" role="tab" name="tab-radio" class="tab-input" value="maker">
<h2 class="tab-label-heading"><label class="tab-label" for="tab-c">タブC</label></h2>
<div class="tab-panel panel-a" role="tabpanel">
   <div><p>タブAの中身</p></div>
</div>
<div class="tab-panel panel-b" role="tabpanel">
   <div><p>タブBの中身</p></div>
</div>
<div class="tab-panel panel-c" role="tabpanel">
   <div><p>タブCの中身</p></div>
</div>

選択されたタブかどうかの判断のためにラジオボタンを用いています。これはHTMLの意味論としても正しい使い方になるので、JavaScriptで実装する場合にも同様にラジオボタンを用いるのが適切だと考えています。

role="tab"やrole="tabpanel"というのは、アクセシビリティのためのWAI-ARIAで定められている仕様で、タブであることを支援技術に伝えることができます。本来はrole="tab"が付けられた要素は、role="tablist"が付けられたdiv要素で囲うべきなのですが、このCSSを用いた実装だとそれができません。その意味で、できればJavaScriptも少し用いることになる方法を推奨します。

タブに見出し要素を用いているのも、文書構造への配慮です。タブパネルの中に見出しを入れるという実装も見かけることがありますが、タブ部分と同じ文言を書くことになり冗長になるので、このようにタブに見出し要素を使った方がシンプルになると思います。

タブパネル部分は、div要素を３つ並べて、選択されたパネルだけをCSSで表示します。

CSS

<style>
/*タブを横並びに*/
.tab-label {
   display: block;
   float: left;
}
.tab-label-heading:not(:last-of-type) .tab-label{
   margin-right: 2px!important;
}
/*ラジオボタンを全て非表示に*/
input[name="tab-radio"] {
   display: none;
}
.tab-label{
   background-color: #b4bdbf!important;
   color: #525252!important;
   cursor: pointer!important;
   font-size: 16px!important;
   padding: 10px 20px!important;
   transition: .3s;
}
.tab-label:hover{
   opacity: .7!important;
}
/* 選択されたタブの見た目 */
input:checked + h2 > .tab-label{
   color: #000!important;
   background-color: #e2e8eb!important;
   transition: .3s;
}
.tab-panel{
   background-color: #e2e8eb;
   height: 170px;
   clear: both;
   display: none; /*パネルを非表示*/
}
/* 選択されているチェックボックスに応じてパネルを表示 */
#tab-a:checked ~ .panel-a,
#tab-b:checked ~ .panel-b,
#tab-c:checked ~ .panel-c{
   display: block;
}
.tab-panel&gt;div{
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
}
</style>

選択されたラジオボタンについて、CSSの疑似要素でinput: checkedと特定できますので、それを用いて選択されたタブの見た目と、選択されたタブに応じたパネルの表示／非表示の切り替えを行っています。

+は隣接する次の要素を、~は、その要素に後続する同じ階層の要素を取得することができます。

JavaScriptの実装と比較したときのデメリットは、ラジオボタンとタブパネルを同階層に配置しなければならないので、HTMLの構造の制約が大きいということです。タブをdiv要素などで囲うことができないですし、タブパネルも同様に、div要素などで囲うことができません。
そのため、表現したい見た目などによっては、CSSのみだと無理になる場合もあると思います。その場合はJavaScriptで実装する方法を参考にしていただければと思います。JavaScriptへの抵抗が強い方向けにこの記事は書いていますが、クリアすべき点はクリックしたときの挙動だけですので、JavaScriptを使ったところでCSSのみと比べてたいしてスピードが落ちることはないと思います。JavaScriptが分かる方は、無理にCSSだけで実装する必要性はないと思います。

まとめ

できるだけHTMLの仕様に基づいて、JavaScriptを使ってタブパネルを作る方法をご説明しました。JavaScriptはクリックしたときの動作のためだけに用いていて、ほとんどはCSSで実現している形です。CSSだけで実装することも実はできるので、次にご紹介します。