【CSS】CSSだけでタブ切り替えを作る方法

はじめに

今回はCSSだけでタブ切り替えを作る方法をご紹介します。
最近はCSSの使い方次第でできることが非常に多くなっているので、タブ切り替えなどちょっと動きがあるものでもJavaScriptを使わず作ることが可能です。

今回作成していくもの

まずは、今回作成していくデモをご紹介します。

今回作成していくデモはこちらです。

See the Pen CSS tabs by Ayaka Sasaki (@ayausaspirit) on CodePen.

HTML解説

では、中身のソースコードを見て行きましょう。

まず、今回の全体のHTMLはこのようになっています。

<div class="tabs">
  <input id="all" type="radio" name="tab_item" checked>
  <label class="tab_item" for="all">総合</label>
  <input id="programming" type="radio" name="tab_item">
  <label class="tab_item" for="programming">プログラミング</label>
  <input id="design" type="radio" name="tab_item">
  <label class="tab_item" for="design">デザイン</label>
  <div class="tab_content" id="all_content">
    <div class="tab_content_description">
      <p class="c-txtsp">総合の内容がここに入ります</p>
    </div>
  </div>
  <div class="tab_content" id="programming_content">
    <div class="tab_content_description">
      <p class="c-txtsp">プログラミングの内容がここに入ります</p>
    </div>
  </div>
  <div class="tab_content" id="design_content">
    <div class="tab_content_description">
      <p class="c-txtsp">デザインの内容がここに入ります</p>
    </div>
  </div>
</div>

パーツごとに区切ってご紹介します。
タブ切り替えのタブの部分のHTML:

<input id="all" type="radio" name="tab_item" checked>
<label class="tab_item" for="all">総合</label>
<input id="programming" type="radio" name="tab_item">
<label class="tab_item" for="programming">プログラミング</label>
<input id="design" type="radio" name="tab_item">
<label class="tab_item" for="design">デザイン</label>

タブ1つのコードはこちらです。

<input id="all" type="radio" name="tab_item" checked>
<label class="tab_item" for="all">総合</label>

<input>（ラジオボタン）と <label>タグがセットで１つのタブができあがります。
<input>（ラジオボタン）に、タブの「オン／オフ」機能（そのタブが選択されているかいないか）を拾ってもらい、<label>の方でタブの見た目を整えます。

重要なところとしては、<input>のid属性と<label>のfor属性が同じだということです。for属性の中身が<input>のid属性と同じであることにより、<label>が<input>と紐づけられます。

あとは、それぞれにスタイルを当てられるようにクラスをつけておきましょう。

次に、タブ切り替えの中身の部分を見ていきます。

<div class="tab_content" id="all_content">
    総合の内容がここに入ります
</div>
<div class="tab_content" id="programming_content">
    プログラミングの内容がここに入ります
</div>
<div class="tab_content" id="design_content">
    デザインの内容がここに入ります
</div>

それぞれ<div>タグの中に入れたい内容を加えてください。
この際のポイントとしては、それぞれにスタイルが当てられるようにクラスをつけることと、それぞれユニークのid(またはクラスでもok)を振っておくことです。

このユニークのidまたはクラスは、AのラジオボタンがチェックされているときはAの内容を表示せよ、という仕組みを作成するので、ここでユニークのidを振っていないと、タブが作れなくなってしまいます。

HTMLの解説は以上です。

CSS解説

次にCSSを見ていきます。

CSSの全体像：

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 700px;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

大事なところは下記コメントをしている部分です。
– ラジオボタンを全て消す
– 選択されているタブのコンテンツのみを表示
– 選択されているタブのスタイルを変える

それでは、上から順番に解説します。
最初の.tabsの部分はタブ切り替え全体の幅を設定したり、box-shadowでシャドウを設定したりと、見た目を変えているだけなので割愛します。

次の.tab_item部分も見た目を変えているだけです。
widthでタブの幅を変更しています。今回は、「総合」、「プログラミング」、「デザイン」と３つのタブですが、４つにしたい場合はwidth: 25%;、5つにしたい場合はwidth: 20%;と必要に応じて変更してください。

次に見ていくコードはこちらです：

input[name="tab_item"] {
  display: none;
}

こちらで、タブの部分のラジオボタンを消しています、これを記述しないと、このようにラジオボタンが見えてしまい、格好悪いので消すのを忘れないようにしましょう。

今まではタブの部分の解説でしたが、これからは中身の部分を見ていきます。

.tab_contentの部分はタブ切り替えの中身のスタイルを整えているだけですので、必要に応じて書き換えてください。ただし、下記ポイントはチェックしておいてください！

display:none; を忘れた場合：

それでは、display:none;で消したしまったすべてのコンテンツの中で選択されているタブのものだけを表示する、という設定をしていきます。

#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

こちらのコード、何かをdisplay:block;で表示しています。
ここで、少し困惑するのが、「~」です。
これは、間接セレクタ（もしくは兄弟セレクタ）といい、親要素が同じになる兄弟関係の弟に適用されるセレクタです。

例えば、

HTML:

<p>aaaa</p>
<h4>bbbb</h4>
<p>cccc</p>
<p>dddd</p>

CSS:

h4 ~ p{
color: red;
}

この場合、全ての<p>と<h4>は兄弟ですが、<h4>のあとに存在する兄弟の<p>を拾ってくることができます。

See the Pen QqbMPe by Ayaka Sasaki (@ayausaspirit) on CodePen.

つまり、下記コードで選択されたラジオボタンの兄弟にあたり、かつidが該当するものだけを表示しています。

#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

最後に、選択されたタブのスタイルを変更するために、

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

上記のように設定すればokです！

まとめ

以上、今回はCSSだけでタブ切り替えを作る方法をご紹介しました。
いくつか気をつけるべきポイントはありますが、セレクタで該当するところをうまくとって来れればそこまで難しくないですし、CSSで作っているぶん、非常に軽いです。
興味がある方は試してみてください。