CSS3タブパネル

このサイトのサンプルを自分で理解しやすいように成形した健忘ページ。 タブパネルのデザイン見本は、こちらへ

タブパネル

基本骨格

タブの数だけradioボタンを用意して、1つはcheckedを付けておく。

タブボタンをdisplay:table（IE8以下未対応）で適当に並べ、そこにlabelを配置してラジオボタンと関連付けておく。コンテンツもsectionで区切って羅列しておく。

タブボタンをクリックするとラジオボタンにチェックがが入り、#tab-1:checked~.tabBtn[for=tab-1]からのイベントが進む。

• タブ
• タブタブ
• タブタブタブ

　タブコンテンツ1

　タブコンテンツ2

　タブコンテンツ3

<!--html-->
 <input type="radio" name="switch" id="tab-1" checked>
  <input type="radio" name="switch" id="tab-2">
  <input type="radio" name="switch" id="tab-3">
  <ul class="tabBtn">
    <li><label for="tab-1">タブ</label></li>
    <li><label for="tab-2">タブタブ</label></li>
    <li><label for="tab-3">タブタブタブ</label></li>
  </ul>
  <div class="tabContents">
    <section><img src="https://placehold.it/100x50/20b2aa/ffffff&text=image1">　タブコンテンツ1</section>
    <section><img src="https://placehold.it/100x50/20b2aa/ffffff&text=image2">　タブコンテンツ2</section>
    <section><img src="https://placehold.it/100x50/20b2aa/ffffff&text=image3">　タブコンテンツ3</section>
  </div>

スタイルをタブパネル風に改変した。

width:33.33%は、ulに対してtable-layout:fixedを指定してもよい。何も指定しないと文字数に応じてボタン幅が可変になる。

tab-1ボタンにチェックが入ったら、背景色を変えて、コンテンツの対応するsectionのdisplayをblockに変えている。

/*css*/
/* :::::: button :::::: */
 
.tabBtn {
  display: table;
  width: 50%;
  margin:0;padding:0;
}
 
.tabBtn li {
  display: table-cell;
  width: 33.33%;
  border-right: 1px solid #fff;
  background-color: #20b2aa;
  text-align: center;
  vertical-align: middle;
  border-radius:5px 5px 0 0;
}
 
.tabBtn li:last-child {
  border-right: 0;
}
 
.tabBtn li label {
  display: block;
  cursor: pointer;
  padding: 5px 0;
  color: #fff;
  transition: background-color .3s;
}
 
.tabBtn li label:hover {
  background-color: rgba(205,92,92,.5);
}
 
/* :::::: mechanism :::::: */
.tabContents {
  border:solid 1px #aaa;
  border-top:solid 2px #555;
}
.tabContents section {
  display:none;
  text-align: left;
  padding:20px;
}
 
#tab-1:checked ~ .tabBtn li [for="tab-1"],
#tab-2:checked ~ .tabBtn li [for="tab-2"],
#tab-3:checked ~ .tabBtn li [for="tab-3"],
#tab-4:checked ~ .tabBtn li [for="tab-4"],
#tab-5:checked ~ .tabBtn li [for="tab-5"] {
  background-color: #cd5c5c;
  border-radius:5px 5px 0 0;
}
 
#tab-1:checked ~ .tabContents section:nth-child(1),
#tab-2:checked ~ .tabContents section:nth-child(2),
#tab-3:checked ~ .tabContents section:nth-child(3),
#tab-4:checked ~ .tabContents section:nth-child(4),
#tab-5:checked ~ .tabContents section:nth-child(5) {
  display:block;
  background-color: #fff;
}

ラジオボタンはCSSで消せば良い。

/*css*/
input[type="radio"] {
	display:none;
	}

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>