• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ
当サイトのご利用はInternet Explorerを非推奨としております!
セキュリティ面でもInternet Explorerはリスクを抱えているため、
Google Chromeなどほかのモダンブラウザのご利用をご検討ください。

SNIPPETのロゴ

JavaScriptを使わずにHTMLとCSSだけでコンテンツの切り替えができるタブメニューを作る方法

HTMLとCSSのみで作るタブメニュー

コピペで使えるパーツのご紹介です。
今回はJavaScriptを使わずにHTMLCSSのみでタブメニューを作ります。

実際のコード

<div class="tab">
  <input id="tab1" type="radio" name="tabs" class="tab__switch" checked="checked" />
  <label class="tab__label" for="tab1">タブ 1</label>
  <div class="tab__content">
      コンテンツ1
  </div>
  
  <input id="tab2" type="radio" name="tabs" class="tab__switch" />
  <label class="tab__label" for="tab2">タブ 2</label>
  <div class="tab__content">
      コンテンツ2
  </div>
  
  <input id="tab3" type="radio" name="tabs" class="tab__switch" />
  <label class="tab__label" for="tab3">タブ 3</label>
  <div class="tab__content">
      コンテンツ3
  </div>
<!-- /.tab --></div>
.tab {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  &__label {
    color: #fff;
    background: #ccc;
    margin-right: 5px;
    padding: 6px 16px;
    order:-1;
    cursor: pointer;
  }
  &__content {
    width: 100%;
    display: none;
    border: 1px solid #ccc;
    padding: 16px;
  }
  &__switch {
    display: none;
  }
  &__switch:checked+&__label {
    background: red;
  }
  &__switch:checked+&__label+&__content {
    display: block;
  }
}

Sassを使わずにCSSのみで実装する場合が以下になります。

.tab {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.tab__label {
  color: #fff;
  background: #ccc;
  margin-right: 5px;
  padding: 6px 16px;
  order:-1;
  cursor: pointer;
}

.tab__content {
  width: 100%;
  display: none;
  border: 1px solid #ccc;
  padding: 16px; 
}

.tab__switch {
  display: none; 
}

.tab__switch:checked + .tab__label {
  background: red;  
}

.tab__switch:checked + .tab__label + .tab__content {
  display: block; 
}

実装の結果

html-css-tab-menu

実装についての補足と解説

それぞれのコードのポイントを解説します。

HTMLのポイント

HTMLは基本的に静的(画面に表示後は変化しない)言語ですが、
input要素はユーザーの入力を受け付けるため変化する要素になります。

この変化を流用するためにタブの部分をradio要素にし、
labelを紐づけることでコンテンツの切り替えができる下準備をしました。

<!-- ラジオボタンを作成しlabelと紐づけるためにidを指定しておく -->
<!-- name部分はradioボタンをグループ化することで1つだけが選択できるようにするためにどのradioも同じ名前にしておく -->
<input id="tab1" type="radio" name="tabs" class="tab__switch" checked="checked" />

<!-- このラベルをクリックすることでradioボタンのオンとオフを切り替えるために、for属性で紐づくradioのidを指定 -->
<label class="tab__label" for="tab1">タブ 1</label>

<!-- 選択しているタブに応じて表示するコンテンツ内容 -->
<div class="tab__content">
  コンテンツ1
</div>

CSSのポイント

重要となるのは隣接セレクタ+疑似クラスセレクタである:checkedです。

これらの組み合わせでradioボタンをクリックする度に
紐づくコンテンツの動的な切り替えを再現しています。

ポイントのひとつ目は、radioボタンは切り替え機能だけを利用したいため画面からは非表示にしていることです。
label(タブ 1やタブ 2といった部分)がそれぞれのradioに紐付いているので、
クリックすることでオンとオフを切り替える機能のみ利用することができています。

ポイントのふたつ目は、コンテンツの中身についても非表示にしていることです。
そのうえでチェックがついたradioの隣のlabelの隣のコンテンツは表示するという指定を追加することで、
クリックしたタブに紐づくコンテンツだけが表示する仕様を再現しました。

/* 全体を囲んでいる要素でタブの横並びのためにflexを指定
-----------------------------------------*/
.tab {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* タブ 1、タブ 2、タブ 3と表示しているlabel(タブメニュー部分)
-----------------------------------------*/
.tab__label {
  color: #fff;
  background: #ccc;
  margin-right: 5px;
  padding: 6px 16px;
  order:-1;
  cursor: pointer;
}

/* タブの中身となるコンテンツ。display: noneにして一旦画面から非表示にしている。
-----------------------------------------*/
.tab__content {
  width: 100%;
  display: none;
  border: 1px solid #ccc;
  padding: 16px; 
}

/* radioボタン。あくまでも仕組みを利用するためのものなのでdisplay: noneを使って非表示にしている。
-----------------------------------------*/
.tab__switch {
  display: none; 
}

/* チェックされているradioボタン の隣にある label を 赤にする という指定をしている
-----------------------------------------*/
.tab__switch:checked + .tab__label {
  background: red;  
}

/* チェックされているradioボタン の隣にある label の隣にある コンテンツの中身 を表示する という指定をしている
-----------------------------------------*/
.tab__switch:checked + .tab__label + .tab__content {
  display: block; 
}

最後に

HTMLとCSSに動的な要素を与えるとすれば通常はJavaScriptを利用しますが、
CSSもできることが増えてきているためかんたんな動きであれば単体で実現できるようになってきました。

どちらがベストかは内容によると思いますが、
CSSのみで手軽に再現できますので参考になれば幸いです。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND