タブ切り替えは、コンテンツを整理しユーザーが必要な情報に迅速にアクセスするために役立ちます。
この記事では、HTMLとCSSだけでタブ切り替えを自作する方法を紹介します。通常はJavaScriptを使って実装されますが、CSSだけでもシンプルなタブ切り替えが作れます。
この記事を読むと、機能的なタブ切り替えが実装できますのでぜひご覧ください。
当記事のタブ切り替えは、『ものぐさWEBノート』さんのコードを流用させていただきました。
タブ切り替えの動作イメージ
初期状態ではタブ①が選択されているので(選択するタブは設定で変更可能)、タブ②、タブ③をクリックしてみてください。クリックすることで下部に表示されるコンテンツが切り替わります。
See the Pen タブ切り替え by はっちゃん (@hacchan) on CodePen.
この3タブの切り替えを作ります。
タブ切り替え(タブとコンテンツ)を作成するHTML
まず、基本的なHTMLの構造を見てみましょう。
<div class="tab-wrap">
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
<label class="tab-label" for="TAB-01">タブ①</label>
<div class="tab-content">
コンテンツ①をここに表示する
<!--/tab-content--></div>
<input id="TAB-02" type="radio" name="TAB" class="tab-switch" />
<label class="tab-label" for="TAB-02">タブ②</label>
<div class="tab-content">
コンテンツ②をここに表示する
<!--/tab-content--></div>
<input id="TAB-03" type="radio" name="TAB" class="tab-switch" />
<label class="tab-label" for="TAB-03">タブ③</label>
<div class="tab-content">
コンテンツ③をここに表示する
<!--/tab-content--></div>
<!--/tab-wrap--></div>
HTMLの解説
ずらーっと並ぶと何がなんだかよく分からないように見えますが、タブ1つのコードはこの部分です。
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
<label class="tab-label" for="TAB-01">タブ①</label>
<div class="tab-content">
コンテンツ①をここに表示する
<!--/tab-content--></div>
さらにイメージしやすいように、「タブの土台となるHTML」と「タブが選択された際に表示する内容のHTML」の2つに分けて解説します。
タブの土台となるHTML構造
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" />
<label class="tab-label" for="TAB-01">タブ①</label>
<input>のtypeを”radio”にすることで、HTMLの「ラジオボタン」を活用してタブを作成します。
ラジオボタンの「同時にひとつのボタンしか選択できない」(ひとつのラジオボタンをチェックすると他のラジオボタンのチェックが自動的に外れる)性質を利用してタブ切り替えを作成します。この仕組みを利用することにより、Javascriptを使わないタブ切り替えが可能となります。
1つのタブはinput(ラジオボタン)とlabelタグをセットとし、それぞれのinput(ラジオボタン)のid属性とlabel(タブ)のfor属性の名前を合わせます。同じ値を設定しておくことで、画面上のタブにあたるlabelがクリックされた際に、ラジオボタンを連動して機能させることができます。
input(ラジオボタン)に、タブのオン/オフ(そのタブが選択されているかいないか)を拾ってもらい、タブとなる部分はlabelを使って表示させて見た目を整えます。
ラジオボタンは仕組みだけを利用するため非表示にします。
タブが選択された際に表示する内容のHTML部分
<div class="tab-content">
コンテンツ①をここに表示する
<!--/tab-content--></div>
この<div>
要素は各タブのコンテンツを格納します。CSSを使って、対応するラジオボタン(タブ)が選択されているときにのみ表示されるようにします。
HTML記述のポイント(抜粋)
記述する際のポイントとなる部分のみを抜粋します。
- input のname属性にすべて同じ名前を付ける。
- タブ① <input id=”TAB-01” name=”TAB” />
- タブ② <input id=”TAB-02” name=”TAB” />
- タブ③ <input id=”TAB-03” name=”TAB” />
- 1行のinput(ラジオボタン)のid属性とlabelのfor属性に同じ名前を付ける。
- タブ①<input id=”TAB-01” /><label for=”TAB-01“></label>
- タブ②<input id=”TAB-02” /><label for=”TAB-02“></label>
- タブ③<input id=”TAB-03” /><label for=”TAB-03“></label>
- 初期状態でアクティブにするタブ
- inputのchecked=”checked“を指定します
タブ切り替えを作るためのCSS
CSSでは下記の設定をおこないます。
- レイアウト(見た目)を整える
- 選択されたタブの背景色と文字色を変更する
- コンテンツを一旦すべて非表示にする
- 選択されたタブのコンテンツを表示する
- ラジオボタンを非表示にする
役割についてはざっくりとコード内に/*コメントアウト*/で記入しました。
/*タブ切り替え--------------------*/
/* 全体を囲むdiv(親要素)*/
.tab-wrap {
--tab-color:lightgray; /*タブの色*/
--active-tab-color:#9EC3BC; /*選択したタブの色*/
display: flex; /*タブを横並びにする*/
flex-wrap: wrap;
gap:10px; /*タブ間に余白*/
}
/*タブ(label)のスタイル*/
.tab-label {
color:white;
background-color:var(--tab-color);
text-align: center;
padding: .5em 1em;
cursor: pointer;
order: -1; /*タブを上段に表示する*/
}
/* タブのコンテンツ部分*/
.tab-content {
width: 100%;
display: none;
}
/*選択されていることがわかるように、選択されているタブの色を変える*/
.tab-switch:checked+.tab-label {
background-color:var(--active-tab-color);
}
/* 選択されているタブのコンテンツを表示させる */
.tab-switch:checked+.tab-label+.tab-content {
display: block;
}
/* input(ラジオボタン)は仕組みだけ利用するため非表示 */
.tab-switch {
display: none;
}
CSSの解説
基本的なスタイル
.tab-wrap {
display: flex;
flex-wrap: wrap;
}
.tab-label {
order: -1;
}
display: flex
: 親要素をフレックスコンテナにし、子要素を横並びに配置します。order: -1
: フレックスアイテムの順序を指定し、タブを上に配置します。
選択されたタブのコンテンツのみを表示する
ここがタブ切替えに重要なポイントです。
/* タブのコンテンツ部分*/
.tab-content {
width: 100%;
display: none;
}
.tab-switch:checked+.tab-label+.tab-content {
display: block;
}
- デフォルトでコンテンツを非表示状態に設定。
:checked
を使いラジオボタンが選択された時に表示します。
.tab-switch:checked+.tab-label で使用している「+」マークは隣接セレクタと呼ばれ、直後に出てくる要素に適用するという意味があります。ここでは、選択されたラジオボタンの直後に記述された「tab-label」の直後にある「tab-content」を表示するという意味になります。
ラジオボタンを非表示にする
/* ラジオボタン非表示 */
.tab-switch {
display: none;
}
ラジオボタンは仕組みだけ利用するため、ボタン自体は非表示にしています。
タブのデザイン
CSSを少し変更することで、お好みのデザインに変更できます。
シンプルなタブ
See the Pen 予備 by はっちゃん (@hacchan) on CodePen.
吹き出し
See the Pen Untitled by はっちゃん (@hacchan) on CodePen.
タブ数の増減について
HTMLの解説でも書いた通り、タブひとつ分のHTMLは<input><label>とタブに表示するコンテンツがワンセットになって作られています。
タブを増やす場合
タブに必要なワンセットの内容を編集して追加します。
- <input> のname属性についている名前を合わせる(同一タブ内のname属性はすべて同じ)
- タブ <input name=”TAB” />
- タブ <input name=”TAB” />
- 1行の<input>のid属性と<label>のfor属性を合わせる
- タブ<input id=”TAB-04” /><label for=”TAB-04“></label>
<input id="TAB-04" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-04">タブ④</label>
<div class="tab-content">
コンテンツ④をここに表示する
<!--/tab-content--></div>
例)タブを8個に増やした例
例えば、多めにタブを8個作ってみると、このような感じでいくつでも増やすことができます。
タブを減らす場合
必要ないタブをワンセットまるごと削除します。
このとき外側の<div class=”tab-wrap”>を閉じている一番最後の閉じタグ</div>まで削除しないように注意しましょう。(<div></div>は必ず対になるように)
さいごに/タブ切り替えを使ったサイト型トップページの作り方を公開しています
タブ切り替えを自作する方法をご紹介しました。
HTMLは複雑そうに見えてもそのままコピペでき、それぞれの属性につける名前を間違わないようにすれば難なく設置できるのでないでしょうか。またJavascriptを使わないので動作が軽いのもポイントです。
当サイトして使用しているテーマ「Cocoon」で、当ページのタブ切り替えを使ったサイト型トップページの作り方を公開しています。
- タブ切り替えで新着記事を表示する方法
- タブ切り替えで人気記事を表示する方法
- 記事を横並びにする方法
等を解説しています。
この記事で作れるサンプルページも準備したのでみてくださいね!
この記事は以上です。
Comment コメントはこちらへ
コメント失礼します。
HTMLにある「コンテンツをここに入れる」には何を入れたら良いのでしょうか?
タブ自体は奇麗に表示されていますが、各タブの下にカテゴリーを表示したいのですが、URLなどを入力するようなものではないようですし…
他のサイトも拝見したのですが、ここに何を入れるとカテゴリーや記事が表示されるのかわからず質問させて頂きました。
新着記事や人気記事を表示したいならこちらの記事に書いたショートコード(Cocoon独自のものです)を使いますが、
カテゴリーを表示したいということであれば、トップページの作り方という記事を更新しましたのでこちらが参考になるかと思います^^
https://turicco.com/2022/10/05/cocoon-toppage/#toc14
返信ありがとうございます。
Cocoonではないのでショートコードは使えないのですが、記事拝見させて頂きました。
色々と試みてみたのですが、結局、素人にはどの要素をいれるとカテゴリーの記事一覧が表示されるのかわからずでした…
もう少し頑張ってみます。