目次(クリックでジャンプ)
CSSのみでシンプルなタブを作る
CSSだけで簡単にタブの切り替え表示を行うコードです。
CSSのみでシンプルなタブを作るコード
<div class="tabs">
<input id="tab_1" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab_1">Tab1</label>
<input id="tab_2" type="radio" name="tab_item">
<label class="tab_item" for="tab_2">Tab2</label>
<input id="tab_3" type="radio" name="tab_item">
<label class="tab_item" for="tab_3">Tab3</label>
<div class="tab_content" id="tab_item1">
<table>
<tr>
<th>Tab Content1</th>
<td>
Tab Content
</td>
</tr>
</table>
</div>
<div class="tab_content" id="tab_item2">
<table>
<tr>
<th>Tab Content2</th>
<td>
Tab Content
</td>
</tr>
</table>
</div>
<div class="tab_content" id="tab_item3">
<table>
<tr>
<th>Tab Content3</th>
<td>
Tab Content
</td>
</tr>
</table>
</div>
</div>
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 20px;
width: 100%;
}
/*タブのスタイル*/
.tab_item {
width: calc(100% / 3);
/*タブが増減する場合3の部分を適宜変えてください*/
height: 50px;
background: #f1f1f1;
color: #00b7c3;
line-height: 50px;
font-size: 16px;
text-align: center;
display: block;
float: left;
border-radius: 10px 10px 0 0;
font-weight: bold;
transition: all 0.2s ease;
border-top: #f1f1f1 solid 1px;
border-left: #f1f1f1 solid 1px;
border-right: #f1f1f1 solid 1px;
box-sizing: border-box;
&:hover {
opacity: 0.75;
}
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
clear: both;
overflow: hidden;
padding: 20px;
}
/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked ~ #tab_item1,
#tab_2:checked ~ #tab_item2,
#tab_3:checked ~ #tab_item3,
#tab_4:checked ~ #tab_item4,
#tab_5:checked ~ #tab_item5,
#tab_6:checked ~ #tab_item6 {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background: #fff;
color: #00b7c3;
}
/*以下、タブ内に表示するtableのスタイル*/
.tab_content table {
width:100%;
text-align: left;
}
.tab_content th {
min-width: 100px;
width: 20%;
}
.tab_content tr {
border-bottom: #f1f1f1 solid 1px;
}
コメント