デザイナ向け就活用ポートフォリオ用のイラレテンプレートを無料で配布中です!

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

この記事を読むのに必要な時間は約 17 分です。

デモの紹介

まずはサンプル用のデモです。シンプルで汎用性の高いタブメニューです。レスポンシブ対応なのでどんな端末でもフィットします。
タブ1~タブ4をクリックするとタブ内容が切り替わりますよ。

タブ1の内容

タブ2の内容

タブ3の内容

タブ4の内容

ソース

以下のソースをコピペすると使えます。
実装に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;
}

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

紹介しているサンプルは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;
}

おわりに

以上、シンプルなポップアップメニューをCSSだけで作る方法の紹介でした。

ではまた!