ラジオボタンを使ってCSSだけでタブ切り替えをする方法

概要

タブ切り替えを実装したい場合に、Javascriptを実装せずにラジオボタンを使用して実装をする方法です。

サンプル

See the Pen ラジオボタンだけでタブ切り替えをする by take it easy (@take-it-easy) on CodePen.

コーディング方法

HTML

<div class="tab-area">
  <!-- ラジオボタン（ココは非表示にする） -->
  <input type="radio" name="tab-radio" class="tab-radio" id="tab01" checked>
  <input type="radio" name="tab-radio" class="tab-radio" id="tab02">
  <input type="radio" name="tab-radio" class="tab-radio" id="tab03">
  <!-- タブメニュー -->
  <label for="tab01" class="tab-menu" id="tabMenu01">タブ1</label>
  <label for="tab02" class="tab-menu" id="tabMenu02">タブ2</label>
  <label for="tab03" class="tab-menu" id="tabMenu03">タブ3</label>
  <!-- コンテンツ -->
  <div class="tab-content-item" id="tabContent01">
    <p>タブ1のコンテンツ</p>
  </div>
  <div class="tab-content-item" id="tabContent02">
    <p>タブ2のコンテンツ</p>
  </div>
  <div class="tab-content-item" id="tabContent03">
    <p>タブ3のコンテンツ</p>
  </div>
</div>

CSS

/* タブエリア用 */
.tab-area {
  /* 背景色 */
  background-color: #fff;
  /* 影 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  /* 幅 */
  width: 90%;
  /* マージン */
  margin: 10px auto 0 auto;
}

/* ラジオボタンは非表示 */
.tab-radio {
  display: none;
}

/* タブのメニュー部分（label部分） */
.tab-menu {
  display: block;
  float: left;
  width: calc(100%/3);
  text-align: center;
  padding: 1em 0;
  background-color: rgba(0,0,0,.1);
  border-bottom: 3px solid #FF9999;
}

/* タブメニューにカーソルがある場合 */
.tab-menu:hover {
  opacity: 0.8;
}

/* コンテンツ */
.tab-content-item {
  /* コンテンツは非表示にしておく */
  display: none;
  /* パディング */
  padding: 1em 1em 0 1em;
  /* コンテンツに収まらない場合は非表示 */
  overflow: hidden;
}

/* ラジオボタンがチェックされたら、コンテンツを表示 */
#tab01:checked ~ #tabContent01,
#tab02:checked ~ #tabContent02,
#tab03:checked ~ #tabContent03{
  display: block;
}

/* ラジオボタンがチェックされたら、タブの色を変える */
#tab01:checked ~ #tabMenu01,
#tab02:checked ~ #tabMenu02,
#tab03:checked ~ #tabMenu03{
  background-color: #FF9999;
}

/* コンテンツのPタグ */
.tab-content-item p {
  padding-bottom: 1em;
}