CSSのみでタブ切り替えを実装する

jQueryなどは使わずにCSSだけでタブの切り替えを実装する方法を紹介します。今回はラジオボタンと「:checked」疑似クラスを利用して簡易的なタブ切り替えのコンテンツを作っていきます。

タブ切り替えの作り方

まずは、HTMLでタブコンテンツの枠組みを作っていきます。

<div id="tab-area">
  <input type="radio" id="tab1" name="tab" checked />
  <label for="tab1">タブ1</label>
  <input type="radio" id="tab2" name="tab" />
  <label for="tab2">タブ2</label>
  <input type="radio" id="tab3" name="tab" />
  <label for="tab3">タブ3</label>
  <div class="tab-box">
    <div id="tab-content1">コンテンツ1の内容</div>
    <div id="tab-content2">コンテンツ2の内容</div>
    <div id="tab-content3">コンテンツ3の内容</div>
  </div>
</div>

タブとなる部分はlabel要素を使って表示させます。そして、それぞれのinput要素のid属性とlabel要素のfor属性の名前を一致させます。

続いて、CSSでタブ切り替えの動きをつけていきます。

#tab-area input[type="radio"] {
  display: none;
}
#tab-area .tab-box div {
  height: 0;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s;
}
#tab1:checked ~ .tab-box #tab-content1,
#tab2:checked ~ .tab-box #tab-content2,
#tab3:checked ~ .tab-box #tab-content3 {
  height: auto;
  opacity: 1;
  padding: 10px;
}

タブやコンテンツ部分の体裁は自由に作ってもらえば良いので、ここでは省略します。タブ切り替えの部分だけ見ていくと、まずデフォルトのラジオボタンは非表示にしておきます。そして、コンテンツ部分は「height: 0;」にして見えないようにしておきます。「display: none;」としても構いません。今回は、「opacity」を使ってアニメーションをつけたいのでheight要素を採用しています。最後に「:checked」疑似クラスでコンテンツを表示させます。この場合、チルダ（~）を使ってcheckedが付いた要素と同階層にある要素を表示するという指定をしています。

以上が、CSSのみでタブ切り替えを実装する方法となります。