[CSS] CSSだけでタブ形式の表示切り替えをしたい
- ページに乗せる内容が多いときは、タブ切り替えを使うと収まりよくまとめられる場合があります
- こういった動的な表示切り替えはJavaScriptを使うのが一般的ですが、ラジオボタンとラベルを組み合わせることでCSSだけで実現することができます
- 今回は、JavaScriptやJqueryを使わずにタブの切り替え表示を行う方法を紹介します
サンプルコード
html
<div class="tab">
<input type="radio" name="tabs" id="tab_01" checked>
<input type="radio" name="tabs" id="tab_02">
<input type="radio" name="tabs" id="tab_03">
<div class="tab_btns">
<label for="tab_01" class="tab_btn">タブ1</label>
<label for="tab_02" class="tab_btn">タブ2</label>
<label for="tab_03" class="tab_btn">タブ3</label>
</div>
<div class="tab_pages">
<div class="tab_page">
<p>タブ1の内容</p>
</div>
<div class="tab_page">
<p>タブ2の内容</p>
</div>
<div class="tab_page">
<p>タブ3の内容</p>
</div>
</div>
</div>
- タブの数分inputタグを用意しています。このinputタグはCSSで非表示にされます
- 「tab_btns」クラスの中にタブの数分ラベルを用意します。for属性で前述のinputタグと連動させます。これで、ラベルをクリックしたときに連動するinputタグがチェックされるようになります
- 「tab_pages」クラスの中にタブの数分ページを用意します。これらのページにはタグの番号と紐づけるようなクラス設定は不要です
CSS
.tab > input[type="radio"] {
display: none;
}
.tab_btns {
display: flex;
margin: 0px -2px -1px;
}
.tab_btn {
padding: 1em;
margin: 0px 2px;
width: 100%;
border: 1px solid #3388dd;
text-align: center;
}
.tab_btn:hover {
cursor: pointer;
}
.tab_pages {
position: relative;
z-index: 1;
border: 1px solid #3388dd;
background-color: #fff;
}
.tab_page {
display: none;
}
.tab > #tab_01:checked ~ .tab_btns > label[for="tab_01"],
.tab > #tab_02:checked ~ .tab_btns > label[for="tab_02"],
.tab > #tab_03:checked ~ .tab_btns > label[for="tab_03"] {
position: relative;
z-index: 2;
border-bottom: 1px solid #fff;
}
.tab > #tab_01:checked ~ .tab_pages > .tab_page:nth-of-type(1),
.tab > #tab_02:checked ~ .tab_pages > .tab_page:nth-of-type(2),
.tab > #tab_03:checked ~ .tab_pages > .tab_page:nth-of-type(3) {
display: block;
}
- 「tab_pages」の中の「tab_page」は「display: none;」で非表示にしています。タブに対応したページを表示させるために以下のようなスタイルを指定します
<input type="radio" name="tabs" id="tab_01" checked>
<input type="radio" name="tabs" id="tab_02">
<input type="radio" name="tabs" id="tab_03">
- ラベルをクリックすると対応するinputにチェックがつき、「:checked」セレクタが有効になります
- 「~」でinputタグの後ろにある同階層の要素「tag_pages」を特定し、その配下にある「tag_page」の「display」を「block」にすることで表示を有効にします
- inputタグにつけたIDのページ番号（#tab_00）と同じn番目（nth-of-type）の「tag_page」を紐づけてタグとページを連動させています
タブの数を増やしたい場合
- タブの数を増やす場合は、以下の部分に手を入れます
- タブのボタンサイズは均等割りされるようにしているため、CSSはcheckedが有効になったときの条件を追加するだけでOKです
html
<label for="tab_01" class="tab_btn">タブ1</label>
<label for="tab_02" class="tab_btn">タブ2</label>
<label for="tab_03" class="tab_btn">タブ3</label>
<div class="tab_page">
<p>タブ1の内容</p>
</div>
<div class="tab_page">
<p>タブ2の内容</p>
</div>
<div class="tab_page">
<p>タブ3の内容</p>
</div>
CSS
.tab > #tab_01:checked ~ .tab_pages > .tab_page:nth-of-type(1),
.tab > #tab_02:checked ~ .tab_pages > .tab_page:nth-of-type(2),
.tab > #tab_03:checked ~ .tab_pages > .tab_page:nth-of-type(3) {
display: block;
}
.tab > #tab_01:checked ~ .tab_pages > .tab_page:nth-of-type(1),
.tab > #tab_02:checked ~ .tab_pages > .tab_page:nth-of-type(2),
.tab > #tab_03:checked ~ .tab_pages > .tab_page:nth-of-type(3) {
display: block;
}
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。