CSS

CSSのみでタブを作る方法

ここではCSSのみを使ったタブの作り方について見ていきます。はじめに結論からどうぞ。

ボタンで表示を切り替えてご覧ください。

See the Pen tabs02 by kenichi (@ken81) on CodePen.

HTML

<div class="tabs">

  <input id="tab01" type="radio" name="tab_group" checked>
  <label for="tab01">タブ1</label>

  <input id="tab02" type="radio" name="tab_group">
  <label for="tab02">タブ2</label>

  <input id="tab03" type="radio" name="tab_group">
  <label for="tab03">タブ3</label>
  
  <div id="content01">タブ1の内容がここに入ります</div>
  <div id="content02">タブ2の内容がここに入ります</div>
  <div id="content03">タブ3の内容がここに入ります</div>
</div>

CSS

.tabs {
  width: 100%;
}
.tabs label{
  width: calc( 100% / 3 );
  color: #555;
  display: block;
  float: left;
  text-align: center;
  border-radius: 5px 5px 0 0;  
}
.tabs label:hover{
  cursor : pointer;
}
.tabs input{
  display: none;
}
[id^="content"]{
  display: none;
  clear: both;
  overflow: hidden;
  border: 3px solid #555;
  padding: .5rem;
}
#tab01:checked ~ #content01,
#tab02:checked ~ #content02,
#tab03:checked ~ #content03 {
  display: block;
}
.tabs input:checked + label {
  background-color: #555;
  color: #fff;
}

仕組みの解説

本来、inputタグのラジオボタンとlabelタグは、「」とその項目名になります。
先ほどのタブを単なるラジオボタンにするとこんな感じです。

See the Pen tabs02 by kenichi (@ken81) on CodePen.

<input id="tab01" type="radio" name="tab_group" checked>
<label for="tab01">タブ1</label>

inputタグの内、checkedと入ったものが最初にチェックされた状態になります。name="tab_group"はinput要素をグループ化するための属性です。例えば、同じページに複数のタブのグループを作りたいときは、このname属性をグループごとに異なる名前に変えます。

ここで大切なのは、inputタグにid属性を入れてlabelタグのfor属性と名前を合わせていることです。

これによって「」とその右側の項目名が関連付けられ、ではなくlabel要素をクリックしてもラジオボタンを変更することができるようになります。

タブを作るときは、をスタイルシートで非表示にして、label要素をタブの見出しに見立てます。デザインの方はお好みでアレンジしてみてください。

#tab01:checked ~ #content01,
#tab02:checked ~ #content02,
#tab03:checked ~ #content03 {
  display: block;
}

今回のスタイルシートで一番の肝は上記の部分です。本来、ラジオボタンとは関係ない単なるdiv要素を「間接セレクタ」を使うことで紐づけています。これがタブの切替を可能にするポイントです。

間接セレクタについて詳しく知りたい方は、下記も参考にしてみてください。

以上がスタイルシートだけでタブを作る方法でした。

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP