ここではCSSのみを使ったタブの作り方について見ていきます。はじめに結論からどうぞ。
ボタンで表示を切り替えてご覧ください。
HTML
<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> |
CSS
border-radius: 5px 5px 0 0; |
#tab01:checked ~ #content01, |
#tab02:checked ~ #content02, |
#tab03:checked ~ #content03 { |
.tabs input:checked + label { |
仕組みの解説
本来、inputタグのラジオボタンとlabelタグは、「」とその項目名になります。
先ほどのタブを単なるラジオボタンにするとこんな感じです。
<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 { |
今回のスタイルシートで一番の肝は上記の部分です。本来、ラジオボタンとは関係ない単なるdiv要素を「間接セレクタ」を使うことで紐づけています。これがタブの切替を可能にするポイントです。
間接セレクタについて詳しく知りたい方は、下記も参考にしてみてください。
2018.05.15ここでは、普段あまり使わないけど、知っておくととても便利なセレクタの記載方法についてお話します。
間接セレクタ要素1 ~ 要素2
間接セレクタは、「要素1」のあとに出現する「要素2」に対してデザインを適用させるセレクタです。このセレクタの適用範囲は、同...
以上がスタイルシートだけでタブを作る方法でした。
