CSSのみで実装するタブ切替コンテンツ

いま自分的にCSSで実装できそうなものは出来る限りCSSで実装しようというのが流行りです。今回はその過程で見付けた、CSSのみで軽量かつ比較的簡単に実装できるタブ切替コンテンツの作成方法をご紹介します！

HTML

<div class="tab-wrap">
       <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
       <label class="tab-label" for="TAB-01">TAB01</label>
       <div class="tab-content">
           <h3>コンテンツ１</h3>
         <p>ここにテキストを入れます</p>
       </div>
       <input id="TAB-02" type="radio" name="TAB" class="tab-switch" />
       <label class="tab-label" for="TAB-02">TAB02</label>
       <div class="tab-content">
           <h3>コンテンツ２</h3>
           <p>軽量で簡単！</p>
       </div>
       <input id="TAB-03" type="radio" name="TAB" class="tab-switch" />
       <label class="tab-label last" for="TAB-03">TAB03</label>
       <div class="tab-content">
           <h3>コンテンツ３</h3>
           <p>おススメです</p>
       </div>
   </div>

CSS

.tab-wrap {
   display: flex;
   flex-wrap: wrap;
   margin: 30px 0 50px;
}
.tab-label {
   text-align: center;
   width: 240px;
   margin-right: 20px;
   line-height: 64px;
   order:-1;
   border: solid 1px #1b1b1b;
}
.tab-label:hover {
   opacity: 0.8;
   cursor: pointer;
}
.tab-label.last {
   margin-right: 0;
}
.tab-content {
   width: 100%;
   display: none;
}
.tab-switch:checked+.tab-label+.tab-content {
   display: block;
   clear: both;
   margin-top: 30px;
}
.tab-switch {
   display: none;
}

サンプル

凝ったアニメーションやエフェクト等は無いですが、シンプルなぶん、読み込みも動作もサクサク！軽さはユーザーのイライラを軽減させる武器でもあるので、かなり使えると思います。