CSSでタブの切り替え表示を実装する方法

タブをクリックすることで、表示が切り替わる機能をCSSのみで実装していきます。
サンプルは「画像とテキスト」を切り替えるものをご用意しました。

まずは、HTMLから記入していきましょう。

HTMLコード

<section class="tab_box">
    <input id="tab1" type="radio" name="tab_btn" checked>
    <input id="tab2" type="radio" name="tab_btn">
    <input id="tab3" type="radio" name="tab_btn">

    <div class="tab_area">
        <label class="tab1_label" for="tab1">犬</label>
        <label class="tab2_label" for="tab2">猫</label>
        <label class="tab3_label" for="tab3">羊</label>
    </div>

    <div class="panel_area">
        <div id="panel1" class="tab_panel">
            <p><img src="images/dog.jpg"></p>
            <p class="des">This is a DOG.</p>
        </div>
        <div id="panel2" class="tab_panel">
            <p><img src="images/cat.jpg"></p>
            <p class="des">This is a CAT.</p>
        </div>
        <div id="panel3" class="tab_panel">
            <p><img src="images/sheep.jpg"></p>
            <p class="des">This is a SHEEP.</p>
        </div>
    </div>
</section>

</div>

</div>

</div>

<p class="des">This is a SHEEP.</p>

</div>

</section>

CSSで表示を切り替えるにあたり、ラジオボタンを使用します。
実際にはラジオボタンは非表示にし、label要素をタブボタンとして連動させる動きになります。
input要素に付けたid名を、label要素のfor属性に指定し関連付けをしています。

CSSコード

.tab_box{
    width: 900px;
    margin: 40px auto;
}
input[type="radio"]{
    display: none;
}
.tab_area{
    font-size: 0;
    margin: 0 10px;
}
.tab_area label{
    width: 280px;
    margin: 0 5px;
    display: inline-block;
    padding: 18px 0;
    color: #999;
    background: #333;
    text-align: center;
    font-size: 16px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: ease 0.2s opacity;
}
.tab_area label:hover{
    opacity: 0.8;
}
.panel_area{
    background: #fff;
}
.tab_panel{
    width: 100%;
    padding: 0;
    display: none;
}
.tab_panel p{
    letter-spacing: 1px;
    text-align: center;
}
.tab_panel p.des{
    font-size: 20px;
    padding: 10px 0;
}

#tab1:checked ~ .tab_area .tab1_label{background:#3fb89d; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#3fb89d; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#3fb89d; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}

.tab_box{

width: 900px;

margin: 40px auto;

}

input[type="radio"]{

display: none;

}

.tab_area{

font-size: 0;

margin: 0 10px;

}

.tab_area label{

width: 280px;

margin: 0 5px;

display: inline-block;

padding: 18px 0;

color: #999;

background: #333;

text-align: center;

font-size: 16px;

border-radius: 8px 8px 0 0;

cursor: pointer;

transition: ease 0.2s opacity;

}

.tab_area label:hover{

opacity: 0.8;

}

.panel_area{

background: #fff;

}

.tab_panel{

width: 100%;

padding: 0;

display: none;

}

.tab_panel p{

letter-spacing: 1px;

text-align: center;

}

.tab_panel p.des{

font-size: 20px;

padding: 10px 0;

}

#tab1:checked ~ .tab_area .tab1_label{background:#3fb89d; color:#000;}

#tab1:checked ~ .panel_area #panel1{display:block;}

#tab2:checked ~ .tab_area .tab2_label{background:#3fb89d; color:#000;}

#tab2:checked ~ .panel_area #panel2{display:block;}

#tab3:checked ~ .tab_area .tab3_label{background:#3fb89d; color:#000;}

#tab3:checked ~ .panel_area #panel3{display:block;}

解説

input[type=”radio”]{display: none;}で、ラジオボタンを非表示。
.tab_area labelに対しdisplay: inline-block;でタブボタンを横並びに配置。
.tab_panel{display: none;}で、写真とテキスト部分を非表示にしています。

#tab1:checked ~ .tab_area .tab1_labelという指定は、#tab1が選択された状態「#tab1:checked」の子要素.tab_areaの後ろの.tab1_label要素に対する指示になります。

間接セレクタ「~」について

間接セレクタの「~」結合子とは、同一の親要素を持つ兄弟要素を指定する場合に使用します。例えばA ~ Bという指定をした場合「A要素の後ろに記述したすべてのB要素に適用する」ことを意味します。ただし、A要素の子要素であるB要素であるため、その下の孫要素などには適用されませんのでご注意ください。

間接セレクタを使用したケースで少し混乱してしまいそうですが、ひとつずつ理解できれば応用できそうです。