Webデザイナーブログから学ぶホームページ制作

タブ切り替えメニューを実装するにはさまざまな方法がありますが、従来は、「jQuery」や「JavaScript」を利用して実装するのが一般的でしたが、「HTML」や「CSS」の技術が進化し「CSS」のみでタブ切り替えメニューを実装することができるようになりました。

今回は、CSSのみ（JavaScript無し）でタブ切り替えメニューを実装する2つの方法を解説します。

CSSのみ（JavaScript無し）でタブ切り替えメニューを実装する方法は沢山ありますが、基本的な考え方は同じですが、「CSS」の記述方法が異なります。

【基本的な考え方】
・ラジオボタンを非表示にする
・「ラジオボタン」のid属性と「タブ項目）」のfor属性を紐づける

各タブメニューを「ラジオボタン」で配置し、デザイン性を持たせるために「ラジオボタン」の機能を非表示にする必要があります。CSSで「input[type=radio]」に「display:none;」要素を記述して、ラジオボタンを非表示にしてからデザインを設計します。

ラジオボタンを機能させるために「ラジオボタン」と「タブ項目」を紐づけする必要がります。
「input（ラジオボタン）」のid属性と「label（タブ項目）」のfor属性を紐づけます。id属性とfor属性が一致していないとタブメニューは機能しません。

※ひとつのタブメニューのみ表示しています。

<input id="menu01" type="radio" name="tab_menu" checked><label class="tab_menu" for="menu01">メニュー項目 1</label>

基本的な考え方を元に、CSSのみ（JavaScript無し）でタブ切り替えメニューを実装するには、「タグ項目」タグと「コンテンツ」を一致させてコンテンツを開く方法と「タグ項目」を選択時に直下のコンテンツを開く方法と2つの方法があります。

2つの方法の違いは、
①「input（ラジオボタン）」のid属性を選択した時に、Class要素に記述されている「id（コンテンツ内容）」を一致させて「コンテンツ内容」を開く方法。
②「input（ラジオボタン）」のid属性を選択した時に、直下にあるClass要素に記述されている「id（コンテンツ内容）」を開く方法。

2つの違いは、「input（ラジオボタン）」のid属性とClass要素に記述されている「id（コンテンツ内容）」を一致させてコンテンツ内容を開くか直下にあるClass要素に記述されている「id（コンテンツ内容）」を開くかの違いです。

「input（ラジオボタン）」のid属性に「menu01」を記述したらClass要素「id（コンテンツ内容）」にも「menu01」を記述することで、タブを選択した際にidが一致しているコンテンツ内容を開くことができます。

<div class="tab01">
<input id="menu01" type="radio" name="tab_menu" checked><label class="tab_menu" for="menu01">メニュー項目 1</label>
<input id="menu02" type="radio" name="tab_menu"><label class="tab_menu" for="menu02">メニュー項目 2</label>
<input id="menu03" type="radio" name="tab_menu"><label class="tab_menu" for="menu03">メニュー項目 3</label>
<div class="tab_contents" id="menu01">
コンテンツ内容 1
</div>
<div class="tab_contents" id="menu02">
コンテンツ内容 2
</div>
<div class="tab_contents" id="menu03">
コンテンツ内容 3
</div>
</div>

.tab01 {
  width: 100%;
  margin: 0 auto 50px;
}
/*タブのスタイル*/
.tab_menu {
  width: calc(100%/3);
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  text-align: center;
  color: #000;
  border-bottom: 3px solid #1f71b5;
  background-color: #d9d9d9;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_menu:hover {
  opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_menu"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_contents {
  display: none;
  padding: 40px;
  clear: both;
  overflow: hidden;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/*選択されているタブを表示*/
#menu01:checked ~ #menu01,
#menu02:checked ~ #menu02,
#menu03:checked ~ #menu03 {
  display: block;
}
/*選択されているタブのスタイル*/
.tab01 input:checked + .tab_menu {
  background-color: #1f71b5;
  color: #fff;
}

「input（ラジオボタン）」のタブを選択した際に、直下にあるClass要素に記述されている「id（コンテンツ内容）」を開くことができます。

<div class="tab02">
<input id="table01_01" type="radio" name="table01" class="tab_active" checked="checked" /><label class="tab_label" for="table01_01">メニュー項目 1</label>
<div class="tab_content">
コンテンツ内容 1
</div>
<input id="table01_02" type="radio" name="table01" class="tab_active" /><label class="tab_label" for="table01_02">メニュー項目 2</label>
<div class="tab_content">
コンテンツ内容 2
</div>
<input id="table01_03" type="radio" name="table01" class="tab_active" /><label class="tab_label" for="table01_03">メニュー項目 3</label>
<div class="tab_content">
コンテンツ内容 3
</div>
</div>

.tab02 {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 50px;
}
.tab02:after {
  content: '';
  width: 100%;
  height: 3px;
  background:#1f71b5;
  display: block;
  order: -1;
}
.tab_label {
  height: 60px;
  line-height: 60px;
  color:#000;
  background:#d9d9d9;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab_label:not(:last-of-type) {
  margin-right: 5px;
}
.tab_content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブタブ */
.tab_active:checked+.tab_label {
  color:#fff;
  background:#1f71b5;
}
.tab_active:checked+.tab_label+.tab_content {
  height: auto;
  overflow: auto;
  padding: 40px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/* ラジオボタン非表示 */
.tab_active {
  display: none;
}

「jQuery」や「JavaScript」を利用してタブメニューを実装するとどうしてもWebサイトのパフォーマンスが悪くなり表示速度が遅くなってしまいます。CSSのみで完結できるのは表示速度の遅延防止に繋がります。
CSSのみでタブメニューの実装方法を覚えておくと「jQuery」や「JavaScript」が苦手な方でもWebサイトに動きを取り入れることができますね。