cssだけでもできる！タブ切り替えの実装方法
画像切り替えの記事で紹介したものを改良すると、タブ切り替えに転用できますということで、ここではcssだけでタブ切り替えを実装していきます。
やっぱりchecked疑似クラスを使っていきますので、そちらについては以下のリンク記事で詳しく紹介していますのでご覧ください。
タブ切り替えとは
タブ切り替えは、狭いスペースに情報を詰め込む時に重宝するコンポーネントのひとつで、yahooのトップにあるニュース部分が代表的な例だと思います。
今回作るサンプルを以下に用意しておきます
HTMLに関する情報一覧です
- HTMLの情報
- HTMLの情報
- HTMLの情報
- HTMLの情報
- HTMLの情報
CSSに関する情報一覧です
- CSSの情報
- CSSの情報
- CSSの情報
- CSSの情報
- CSSの情報
JavaScriptに関する情報一覧です
- JavaScriptの情報
- JavaScriptの情報
- JavaScriptの情報
- JavaScriptの情報
- JavaScriptの情報
タブ切り替え用HTMLの準備
cssだけでタブ切り替えをさせる時に必要な要素はいくつか考えられますが、今回はシンプルに用意してみました。
- クリック判定用のラジオボタン
- 切り替え用のタブ
- タブによって表示する要素
これらの要素を全て兄弟要素として配置していけばHTMLは完成です。
input要素をまとめたくなる気持ちはよくわかりますが、全て兄弟要素として扱うことがキモなので我慢してください
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div class="tab_content"> <input type="radio" name="tab" id="item1" checked> <input type="radio" name="tab" id="item2"> <input type="radio" name="tab" id="item3"> <ul class="tab_list"> <li class="tab_item tab_item1"><label for="item1">HTML</label></li> <li class="tab_item tab_item2"><label for="item2">CSS</label></li> <li class="tab_item tab_item3"><label for="item3">JavaScript</label></li> </ul> <div class="content_wrap"> <div class="content content1"> <p>HTMLに関する情報一覧です</p> <ul> <li>HTMLの情報</li> <li>HTMLの情報</li> <li>HTMLの情報</li> <li>HTMLの情報</li> <li>HTMLの情報</li> </ul> </div> <div class="content content2"> <p>CSSに関する情報一覧です</p> <ul> <li>CSSの情報</li> <li>CSSの情報</li> <li>CSSの情報</li> <li>CSSの情報</li> <li>CSSの情報</li> </ul> </div> <div class="content content3"> <p>JavaScriptに関する情報一覧です</p> <ul> <li>JavaScriptの情報</li> <li>JavaScriptの情報</li> <li>JavaScriptの情報</li> <li>JavaScriptの情報</li> <li>JavaScriptの情報</li> </ul> </div> </div> </div> |
「#check1」にチェックが有るときは「.tab_item1」と「.content1」が、「#check2」にチェックが有るときは「.tab_item2」と「.content2」が、「#check3」にチェックが有るときは「.tab_item3」と「.content3」がそれぞれ連動する形をとっていきます。
なお、「#check1」は予めチェックが入った状態にするため、checked属性を付けておきます。
ラジオボタンは同じname属性が付いたグループ内でどれかひとつしかチェックできないので、この仕組を利用します。
タブ切り替え用のcss
～を使ったセレクタが理解できる人であれば問題ないと思いますので、とりあえずコードをそのままペタッとしておきます。
今回のサンプルでは「#check1」にチェックが有るときは「.tab_item1」と「.content1」が、「#check2」にチェックが有るときは「.tab_item2」と「.content2」が、「#check3」にチェックが有るときは「.tab_item3」と「.content3」がそれぞれ連動する形にしたいので、このような形になります
borderとかcursorとか余計なものも入れていますが必要がなければ削っても問題はないです
コメントを入れてあるので参考にしていただければと思います
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
/*タブコンテンツ全体の要素*/ .tab_content{ width: 600px; margin: 0 auto; } /*タブ部分の基本設定*/ .tab_list{ display: flex; justify-content: space-between; } .tab_item{ width: calc(200px - 2px); background-color: #ddd; position: relative; bottom: -1px; } .tab_item label{ padding: 8px 0; display: block; cursor: pointer; text-align: center; } /*チェックが入ったときのタブ部分の指定*/ #item1:checked ~ .tab_list .tab_item1, #item2:checked ~ .tab_list .tab_item2, #item3:checked ~ .tab_list .tab_item3{ background-color: #fff; border: solid 1px #000; border-bottom-color: #fff; z-index: 2; } #item1:checked ~ .tab_list .tab_item1 label, #item2:checked ~ .tab_list .tab_item2 label, #item3:checked ~ .tab_list .tab_item3 label{ cursor: auto; } /*コンテンツ部分の基本設定*/ .content_wrap{ width: 100%; } .content{ position: relative; z-index: 1; padding: 20px 10px; display: none; background-color: #fff; border: solid 1px #000; } /*チェックが入ったときのコンテンツ部分の指定*/ #item1:checked ~ .content_wrap .content1, #item2:checked ~ .content_wrap .content2, #item3:checked ~ .content_wrap .content3{ display: block; } |
