スポンサーリンク

CSSだけでタブ切り替えをする方法

Webページを作成していて、タブ切り替えを組み込みたい時、Javascriptを実装せず、ラジオボタンを使って、CSSだけで作成をする方法です。

サンプル

タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

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>

ラジオボタンのidと、ラベルで作成するメニューのforで紐付けするところです。

CSS

.tab-area {
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  width: 90%;
  margin: 0 auto;
}

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

.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;
}

.tab-content-item p {
  padding-bottom: 1em;
}

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

どのタブが選択されたかわかりやすいように、選択されたタブの色だけ変更をするようにしています。

ラジオボタンは非表示にします。
タブで切り替えるコンテンツはデフォルトで非表示にしておき、タブが選択(ラジオボタンがチェック)されたら、コンテンツを表示します。

環境(Wordpressのテーマや、カスタムCSS)によって、marginやpaddingについては、それぞれ調整をしてください。

スポンサーリンク
レンタルサーバー
おすすめの記事