【JS不要、コピペで1分】CSSだけで作るタブ切り替えメニュー【レスポンシブ対応】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

簡単！Javascript不要！
CSSだけで作るタブメニューの紹介です。

ソースをコピペするだけで即使えます。
CSS初心者の方にも簡単に実装できますよ！

この記事の目次

デモの紹介

まずはサンプル用のデモです。シンプルで汎用性の高いタブメニューです。
レスポンシブ対応なのでどんな端末でもフィットします。

タブ1～タブ4をクリックするとタブ内容が切り替わりますよ。

タブ1 タブタブ3 タブ4

タブ1の内容

タブ2の内容【JS不要、コピペで1分！】CSSだけで作るトグルボタン

タブ3の内容【JS不要、コピペで1分】CSSだけで作るポップアップメニュー

タブ4の内容【JS不要、コピペで1分】CSSだけで作るマウスオーバーでふわっと色が変わるボタン

クリエイターへの就職・転職成功率が高いエージェント5選

クリエイターへの就職・転職を目指すにはリクナビやen転職など、大手だけでは役不足です。
コチラの記事で私が転職の際に活用し、複数内定を獲得したクリエイティブ系に強い転職エージェントを徹底解説！
フリーランス志望の方、収入を増やしたい方に必須のエージェントはコチラの記事で解説しています。

ソース

以下のソースをコピペすると使えます。
実装に1分かかりません。

HTML

<div class="tab_container">
  <input id="tab1" type="radio" name="tab_item" checked>
  <label class="tab_item" for="tab1">タブ1</label>
  <input id="tab2" type="radio" name="tab_item">
  <label class="tab_item" for="tab2">タブ2</label>
  <input id="tab3" type="radio" name="tab_item">
  <label class="tab_item" for="tab3">タブ3</label>
  <input id="tab4" type="radio" name="tab_item">
  <label class="tab_item" for="tab4">タブ4</label>
  <div class="tab_content" id="tab1_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ1の内容</p>
    </div>
  </div>
  <div class="tab_content" id="tab2_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ2の内容</p>
    </div>
  </div>
  <div class="tab_content" id="tab3_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ3の内容</p>
    </div>
  </div>
  <div class="tab_content" id="tab4_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ4の内容</p>
    </div>
  </div>
</div>

CSS

.tab_container {
  padding-bottom: 1em;
  background-color: #fff;
  border:1px solid #37beb0;
  margin: 0 auto;}
.tab_item {
  width: calc(100%/4);
  padding:15px 0;
  border-bottom: 3px solid #37beb0 ;
  background-color: #ececec;
  text-align: center;
  color: #37beb0 ;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  padding: 1em 1em 0;
  clear: both;
  overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content {
  display: block;
}
.tab_container input:checked + .tab_item {
  background-color: #37beb0 ;
  color: #fff;
}

デモファイル

zipに圧縮したデモファイルです。
fantiaからダウンロードできます。

fantiaからダウンロード

タブの数を変えたい場合は

紹介しているサンプルは4つタブですが、3タブにしたい場合、2タブにしたい場合が出てきます。
コピペで利用してください。

※分かりやすいように4タブのソースから削除した箇所、変更した箇所にコメントを入れています。

3タブのHTML

<div class="tab_container">
  <input id="tab1" type="radio" name="tab_item" checked>
  <label class="tab_item" for="tab1">タブ1</label>
  <input id="tab2" type="radio" name="tab_item">
  <label class="tab_item" for="tab2">タブ2</label>
  <input id="tab3" type="radio" name="tab_item">
  <label class="tab_item" for="tab3">タブ3</label>
  <!--ココにあったタブ4のラベルを削除-->
  <div class="tab_content" id="tab1_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ1の内容</p>
    </div>
  </div>
  <div class="tab_content" id="tab2_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ2の内容</p>
    </div>
  </div>
  <div class="tab_content" id="tab3_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ3の内容</p>
    </div>
  </div>
  <!--ココにあったタブ4の内容を削除-->
</div>

3タブのCSS

.tab_container {
  padding-bottom: 1em;
  background-color: #fff;
  border:1px solid #37beb0;
  margin: 0 auto;}
.tab_item {
  width: calc(100%/3);    /*100%/4を100%/3に変更*/
  padding:15px 0;
  border-bottom: 3px solid #37beb0 ;
  background-color: #ececec;
  text-align: center;
  color: #37beb0 ;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  padding: 1em 1em 0;
  clear: both;
  overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content {  /*, #tab4:checked ~ #tab4_contentを削除*/
  display: block;
}
.tab_container input:checked + .tab_item {
  background-color: #37beb0 ;
  color: #fff;
}

2タブのHTML

<div class="tab_container">
  <input id="tab1" type="radio" name="tab_item" checked>
  <label class="tab_item" for="tab1">タブ1</label>
  <input id="tab2" type="radio" name="tab_item">
  <label class="tab_item" for="tab2">タブ2</label>
  <!--ココにあったタブ3のラベルを削除-->
  <!--ココにあったタブ4のラベルを削除-->
  <div class="tab_content" id="tab1_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ1の内容</p>
    </div>
  </div>
  <div class="tab_content" id="tab2_content">
    <div class="tab_content_description">
      <p class="c-txtsp">タブ2の内容</p>
    </div>
  </div>
  <!--ココにあったタブ3の内容を削除-->
  <!--ココにあったタブ4の内容を削除-->
</div>

2タブのCSS

.tab_container {
  padding-bottom: 1em;
  background-color: #fff;
  border:1px solid #37beb0;
  margin: 0 auto;}
.tab_item {
  width: calc(100%/2);    /*100%/4を100%/2に変更*/
  padding:15px 0;
  border-bottom: 3px solid #37beb0 ;
  background-color: #ececec;
  text-align: center;
  color: #37beb0 ;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  padding: 1em 1em 0;
  clear: both;
  overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content {  /*, #tab3:checked ~ #tab3_content , #tab4:checked ~ #tab4_contentを削除*/
  display: block;
}
.tab_container input:checked + .tab_item {
  background-color: #37beb0 ;
  color: #fff;
}