【コピペOK】CSSだけでサイトのタブを切り替える方法を徹底解説

多くのWEBサイトで利用されているタブ。

少ないスペースでたくさんの情報を分かりやすく表示できる、とても便利な存在です。

カテゴリー別に情報を整理して掲載しているサイトなどで、特によく使われています。

Javascirptを利用して実装するのが一般的ですが、HTMLとCSSのみでの実装も可能です。

CSSで実装できればJavascriptよりも軽量というメリットがあるので、ぜひお試しください。

タブとは

まず、タブとはなんなのかについての解説です。アルファベットでは「tab」と表記し、「つけ札」、「ラベル」といった意味があります。

メニューが横並びになっていて、その下にコンテンツがあるというレイアウトです。メニューがクリックされると、そのボタンだけデザインが変わり、「今はこのコンテンツが表示されている」ということが、すぐに分かります。

タブのメニューがクリックされると、下のコンテンツがメニューに対応した内容に切り替わります。前述の通り、少ないスペースにたくさんの情報を掲載するときに便利です。ページ移動をしないので、読み込みに時間がかかることもありません。

クリックで内容を切り替えることによって、閲覧者が知りたい情報だけを引き出すことができるのです。

すべての情報をそのまま表示してしまうと、ページが冗長になってしまいますが、タブを使うことによって、デザインがコンパクトになります。

機能面でもデザイン面でも、非常に優れた存在です。

ただし欠点もあります。初期状態では表示されていない情報もあり、タブを切り替えないとすべての情報を見てもらえないのです。

閲覧者が、すべてのタブをクリックするとは限りません。必ず見てもらいたい情報があるときは、本当にタブを実装する必要があるかどうか、検討すべきです。

CSSのみでタブを実装する

まずはHTMLとCSSで作るタブの全コードを記載します。

以下をコピーすれば、そのままタブが実装可能です。

HTML
<div class="tab-area">
 
<input id="tab-btn1" class="tab-btn" name="tab" type="radio" checked>
<input id="tab-btn2" class="tab-btn" name="tab" type="radio">
<input id="tab-btn3" class="tab-btn" name="tab" type="radio">
<input id="tab-btn4" class="tab-btn" name="tab" type="radio">
 
<ul class="tab-list-wrap">
<li><label id="tab-list1" class="tab-list" for="tab-btn1">タブ1</label></li>
<li><label id="tab-list2" class="tab-list" for="tab-btn2">タブ2</label></li>
<li><label id="tab-list3" class="tab-list" for="tab-btn3">タブ3</label></li>
<li><label id="tab-list4" class="tab-list" for="tab-btn4">タブ4</label></li>
</ul>

<div class="tab-content-wrap">
<div id="tab-content1" class="tab-content">
<p>タブ1の内容</p>
</div>
<div id="tab-content2" class="tab-content">
<p>タブ2の内容</p>
</div>
<div id="tab-content3" class="tab-content">
<p>タブ3の内容</p>
</div>
<div id="tab-content4" class="tab-content">
<p>タブ4の内容</p>
</div>
</div>
</div>

CSS
.tab-area{
width: 400px;
margin: 0 auto;
}
.tab-btn{
display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
}
.tab-list-wrap{
padding:0; /*デフォルトの値をクリア*/
margin: 0; /*デフォルトの値をクリア*/
list-style-type:none; /*デフォルトの値をクリア*/
display:flex; /*ボタンを横並びに*/
justify-content:space-between; /*ボタンを横幅いっぱいに配置*/
}
 
.tab-list{
display:block;
width: 98px;
padding: 8px 0;
text-align:center;
border-top:1px solid #4e7bcc;
border-left:1px solid #4e7bcc;
border-right:1px solid #4e7bcc;
border-radius: 4px 4px 0 0;
background: #c5daff;
box-sizing:border-box; /*borderの値を横幅に含める*/
cursor:pointer; /*オンマウス時にカーソルを指の形に*/
}
 
#tab-btn1:checked ~ .tab-list-wrap #tab-list1,
#tab-btn2:checked ~ .tab-list-wrap #tab-list2,
#tab-btn3:checked ~ .tab-list-wrap #tab-list3,
#tab-btn4:checked ~ .tab-list-wrap #tab-list4{
background:#ffffff; /*対応するボタンにチェックが入ったときに背景を#ffffff（白）に*/
}
.tab-content{
padding:20px;
border-bottom: 1px solid #4e7bcc;
border-left: 1px solid #4e7bcc;
border-right: 1px solid #4e7bcc;
display:none; /*初期状態を非表示に*/
}
#tab-btn1:checked ~ .tab-content-wrap #tab-content1,
#tab-btn2:checked ~ .tab-content-wrap #tab-content2,
#tab-btn3:checked ~ .tab-content-wrap #tab-content3,
#tab-btn4:checked ~ .tab-content-wrap #tab-content4{
display: block;/*対応するボタンにチェックが入ったときに表示*/
}

HTMLの解説

HTMLのコードを細かく分けて解説していきます。

ボタンの記述

HTML
<input id="tab-btn1" class="tab-btn" name="tab" type="radio" checked>
<input id="tab-btn2" class="tab-btn" name="tab" type="radio">
<input id="tab-btn3" class="tab-btn" name="tab" type="radio">
<input id="tab-btn4" class="tab-btn" name="tab" type="radio">

タブを制御するボタンの部分のコードです。

表示非表示の切り替えは、ラジオボタンで行っています。「type=”radio”」を設定してください。初期状態で表示させたいボタンに「checked」を記述します。

IDはそれぞれ違う名前をつける必要があります。

ラベルの記述

HTML
<ul class="tab-list-wrap">
<li><label id="tab-list1" class="tab-list" for="tab-btn1">タブ1</label></li>
<li><label id="tab-list2" class="tab-list" for="tab-btn2">タブ2</label></li>
<li><label id="tab-list3" class="tab-list" for="tab-btn3">タブ3</label></li>
<li><label id="tab-list4" class="tab-list" for="tab-btn4">タブ4</label></li>
</ul>

ラジオボタンに対応するラベルの記述です。表示上では、この部分が実際にクリックする領域となります。

これもそれぞれ違う名前のIDをつけてください。「for」は、対応するラジオボタンのID名を記述します。

コンテンツの記述

HTML
<div class="tab-content-wrap">
<div id="tab-content1" class="tab-content">
<p>タブ1の内容</p>
</div>
<div id="tab-content2" class="tab-content">
<p>タブ2の内容</p>
</div>
<div id="tab-content3" class="tab-content">
<p>タブ3の内容</p>
</div>
<div id="tab-content4" class="tab-content">
<p>タブ4の内容</p>
</div>
</div>

内容を記述する部分です。

ボタン、ラベルと同様、それぞれ別のID名を設定してください。ボタン、ラベル、コンテンツはすべて同数である必要があります。

CSSの解説

続いてはCSSの解説です。

最初の設定

CSS
.tab-area{
width: 400px;
margin: 0 auto;
}

見やすいように、タブ全体のエリアを400ピクセルに指定して中央揃えにしました。

すでにあるページに当てはめる場合は、この設定は不要です。それぞれの環境に合わせ、適宜調整してください。

ラジオボタン

CSS
.tab-btn{
display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
}

ラジオボタンはタブの切り替えを制御する部分で、これがないとタブは動きません。

しかし、デザインの調整ができないため、見た目上は邪魔になってしまうので、非表示にします。しっかりとラベルに紐づけがされていれば、問題ありません。

ラベルのデザイン設定

CSS
.tab-list-wrap{
display:flex; /*ボタンを横並びに*/
justify-content:space-between; /*ボタンを横幅いっぱいに配置*/
padding:0; /*デフォルトの設定をクリア*/
margin: 0; /*デフォルトの設定をクリア*/
list-style-type:none; /*デフォルトの設定をクリア*/
}
.tab-list{
display:block;
width: 98px;
padding: 8px 0;
text-align:center;
border-top:1px solid #4e7bcc;
border-left:1px solid #4e7bcc;
border-right:1px solid #4e7bcc;
border-radius: 4px 4px 0 0;
background: #c5daff;
box-sizing:border-box;/*borderの値を横幅に含める*/
cursor:pointer; /*オンマウス時にカーソルを指の形に*/
}

実際にクリックするラベルの部分を、タブらしいデザインにします。

まずはラベルを囲うul「tab-list-wrap」に横並びの設定をします。リストタグのデフォルトの指定は、解除しておいてください。

それぞれのラベル「tab-list」にも、クリックするタブの設定を施していきます。labelはインライン要素なので、ブロックレベル要素にしました。

そして幅、余白、境界線、背景画像などで形を整えていきます。この設定でクリックできる領域だと一目で分かるようになりますが、そのままだと、オンマウス状態でもカーソルが変化しません。

「cursor:pointer;」でカーソルも変更して、クリックできるとさらに分かりやすくしました。

ラベルのON設定

CSS
#tab-btn1:checked ~ .tab-list-wrap #tab-list1,
#tab-btn2:checked ~ .tab-list-wrap #tab-list2,
#tab-btn3:checked ~ .tab-list-wrap #tab-list3,
#tab-btn4:checked ~ .tab-list-wrap #tab-list4{
background:#ffffff; /*対応するボタンにチェックが入ったときに背景を#ffffff（白）に*/
}

対応するラジオボタンにチェックが入った場合、ラベルの色が変わるという設定です。

「~」はチルダと読み、同じ階層の要素同士を結びつけるものです。

「#tab-btn1:checked ~ .tab-list-wrap #tab-list1」であれば、「#tab-btn1」に「checked」が入ったときの「.tab-list-wrap #tab-list1」という意味です。

IDの紐づけが間違っていると、クリックしたラベルとは違うラベルがONになってしまうので気をつけてください。

コンテンツのデザイン設定

CSS
.tab-content{
padding:20px;
border-bottom: 1px solid #4e7bcc;
border-left: 1px solid #4e7bcc;
border-right: 1px solid #4e7bcc;
display:none; /*初期状態を非表示に*/
}

余白と境界線で見やすく整えました。実際のコンテンツ部分にはさまざまな要素が入るので、それぞれのデザインに合わせ、CSSを追記してください。

ただし最後の行の「display:none;」は、常に必要です。デフォルトの状態を非表示にして、ONになったものだけ、表示させるという仕組みです。

コンテンツのON設定

CSS
#tab-btn1:checked ~ .tab-content-wrap #tab-content1,
#tab-btn2:checked ~ .tab-content-wrap #tab-content2,
#tab-btn3:checked ~ .tab-content-wrap #tab-content3,
#tab-btn4:checked ~ .tab-content-wrap #tab-content4{
display:block; /*対応するボタンにチェックが入ったときに表示*/
}

ラベルと同様、対応するラジオボタンにチェックが入ったときにコンテンツを表示させるという仕組みです。

デフォルトでは「display:none;」が設定されていますが、ONになった場合のみ、「display:block;」で表示されるようになります。

まとめ

HTMLとCSSによるタブ作成について解説しました。

非常に長いソースとなりましたが、ポイントはシンプルです。

ラジオボタンとラベル、コンテンツを紐づけるということです。チルダを理解すればすぐにできるようになるでしょう。

慣れてきたら、デザインもアレンジしてオリジナルのタブに挑戦してみてください。