当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

タブ切り替えをHTMLとCSSで実装(JavaScriptなし/複数設置可)

アイキャッチ/タブ切り替えをHTMLとCSSで実装 テーマ共通
テーマ共通
記事内に広告が含まれています
スポンサーリンク

この記事では、HTMLとCSSだけでタブ切り替えを自作する方法を紹介します。

タブ切り替えは、コンテンツを整理しユーザーが必要な情報に迅速にアクセスするために役立ちます。通常はJavaScriptを使って実装されますが、CSSだけでもシンプルなタブ切り替えを実現できます。

この記事を読めば、機能的なタブ切り替えを実装できますのでぜひご覧ください。

当記事のタブ切り替えは、『ものぐさWEBノート』さんのコードを流用させていただきました。

\シンプル&オシャレ、分かりやすいサイトです/
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー38
  • 有料記事、累計190件購入いただいています
はっちゃん
です
プロフィール

タブ切り替えの動作イメージ

初期状態ではタブ①が選択されているので(選択するタブは設定で変更可能)、タブ②、タブ③をクリックしてみてください。クリックすることで下部に表示されるコンテンツが切り替わります。

See the Pen タブ切り替え by はっちゃん (@hacchan) on CodePen.

この3タブの切り替えを作ります。

スポンサーリンク

タブ切り替え(タブとコンテンツ)を作成するHTML

イメージ画像/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の「ラジオボタン」を活用してタブを作成します。

例)ラジオボタンを3つ作成

ラジオボタンの「同時にひとつのボタンしか選択できない」(ひとつのラジオボタンをチェックすると他のラジオボタンのチェックが自動的に外れる)性質を利用してタブ切り替えを作成します。この仕組みを利用することにより、Javascriptを使わないタブ切り替えが可能となります。

1つのタブはinput(ラジオボタン)とlabelタグをセットとし、それぞれのinput(ラジオボタン)のid属性label(タブ)のfor属性の名前を合わせます。同じ値を設定しておくことで、画面上のタブにあたるlabelがクリックされた際に、ラジオボタンを連動して機能させることができます。

input(ラジオボタン)に、タブのオン/オフ(そのタブが選択されているかいないか)を拾ってもらい、タブとなる部分はlabelを使って表示させて見た目を整えます。

ラジオボタンは仕組みだけを利用するため非表示にします。

タブが選択された際に表示する内容のHTML部分

<div class="tab-content">
      コンテンツ①をここに表示する
<!--/tab-content--></div>

この<div>要素は各タブのコンテンツを格納します。CSSを使って、対応するラジオボタン(タブ)が選択されているときにのみ表示されるようにします。

HTML記述のポイント(抜粋)

記述する際のポイントとなる部分のみを抜粋します。

  1. inputname属性すべて同じ名前を付ける。
    • タブ① <input id=”TAB-01name=”TAB” />
    • タブ② <input id=”TAB-02name=”TAB” />
    • タブ③ <input id=”TAB-03name=”TAB” />

  2. 1行のinput(ラジオボタン)のid属性labelfor属性に同じ名前を付ける。
    • タブ①<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>

  3. 初期状態でアクティブにするタブ
    • inputchecked=”checkedを指定します

複数のタブセットを同じページに配置する際は、それぞれのタブセットに異なるname属性を持つラジオボタンを使用することがポイントです。

スポンサーリンク

タブ切り替えを作るための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を少し変更することで、お好みのデザインに変更できます。

シンプルなタブ

HTML、CSSはCodePenを参照ください

See the Pen 予備 by はっちゃん (@hacchan) on CodePen.

吹き出し

HTML、CSSはCodePenを参照ください

See the Pen Untitled by はっちゃん (@hacchan) on CodePen.

スポンサーリンク

タブ数の増減について

HTMLの解説でも書いた通り、タブひとつ分のHTMLは<input><label>とタブに表示するコンテンツがワンセットになって作られています。

タブを増やす場合

タブに必要なワンセットの内容を編集して追加します。

  1. <input>name属性ついている名前を合わせる同一タブ内のname属性はすべて同じ
    • タブ <input name=”TAB” />
  2. 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を使わないので動作が軽いのもポイントです。

  • タブ切り替えで新着記事を表示する方法
  • タブ切り替えで人気記事を表示する方法
  • 記事を横並びにする方法

等を解説しています。

この記事は以上です。

よろしければシェアお願いします
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/
Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

  1. 匿名 より:

    コメント失礼します。

    HTMLにある「コンテンツをここに入れる」には何を入れたら良いのでしょうか?

    タブ自体は奇麗に表示されていますが、各タブの下にカテゴリーを表示したいのですが、URLなどを入力するようなものではないようですし…

    他のサイトも拝見したのですが、ここに何を入れるとカテゴリーや記事が表示されるのかわからず質問させて頂きました。

    • はっちゃん はっちゃん より:

      新着記事や人気記事を表示したいならこちらの記事に書いたショートコード(Cocoon独自のものです)を使いますが、

      カテゴリーを表示したいということであれば、トップページの作り方という記事を更新しましたのでこちらが参考になるかと思います^^

      https://turicco.com/2022/10/05/cocoon-toppage/#toc14

  2. 匿名 より:

    返信ありがとうございます。

    Cocoonではないのでショートコードは使えないのですが、記事拝見させて頂きました。
    色々と試みてみたのですが、結局、素人にはどの要素をいれるとカテゴリーの記事一覧が表示されるのかわからずでした…

    もう少し頑張ってみます。

タイトルとURLをコピーしました