【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;
}

超高品質なHTMLテンプレート

商用利用可能で超高品質なHTMLテンプレートを活用してWeb制作を加速させてみませんか？

上記テンプレートを活用すればテキストと画像を差し替えるだけで高品質なサイトや管理画面が作れます。
各種パーツは全て準備されているのでデザインとコーディングの手間を劇的に軽減可能！

テンプレートの品質、作業効率、制作の時短を優先されている方に間違いなくおすすめできますよ。

テンプレートをダウンロード

おわりに

以上、シンプルなポップアップメニューをCSSだけで作る方法の紹介でした。
ボタンの挙動を表現する基本テクニックの一つなので是非マスターしてください。

ではまた！

貴方に最適な
就職・転職エージェントを診断

所要時間10秒！
数クリックで貴方に必要なエージェントを診断します！
リクナビやen転職等には無い業界特化型エージェントを厳選！
併用する事で収入UP、好条件の可能性が格段に高まります。

目指している業種・雇用形態はどれですか？

目指す業界は何ですか？

クリエイティブ系特化、マーケティングも含む総合型、どちらが希望ですか？

貴方にオススメのエージェントはWebist（ウェビスト）です。

Webist（ウェビスト）は完全無料で使えるWeb業界に特化した転職エージェントです。Web関連の取り扱い求人数はトップクラス！
ちなみに私はWebistを前職で利用し、年収が80万円程アップしました。条件交渉に長けたエージェントが調整してくれるので高確率で年収アップが可能！