サイトでもよく見かけるタブ切り替え。
JavaScriptを使えばそれほど苦もなく実装できる仕様ですが…。
大丈夫です、CSSだけでタブ切り替えを実装する事ができますよ。
【サンプル】
sample01の内容が入ります。
pでもdivでもh〇でも、なんでもござれです。
特定IDのラジオボタンのON/OFFで、表示が切り替わる仕組みです。
「~」や「+」などのセレクタを利用して表示を切り替えていますよ。
【HTML】
<div class="tabs-sample"> <!-- ↓切り替え用タブ（ラジオボタン） --> <input id="sample01" type="radio" name="tab_item" checked><label class="tab_item" for="sample01">sample01</label><input id="sample02" type="radio" name="tab_item"><label class="tab_item" for="sample02">sample02</label> <!-- ↓切り替わり要素（sample01） --> <div class="tab_content" id="sample01_content"> <!-- ↓切り替わり要素（sample01）の内容が入ります --> </div> <!-- ↓切り替わり要素（sample02） --> <div class="tab_content" id="sample02_content"> <!-- ↓切り替わり要素（sample02）の内容が入ります --> </div> </div>
【CSS】
/* ラジオボタンを全て消す */
input[name="tab_item"] {
display: none;
}
/* 選択されているタブのコンテンツのみを表示 */
#sample01:checked ~ #sample01_content,
#sample02:checked ~ #sample02_content{
display: block;
}
/* 選択されているタブのスタイルを変える */
div.tabs-sample input:checked + .tab_item {
background-color: #000;
color: #fff;
}
/* タブ切り替え全体のスタイル（任意） */
div.tabs-sample {
text-align:center;
}
/* タブのスタイル（任意） */
.tab_item {
padding:10px 45px;
border: solid #000 1px;
background-color: #fff;
font-size: 18px;
text-align: center;
line-height:1em;
color: #333;
display:inline-block;
font-weight: bold;
transition: all 0.2s ease;
margin:0;
}
.tab_item:hover {
opacity: 0.75;
}
/* タブ切り替えの中身のスタイル（任意） */
.tab_content {
display: none; /* ←のみ必ず必要 */
border:solid #ccc 1px;
margin:50px 0 0;
padding:25px;
}
参照させていただいたこちらのサイトには、切り替わる仕組みが詳しく解説されていますので、ご参照ください。
https://bagelee.com/design/css/create_tabs_using_only_css/
input（radio）要素や、「~」や「+」などのCSSセレクタを利用して、表示が切り替わる仕組みになっています。
こちらのCSSはラジオボタンのチェックの有無を利用しているので、
:checkedのセレクタがポイントになっています。
（上記セレクタは、ラジオボタンやチェックボックスにおいて、チェックが入っている要素を指定します。CSS3から追加されています。
また、「~」のセレクタも利用しています。僕は普段まったく使わないのですが…
例）任意の要素1 ~ 任意の要素2
「~」は、「任意の要素1」と同じ階層にある「任意の要素2」を指定しています。
#sample01:checked ~ #sample01_content,
#sample02:checked ~ #sample02_content{
display: block;
}
つまり上記CSSの場合は、#sample01もしくは#sample02にチェックが入っている場合に、同じ階層にある#sample01_contentもしくは#sample02_contentを表示（display: block;）する、という意味になりますね。
ですので、HTMLでは#sample01、#sample02と#sample01_content、#sample02_contentを同階層にしている訳です、はい。
input[name=”tab_item”]で、チェックの識別に使用しているラジオボタンそのものは、非表示にしている所もポイントです。
各inputの後に記述している、<label>要素とラジオボタンを紐付けていれば、非表示でもチェックの認識はされているんですね。
参照サイトでも言われていますが、ラジオボタンのIDと<label>要素のfor属性を揃えて、紐付けておく事をお忘れなく。
「+」セレクタは、要素の直後にある要素を指定します。
例）任意の要素1 + 任意の要素2
上記の場合は「任意の要素1」の直後にある「任意の要素2」という感じですね。
div.tabs-sample input:checked + .tab_item
今回は選択されているタブのスタイルを変える為に使用しています。
HTMLでは<input>と、それに紐づく<label>が並んで設置されていますが、その並びを利用して、上記のCSSを設定しているんですね。
チェックが入ったラジオボタンの直後にある<label>要素が、うまく指定される仕組みです。
これを考えた人は凄いと感嘆しつつ、これらの各セレクタを上手く応用すれば、タブ切り替え以外の物も作れるのではないでしょうか。
ブルダウンメニューやスマホ用メニューとかもですね。
実際に、既に活用されているものも多いですので、それらもまたご紹介していきます。