【JS CSS】簡単にWebページでタブの切替を表示する方法！JavaScript版、CSSのみ版その２

おはようございます、hamatakBlogです！

今回は、タブ表示切替その２です。

前回のタブ切替その１を見てない方はそっちから見てね！

hamatakeblog.hatenablog.com

ということでさっそく前回の続きから解説していきたいと思います。

前回はJavascriptを使って、タブの切替を行いましたが、今回ご紹介するのは、CSSのみでタブ切替を行う方法です！

Javascriptを読み込まない分、前述したロジックよりも軽量で早く処理を行うことができます！（今回は短い処理なので、差異はわかりにくいですが。。。）

それでは、学習スタート！！

CSSのみでタブ切替をしてみる
まとめ

CSSのみでタブ切替をしてみる

それでは、CSSとHTMLを用いてタブの切替をやってみましょう！

HTML

<div>
 <!--タブを表示-->
 <div class="tab-group">
   <input id="japanese" class="tab-btn" name="tab-name" type="radio" checked>
   <label class="tab" for="japanese">国語</label>
   <input id="mathematics" type="radio" name="tab-name">
   <label class="tab" for="mathematics">数学</label>
   <input id="history" type="radio" name="tab-name">  
   <label class="tab" for="history">日本史</label>
   <!--タブ切替表示内容-->
   <div class="content-group">
     <div id="japanese-content">国語の授業内容</div>
     <div id="mathematics-content">数学の授業内容</div>
     <div id="history-content">日本史の授業内容</div>
   </div>
 </div>
</div>

CSS

  .tab{
    flex-grow: 1;
    padding:1vh;
    list-style:none;
    border:double 4px rgb(58, 57, 57);
    text-align:center;
    cursor:pointer;
    float: left;
    width: 30%;
  }
  .content-group{
    height:100px;
    border:solid 1px #CCC;
    background:rgb(180, 180, 180);
  }
  
  /* 選択されたタブのスタイル変更 */
  #japanese:checked ~ .tab[for=japanese],
  #mathematics:checked ~ .tab[for=mathematics],
  #history:checked ~ .tab[for=history]
  {
    background:#0017FF;
    color:#FFF;
  }
  /*ラジオボタンを全て消す*/
  input[name="tab-name"] {
    display: none;
  }
 /*タブ切り替えの中身のスタイル*/
  .content-group div {
    display: none;
  } 
  .content-group{
    clear: both;
  }
  /* 選択されているタブのコンテンツのみを表示 */
  #japanese:checked ~ .content-group #japanese-content,
  #mathematics:checked ~ .content-group #mathematics-content,
  #history:checked ~ .content-group #history-content
  {
     display: block;
  }

イメージはこちら⇓

上記イメージを見てもらうとわかりますが、Javascriptで作成したものと
見た目は変わりません。

inputタグのradioボタンでタブ切替を行います。

radioボタンとは、選択肢の中から一つだけ選べるタイプのボタンのことです。

この特性を活かしタブ切替に利用します。

chekedを記載することで、初期表示時のタブを選択します。

 <input id="japanese" class="tab-btn" name="tab-name" type="radio" checked>
 <label class="tab" for="japanese">国語</label>

続いて、CSSで特質すべき点は、下記のロジックです。

  /* 選択されているタブのコンテンツのみを表示 */
  #japanese:checked ~ .content-group #japanese-content,
  #mathematics:checked ~ .content-group #mathematics-content,
  #history:checked ~ .content-group #history-content
  {
     display: block;
  }