タブパネルをCSSのみ(JavaScriptなし)で作成する方法についてご紹介します。
JavaScriptで作成するタブパネルもご紹介していますので、それと比較しながらご説明します。

CSSのみでタブパネルを作る方法

デモ/タブパネルとは

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

タブAの中身

タブBの中身

タブCの中身

タブパネルのメリット

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

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

タブパネルのデメリット

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

ソースコードと解説

HTML

<input id="tab-a" type="radio" 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" 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" 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">
   <div><p>タブAの中身</p></div>
</div>
<div class="tab-panel panel-b">
   <div><p>タブBの中身</p></div>
</div>
<div class="tab-panel panel-c">
   <div><p>タブCの中身</p></div>
</div>

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

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

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

CSS

/*タブを横並びに*/
.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 &gt; .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;
}

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

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

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

まとめ

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

著者のイメージ画像

BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。