2024/01/01

HTMLとCSSだけで作るタブ型のUI

今回は、Webページなどでよく見られるタブ型のUIを作る方法について紹介します。
タブ型のUIもいろいろな実装の方法があると思いますが、この記事内ではHTMLとCSSだけを使って設置する場合の方法についてお話ししていきたいと思います。

タブ型UIの仕組み紹介

今回紹介する方法は、HTMLのラジオボタン（<input type="radio">タグ）を使う方法になります。

ラジオボタンの特徴として、ラジオグループが挙げられます。
ラジオグループとは、ラジオボタンのname属性に同じ値を指定した複数のラジオボタンの集まりのことで、同じラジオグループ内のラジオボタンはどれか一つだけしか選択することができないようになります。同じラジオグループ内の他のラジオボタンを選択すると、それまで選択されていたラジオボタンの選択は解除されてしまいます。

上記のように、ラジオグループ内のラジオボタンはどれか一つだけしか選択できないということを利用してHTMLとCSSだけでタブ型のUIを作成することができます。

・ラジオボタンについて詳しくは下記のページを見てみて下さい。
<input type="radio"> – HTML: ハイパーテキストマークアップ言語 | MDN

タブ型UIの設置の流れ

それではここからは、実際にHTMLとCSSだけを使ってタブ型のUIを設置する流れについて、いくつかのステップに分けて紹介していきたいと思います。

まずは、タブ型のUIに必要なHTML要素を設置して、CSSで簡単に整えます。
必要なHTML要素としては、ラジオボタンのinputタグとそれぞれに対応するlabelタグ（id属性とfor属性を使って紐付けします）、そしてそれぞれのタブを選択したときに表示させたい内容を設置していきます。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

このとき注意しておきたいのは、設置したラジオボタン（<input type="radio">）のname属性に同じ値を指定してラジオグループにしておくことです。
先ほども紹介したように、ラジオグループが設定されていないと複数のラジオボタンが選択できる状態となってしまいタブ型のUIとしてうまく動作しません。
また、後ほどタブ型UIとしての動作をさせるために、タブとなる各labelタグと各タブが選択されたときの表示内容となる要素にはid属性を設置しておきます。

次に、ラジオボタンそのものを display: none; で非表示にしてタブとなるラベル部分だけが表示されるようにしておき、さらにタブの部分がクリックできることがわかりやすいように cursor: pointer; でマウスカーソルがタブの上でポインタに変わるようにします。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

最後に、クリックされたタブの内容だけが表示されるようにすることと、あわせて選択されているタブがわかるようにしていきます。

それぞれのタブの内容がはじめは表示されないようにするために、 display: none; を指定しておきます。
その上で、下記のCSSで選択されたタブの内容だけが表示されるようにします。

#tab-1:checked ~ .tab-content-wrapper #tab-1-content,
#tab-2:checked ~ .tab-content-wrapper #tab-2-content,
#tab-3:checked ~ .tab-content-wrapper #tab-3-content {
  display: block;
}

さらにどのタブが選択されているのかわかりやすくするために、選択されているタブだけが異なる背景色になるように下記のCSSを追加しています。

.tab-ui-wrapper input:checked + .tab-label {
  background-color: #F9B54A;
  color: #fff;
}

また、ページが初めて表示されたときには一番目のタブの内容が表示されている状態にするために、一番目のタブのラジオボタンである<input type="radio">要素にchecked属性を指定しておきます。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

以上で、簡単なタブ型のUIをHTMLとCSSだけで実装することができました。

タブ型UIのコード例紹介

ここで、前の項目で作成したタブ型UIのHTMLとCSSのコードをまとめて紹介しておきます。

HTML
<div class="tab-ui-wrapper">	
	<input id="tab-1" name="tab-group" type="radio" checked>
	<label class="tab-label" for="tab-1">タブ1</label>
		
	<input id="tab-2" name="tab-group" type="radio">
	<label class="tab-label" for="tab-2">タブ2</label>
		
	<input id="tab-3" name="tab-group" type="radio">
	<label class="tab-label" for="tab-3">タブ3</label>
	
	<div class="tab-content-wrapper">
		<div class="tab-content" id="tab-1-content">
			<p>タブ1の内容のテキスト</p>
		</div>

		<div class="tab-content" id="tab-2-content">
			<p>タブ2の内容のテキスト</p>
		</div>

		<div class="tab-content" id="tab-3-content">
			<p>タブ3の内容のテキスト</p>
		</div>
	</div>
</div>

CSS
.tab-ui-wrapper {
  width: 90%;
  margin: 20px auto;
}

.tab-label {
  width: 20%;
  height: 35px;
  line-height: 35px;
  background-color: #ddd;
  color: #666;
  display: inline-block;
  border-radius: 7px 7px 0 0;
  text-align: center;
  cursor: pointer;
}

.tab-ui-wrapper input {
  display: none;
}

.tab-content-wrapper {
  color: #fff;
  background-color: #F9B54A;
}

.tab-content {
  display: none;
  padding: 10px 20px;
}

#tab-1:checked ~ .tab-content-wrapper #tab-1-content,
#tab-2:checked ~ .tab-content-wrapper #tab-2-content,
#tab-3:checked ~ .tab-content-wrapper #tab-3-content　　{
  display: block;
}

.tab-ui-wrapper input:checked + .tab-label {
  background-color: #F9B54A;
  color: #fff;
}