JavaScriptを使わずにHTMLとCSSだけでコンテンツの切り替えができるタブメニューを作る方法のイメージ

JavaScriptを使わずにHTMLとCSSだけでコンテンツの切り替えができるタブメニューを作る方法

  • HTML
  • CSS
  • PARTS

コピペで使えるパーツのご紹介です。
今回はJavaScriptを使わずにHTMLとCSSのみでタブメニューを作ります。

目次

実装の結果

実際のコード

<div class="tab">
  <input id="tab1" type="radio" name="tabs" class="tab__switch" checked="checked" />
  <label class="tab__label" for="tab1">タブ 1</label>
  <div class="tab__content">
      コンテンツ1
  </div>

  <input id="tab2" type="radio" name="tabs" class="tab__switch" />
  <label class="tab__label" for="tab2">タブ 2</label>
  <div class="tab__content">
      コンテンツ2
  </div>

  <input id="tab3" type="radio" name="tabs" class="tab__switch" />
  <label class="tab__label" for="tab3">タブ 3</label>
  <div class="tab__content">
      コンテンツ3
  </div>
<!-- /.tab --></div>
.tab {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  &__label {
    color: #fff;
    background: #ccc;
    margin-right: 5px;
    padding: 6px 16px;
    order:-1;
    cursor: pointer;
  }
  &__content {
    width: 100%;
    display: none;
    border: 1px solid #ccc;
    padding: 16px;
  }
  &__switch {
    display: none;
  }
  &__switch:checked+&__label {
    background: red;
  }
  &__switch:checked+&__label+&__content {
    display: block;
  }
}

Sassを使わずにCSSのみで実装する場合が以下になります。

.tab {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.tab__label {
  color: #fff;
  background: #ccc;
  margin-right: 5px;
  padding: 6px 16px;
  order:-1;
  cursor: pointer;
}

.tab__content {
  width: 100%;
  display: none;
  border: 1px solid #ccc;
  padding: 16px;
}

.tab__switch {
  display: none;
}

.tab__switch:checked + .tab__label {
  background: red;
}

.tab__switch:checked + .tab__label + .tab__content {
  display: block;
}

実装についての解説

それぞれのコードのポイントを解説します。

HTMLのポイント

HTMLは基本的に静的(画面に表示後は変化しない)言語ですが、
input要素はユーザーの入力を受け付けるため変化する要素になります。

この変化を流用するためにタブの部分をradio要素にし、
labelを紐づけることでコンテンツの切り替えができる下準備をしました。

<!-- ラジオボタンを作成しlabelと紐づけるためにidを指定しておく -->
<!-- name部分はradioボタンをグループ化することで1つだけが選択できるようにするためにどのradioも同じ名前にしておく -->
<input id="tab1" type="radio" name="tabs" class="tab__switch" checked="checked" />

<!-- このラベルをクリックすることでradioボタンのオンとオフを切り替えるために、for属性で紐づくradioのidを指定 -->
<label class="tab__label" for="tab1">タブ 1</label>

<!-- 選択しているタブに応じて表示するコンテンツ内容 -->
<div class="tab__content">
  コンテンツ1
</div>

CSSのポイント

重要となるのは隣接セレクタの+と疑似クラスセレクタである:checkedです。

これらの組み合わせでradioボタンをクリックする度に
紐づくコンテンツの動的な切り替えを再現しています。

ポイントのひとつ目は、radioボタンは切り替え機能だけを利用したいため
画面からは非表示にしていることです。

label(タブ 1やタブ 2といった部分)がそれぞれのradioに紐付いているので、
クリックすることでオンとオフを切り替える機能のみ利用することができています。

ポイントのふたつ目はコンテンツの中身についても非表示にしていることです。
そのうえでチェックがついたradioの隣のlabelの隣のコンテンツは表示するという
指定を追加することでクリックしたタブに紐づくコンテンツだけが表示する仕様を再現しました。

/* 全体を囲んでいる要素でタブの横並びのためにflexを指定
-----------------------------------------*/
.tab {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* タブ 1、タブ 2、タブ 3と表示しているlabel(タブメニュー部分)
-----------------------------------------*/
.tab__label {
  color: #fff;
  background: #ccc;
  margin-right: 5px;
  padding: 6px 16px;
  order:-1;
  cursor: pointer;
}

/* タブの中身となるコンテンツ。display: noneにして一旦画面から非表示にしている。
-----------------------------------------*/
.tab__content {
  width: 100%;
  display: none;
  border: 1px solid #ccc;
  padding: 16px;
}

/* radioボタン。あくまでも仕組みを利用するためのものなのでdisplay: noneを使って非表示にしている。
-----------------------------------------*/
.tab__switch {
  display: none;
}

/* チェックされているradioボタン の隣にある label を 赤にする という指定をしている
-----------------------------------------*/
.tab__switch:checked + .tab__label {
  background: red;
}

/* チェックされているradioボタン の隣にある label の隣にある コンテンツの中身 を表示する という指定をしている
-----------------------------------------*/
.tab__switch:checked + .tab__label + .tab__content {
  display: block;
}

最後に

HTMLとCSSに動的な要素を与えるとすれば通常はJavaScriptを利用しますが、
CSSもできることが増えてきているためかんたんな動きであれば
単体で実現できるようになってきました。

どちらがベストかは内容によると思いますが、
CSSのみで手軽に再現できますので参考になれば幸いです。

  1. SNIPPET
  2. PARTS
  3. JavaScriptを使わずにHTMLとCSSだけでコンテンツの切り替えができるタブメニューを作る方法