HTMLとCSSだけでタブを作る

inputタグとcssを使ってタブ切り替えを実装する

jsを使わずにhtmlのinputタグとcssだけでタブの切り替えを行うぞ。

See the Pen
inputタグとcssだけでタブ機能 by 魔王 (@maou_frontend)
on CodePen.

タブのhtml構成

<div class="tabs-wrapper">
  
    <input type="radio" name="tab_list" id="btn-1" class="btn-1" checked >
    <label for="btn-1" class="btn" >メラ系呪文</label>
    <input type="radio" name="tab_list" id="btn-2" class="btn-2">
    <label for="btn-2" class="btn" >ギラ系呪文</label>
 
    <div class="tabs-container">
        <div class="tab-1">
            <p>メラ</p><p>メラミ</p><p>メラゾーマ</p>
        </div>          
        <div class="tab-2">
            <p>ギラ</p><p>ベギラマ</p><p>ベギラゴン</p>
        </div>
    </div>
</div>

CSS無しで見てみるとこんな状態であるぞ。

先にinputタグを用意して、該当するタブ内容を記述していく方法だ。

タブとタブの中身をセットで作るのではなく、タブはタブで用意して、タブ内容はタブ内容だけで用意する。

タブ部分はinputタグで構成する

タブで使用するinputタグのname属性は任意の名前で問題ないぞ。注意すべきはid属性であり、これはlabelタグのforと同じものにする必要がある。

<input type="radio" name="tab_list" id="btn-1" class="btn-1" checked >
<label for="btn-1" class="btn" >メラ系呪文</label>
<input type="radio" name="tab_list" id="btn-2" class="btn-2">
<label for="btn-2" class="btn" >ギラ系呪文</label>

タブの中身はclassで分類する。

今回はタブを２つ作っているが、４つにしたい場合はtab-○とbtn-○を４つに増やして、cssも増やせばタブを増やすことができる。


tab-○のクラスを付与するのはdivタグでもsectionタグでも大丈夫だぞ。

<div class="tabs-container">
        <div class="tab-1">
            <p>メラ</p><p>メラミ</p><p>メラゾーマ</p>
        </div>          
        <div class="tab-2">
            <p>ギラ</p><p>ベギラマ</p><p>ベギラゴン</p>
        </div>
    </div>

タブのcss構成

考え方の大筋は、inputを非表示にし、ラベルをタブにして、チェックされたものを表示する。というものであるぞ。

注意すべきは「間接セレクタ」（兄弟セレクタ）の使い方くらいである。

.tabs-wrapper {
    width: 500px;
    padding: 10px;
    position: relative;
    margin: 20px auto;
}
 
.tabs-wrapper input {
    opacity: 0;
    display: none;
    visibility: hidden;
}
 
.btn {
    background: #eaeaea;
    color: #000;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 13px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    opacity: 0.8;
    transition: all 0.4s;
    width:50%;
    border-bottom:5px #7de4c9 solid;
    border-top-right-radius:4px;
	  border-top-left-radius:4px;
    box-sizing: border-box; 
}
 
 
.tabs-wrapper input:checked + label {
 	color: #000;
	background:#7de4c9;
}
 
.tabs-container {
    width: 100%;
    position: relative;
    float: left;
    background: #fff;
}
 
.tab-1 ,
.tab-2 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
}
 
 
.btn-1:checked ~ .tabs-container .tab-1 ,
.btn-2:checked ~ .tabs-container .tab-2 {
    position: relative;
    visibility: visible;
    top: 0;
    left: 0;
    opacity: 1;
}

「間接セレクタ」（兄弟セレクタ）とは

間接セレクタとは、基準要素以下にある要素を指定するためのセレクタである。

「特定の要素」～「それ以下に存在する適用する要素」{color:red;}

日本人の感覚だと、「～」は範囲のイメージが強いが、間接セレクタの場合は、以下を指定することになる。

<p>1</p>
<p>2</p>
<p class="point">3</p>
<p>4</p>
<p>5</p>

.point ~ p { color: gold; }

上の場合は3にpointのクラスがあるので、その以下のpにスタイルが適用されることになるぞ。

今回のタブのCSSの場合、「.btn-1:checked」以下にある「.tabs-container .tab-1」と「.btn-2:checked」以下にある「.tabs-container .tab-2」にスタイルを適用することになる。

.btn-1:checked ~ .tabs-container .tab-1 ,
.btn-2:checked ~ .tabs-container .tab-2 {
    position: relative;
    visibility: visible;
    top: 0;
    left: 0;
    opacity: 1;
}

以上がinputタグとcssを使ってタブ切り替えを実装する方法であるぞ！