切り替えタブdivボックスをCSSのみで実現！コピペで使えるHTML+CSS

divボックスに3つのタブをつけ、タブをクリックすることで、ボックスが入れ替わります。いわゆる、タブボックスです。一般的にはJavascriptやWordpressショートコードプラグインによって実現しますが、こちらではCSSのみで実現する方法をご紹介します。

JavaScriptを用いないためAMPサイトでも利用できます。

切り替えタブdivボックス
使用したCSSプロパティの解説・関連ページ

切り替えタブdivボックス

見出し1

見出し2

見出し3

見出し1の文章が入ります。見出し1をクリックすることで表示されます。初期状態でもあります。

ここには見出し2の文章が入ります。AMPではimgタグが正常に表示されないことがあります。

ここには見出し3の文章が入ります。見出し3の文章をここに記載すればよいわけです

仕組み

toggle2が関連付けられたlabelを持つ、見出し2をクリックすると、toggle2のidを持つinputのチェックが入ります。そうすると、クラス名input2の状態がチェックされたことになります。結果として、input2:checkedに関連するCSSが反映され、box1とbox3がdisplay: none;となり、box2が表示されます。見出し3をクリックすれば、ラジオボタンの性質から見出し2に関連するinputのチェックが外れ、同じ仕組みによってbox3が表示されます。複数のinput操作をする上でのコツはinputのtypeとしてラジオボタンを使用することです。

スタイルシートで記述

<div> /* WordPressの場合は、<div>で囲んでください*/
<input id="toggle1" class="input1" name="in-box" type="radio" />
<input id="toggle2" class="input2" name="in-box" type="radio" />
<input id="toggle3" class="input3" name="in-box" type="radio" />
<div id="tab-box">
  <div class="tab1"><label for="toggle1">見出し1</label></div>
  <div class="tab2"><label for="toggle2">見出し2</label></div>
  <div class="tab3"><label for="toggle3">見出し3</label></div>
  <div class="box1">見出し1の文章が入ります。見出し1をクリックすることで表示されます。初期状態でもあります。</div>
  <div class="box2"><img style="width: 120px; float: left;" src="pic01.jpg" />ここには見出し2の文章が入ります。画像やリストなどのあらゆる要素を入れることができます。</div>
  <div class="box3">ここには見出し3の文章が入ります。見出し3の文章をここに記載すればよいわけです</div>
</div>
</div> /* WordPressで<div>で囲んだ場合に閉じます*/

input{ /* input(ラジオボタン)は表示しません。表示しないのであって動作はしています */
 display: none;
}
#tab-box label{
  cursor: pointer;
}
#tab-box{
  max-width:600px;
  min-width:250px;
  margin: 0px;
  font-size: 0; /* divについて余白を表示させないためにfont-size:0を設定するテクニックです */
  position: relative;
}
#tab-box .tab1,.tab2,.tab3{
  display: inline-block; /* inline-blockによって横並びになります */
  width: 80px;
  margin:0px;
  border-radius: 4px 4px 0px 0px;
  padding-top:3px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}
#tab-box .tab1{
  margin-left:10px;
  background-color: #4d4a46;
}
#tab-box .tab2{
  background-color: #dd5656;
}
#tab-box .tab3{
  background-color: #2f7cbf;
}
#tab-box .box1,.box2,.box3{
  border:5px solid #4d4a46;
  border-radius:7px 7px 7px 7px;
  height:150px;
  padding:5px;
  font-size: 16px;
}
#tab-box .box1{ /* 初期状態はbox1を表示します */
  color:#4d4a46;
  border:5px solid #4d4a46;
}
#tab-box .box2{
  display: none;
  color:#dd5656;
  border:5px solid #dd5656;
}
#tab-box .box3{
  display: none;
  color:#2f7cbf;
  border:5px solid #2f7cbf;
}
.input1:checked ~ #tab-box .box1 { /* input1がチェックされた場合の処理 box1を表示します */
  display: block;
}
.input1:checked ~ #tab-box .box2, #tab-box .box3{/* input1がチェックされた場合の処理 box2とbox3を非表示 */
  display: none;
}
.input2:checked ~ #tab-box .box1 ,#tab-box .box3{/* input2がチェックされた場合の処理 box1とbox3を非表示 */
  display: none;
}
.input2:checked ~ #tab-box .box2 { /* input2がチェックされた場合の処理 box2を表示します */
  display: block;
}
.input3:checked ~ #tab-box .box1,#tab-box .box2 {/* input3がチェックされた場合の処理 box1とbox2を非表示 */
  display: none;
}
.input3:checked ~ #tab-box .box3 { /* input3がチェックされた場合の処理 box3を表示します */
  display: block;
}