クリエイターなら絶対に登録しておきたい転職エージェント5選!

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

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

デモの紹介

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

タブ1の内容

タブ2の内容

タブ3の内容

タブ4の内容

無料体験レッスンでAmazonギフト券5000円分がもらえる

侍エンジニア塾 は未経験からプロのエンジニアを目指せるオンラインスクールです。
現役プロによるマンツーマン指導、手厚い転職支援により高い転職成功率を誇っています。
今だけ無料体験レッスンに申し込むとアマゾンギフト券5000円分がプレゼントされます!

侍エンジニア塾公式サイト

ソース

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

クリエイター転職に必須のレバテッククリエイター

レバテッククリエイター はクリエイティブ業界に特化した無料で使える転職エージェントです。
Web業界、ゲーム業界、デザイン業界など、クリエイティブ系の求人数が業界トップクラス!
転職だけでなく派遣・フリーランスなど、様々な働き方にも対応していますよ。

レバテッククリエイター公式サイト

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

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

DMM WECAMP COMMITは未経験からプロのエンジニアへの最短経路

DMM WEBCAMP COMMIT は転職保証付きプログラミングスクール です。
数ある転職型エンジニアスクールで唯一「経済産業省の認定講座」に選ばれています。
高品質なカリキュラム、最短3か月の転職保証、確実に結果を出したい方にオススメです。

DMM WEBCAMP COMMIT 公式サイト

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だけで作る方法の紹介でした。

ではまた!