ここではCSSのみを使ったタブの作り方について見ていきます。はじめに結論からどうぞ。
ボタンで表示を切り替えてご覧ください。
See the Pen tabs02 by kenichi (@ken81) on CodePen.
HTML
<div class="tabs"> <input id="tab01" type="radio" name="tab_group" checked> <label for="tab01">タブ１</label> <input id="tab02" type="radio" name="tab_group"> <label for="tab02">タブ２</label> <input id="tab03" type="radio" name="tab_group"> <label for="tab03">タブ３</label> <div id="content01">タブ１の内容がここに入ります</div> <div id="content02">タブ２の内容がここに入ります</div> <div id="content03">タブ３の内容がここに入ります</div> </div>
CSS
.tabs {
width: 100%;
}
.tabs label{
width: calc( 100% / 3 );
color: #555;
display: block;
float: left;
text-align: center;
border-radius: 5px 5px 0 0;
}
.tabs label:hover{
cursor : pointer;
}
.tabs input{
display: none;
}
[id^="content"]{
display: none;
clear: both;
overflow: hidden;
border: 3px solid #555;
padding: .5rem;
}
#tab01:checked ~ #content01,
#tab02:checked ~ #content02,
#tab03:checked ~ #content03 {
display: block;
}
.tabs input:checked + label {
background-color: #555;
color: #fff;
}
仕組みの解説
本来、inputタグのラジオボタンとlabelタグは、「」とその項目名になります。
先ほどのタブを単なるラジオボタンにするとこんな感じです。
See the Pen tabs02 by kenichi (@ken81) on CodePen.
<input id="tab01" type="radio" name="tab_group" checked> <label for="tab01">タブ１</label>
inputタグの内、checkedと入ったものが最初にチェックされた状態になります。name="tab_group"はinput要素をグループ化するための属性です。例えば、同じページに複数のタブのグループを作りたいときは、このname属性をグループごとに異なる名前に変えます。
ここで大切なのは、inputタグにid属性を入れてlabelタグのfor属性と名前を合わせていることです。
これによって「」とその右側の項目名が関連付けられ、ではなくlabel要素をクリックしてもラジオボタンを変更することができるようになります。
タブを作るときは、をスタイルシートで非表示にして、label要素をタブの見出しに見立てます。デザインの方はお好みでアレンジしてみてください。
#tab01:checked ~ #content01,
#tab02:checked ~ #content02,
#tab03:checked ~ #content03 {
display: block;
}
今回のスタイルシートで一番の肝は上記の部分です。本来、ラジオボタンとは関係ない単なるdiv要素を「間接セレクタ」を使うことで紐づけています。これがタブの切替を可能にするポイントです。
間接セレクタについて詳しく知りたい方は、下記も参考にしてみてください。
以上がスタイルシートだけでタブを作る方法でした。
