ポートフォリオの作り方をゼロから徹底解説

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

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

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

ソースをコピペするだけで即使えます。

デモの紹介

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

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

タブ1の内容

タブ2の内容

タブ3の内容

タブ4の内容

クリエイターへの就職・転職成功率を劇的に上げるエージェント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;
}

Web制作・プログラミングを学ぶ

さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。

独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。

下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。

おわりに

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

ではまた!