CSSで作る。ラジオボタンを使ったタブコンテンツの作り方

1. デモ

2. 作り方

タブ切り替えボタンの設定

はじめにタブの切り替えボタンの設定をします。name="switch"で radio ボタンをグループ化していて、checkedではじめから選択されている状態にしています。id 属性と for 属性で input タグと label タグの関連づけがすんだら input タグは非表示にします。

<!--nameでグループ化して、radioボタンとlabelをidとforで関連付けさせる-->
<input type="radio" name="switch" id="tab1" checked />
<input type="radio" name="switch" id="tab2" />
<input type="radio" name="switch" id="tab3" />

<label for="tab1" class="tab_btn1">tab</label>
<label for="tab2" class="tab_btn2">tab</label>
<label for="tab3" class="tab_btn3">tab</label>
/*radioボタンの非表示*/
input[type="radio"] {
  display: none;
}

アンダーラインをタブ切り替えに合わせて移動させる

このデモでは、タブ切り替えボタンを押すとアンダーラインがタブに合わせて移動するように設定しています。この設定方法は、デモでは label タグを li タグで囲っているので、新しくアンダーライン用に li タグを用意します。

<li><label for="tab1" class="tab_btn1">tab</label></li>
<li><label for="tab2" class="tab_btn2">tab</label></li>
<li><label for="tab3" class="tab_btn3">tab</label></li>
<!--アンダーライン用に追加-->
<li class="tab_underline"></li>

アンダーライン用の CSS が下記のようになります。widthの部分はタブの数に合わせて変更していきます。calc()はプロパティの値を計算してくれるもので、ここではタブの数に合わせて「100% ÷ 3」という計算をしています。例えば、タブを 4 つにしたい場合は、「100% ÷ 4」に変更します。

/*アンダーライン用のCSS*/
.tab_underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% / 3); /*タブの数に合わせて数値を変更*/
  height: 3px;
  background: #41b6e6;
  transition: 0.2s;
}

ラジオボックスが選択されたらアンダーラインを移動させる設定が下記になります。ここでもアンダーライン用の CSS 同様、タブの数に合わせてcalc()の値を調整します。

/*:checkedするのはlabelではなくinput*/
#tab1:checked ~ .tab_btn .tab_underline {
  left: 0;
}
#tab2:checked ~ .tab_btn .tab_underline {
  left: calc(100% / 3); /*約33%左へ移動*/
  background: #ff585d;
}
#tab3:checked ~ .tab_btn .tab_underline {
  left: calc(100% / 1.5); /*約66%左へ移動*/
  background: #ffb549;
}

タブコンテンツの切り替え

このデモではタブコンテンツの切り替えを表示、非表示で行っています。

<section class="tab_content1">
  <!--タブコンテンツの中身1-->
</section>
<section class="tab_content2">
  <!--タブコンテンツの中身2-->
</section>
<section class="tab_content3">
  <!--タブコンテンツの中身3-->
</section>
/*タブボタン1が選択されているときは、タブコンテンツ2,3は非表示*/
.tab_content2,
.tab_content3 {
  display: none;
}
/*タブボタン2が選択されているときは、タブコンテンツ1,3は非表示*/
#tab2:checked ~ .tab_content2 {
  display: block;
}
#tab2:checked ~ .tab_content1,
#tab2:checked ~ .tab_content3 {
  display: none;
}
/*タブボタン3が選択されているときは、タブコンテンツ1,2は非表示*/
#tab3:checked ~ .tab_content3 {
  display: block;
}
#tab3:checked ~ .tab_content1,
#tab3:checked ~ .tab_content2 {
  display: none;
}