WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

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

アイキャッチ/タブ切り替え カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

Cocoonでも、有料テーマのようにタブ切り替えできないかな?

CodePenでタブ切り替えを作成してみました。

実際に動作やコードを確認できます

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

CodePenはブラウザ上でHTML・CSS・JavaScript等のコードを書いてリアルタイムで表示確認ができます。

タブ切り替えは実は人気有料テーマのSWELLではHTMLやCSSをいじらずにサクッと作れてしまうのですが、私が使っている無料テーマのCocoonはそう簡単にはいかなくて。

手作りでなんとか設置できないかな~と調べること数日。

今回、思い切って導入しました!

当記事のタブ切り替えはものぐさWEBノートさんのコードを流用しています。

\シンプル&オシャレ、分かりやすいサイトです/

Javascriptを使わずHTMLとCSSのみでタブ切り替えが可能です。

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

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

タブ切り替えをWordPressで使う際の注意点

イメージ画像

まずはじめに注意点です。

  • このタブ切り替えはクラシックエディタでは使えません

クラシックエディタではワードプレスの仕様で自動的に<p></p>(段落を意味するHTMLのタグのひとつ)が挿入され、強制的に改行されてタブのレイアウトが崩れてしまうためです。

正確には<p></p>を後で削除すれば使えないこともないのですが、ブロックエディタのカスタムHTMLに記述することを推奨します。

スポンサーリンク

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

初期状態ではタブ①が選択されているので(選択するタブは設定で変更可能)、タブ②、タブ③を押してみてください。

クリックすることによって下部に表示されるコンテンツが切り替わっていると思います。

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

この3タブの切り替えを作ります。
具体的なコードは以下をご覧ください。

スポンサーリンク

タブ切り替えするためのコード/HTML

投稿編集画面:HTMLモードで入力します。

途中で<br><p>が入ると予期せぬ改行がされてしまうので、<input><label>部分はすべてつなげて書くようにします。
<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>

当記事ではHTMLの「radioボタン」を活用してタブを作成していきます。

<input>のtype属性は”radio”にします。

type属性の”radio”はラジオボタンで、同じ name の値を持つ複数の選択肢から一つの値を選択することができます。

例)radioボタンを3つ作成

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

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

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

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

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

ここでは「tab-content」というクラス名をつけ、タブが選択された際の表示切り替えに利用します。

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

※ポイントとなる部分のみを抜粋しています。

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

  2. 1行の<input>(radioボタン)の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>

  3. 初期状態でアクティブにするタブ
    • <input>checked=”checkedを指定します
スポンサーリンク

タブ切り替えするためのコード/CSS

CSSでは下記の設定をおこないます。

  • レイアウト(見た目)を整える
  • 選択されたタブの背景色と文字色を変更する
  • ラジオボタンを非表示にする
  • コンテンツを一旦すべて非表示にする
  • 選択されたタブのコンテンツを表示する

役割についてはざっくりとコード内に/*コメントアウト*/で記入しました。

/**************************
 タブ切り替え
***************************/
/* タブの横並びのため親要素にflexを指定*/
.tab-wrap {
	--tab-color:lightgray; /*タブの色*/
	--active-tab-color:#93A4A4; /*選択したタブの色*/
	display: flex;
	flex-wrap: wrap;
	gap:0 1px; /*タブ間の余白*/
}

/* タブ1~3と書いているタブメニュー部分*/
.tab-label {
	color:white;
	background-color:var(--tab-color);
	text-align: center;
	padding: .5em 1em;
	cursor: pointer;
	flex: 1;
	order: -1; /*タブを上段に表示する*/
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;
}


/* 選択したタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;
	padding: 15px 0 0 0;
}

/*タブのスタイル*/
.tab-wrap:after {
	content: '';
	width: 100%;
	height: 1px;
	background-color:var(--active-tab-color);
	display: block;
	order: -1;
}

/* ラジオボタン非表示 */
.tab-switch {
	display: none;
}

div {
    text-align: center;
  }

CSSの役割(抜粋)

タブの見た目を整える

/* タブの横並びのため親要素にflexを指定*/
.tab-wrap {
	display: flex;
	flex-wrap: wrap;
}
.tab-label {
 	order: -1; /*タブを上段に表示する*/
	flex: 1; /*flexアイテムを伸ばす*/
}

display: flex;でタブを横並びにし、上段に表示する、余白部分を埋めるように引き伸ばすといったスタイルの指定をしています。

選択されたタブの背景色を変更する

/* 選択したタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
}

.tab-switch:checked+.tab-label で使用している「+」マークは隣接セレクタと呼ばれ、直後に出てくる要素に適用するという意味があります。ここでは、選択したinputタグ(radioボタン)の隣にあるtab-labelの背景色を変更するという意味になります。

コンテンツを一旦非表示にする

/* タブのコンテンツ部分*/
.tab-content {
	display: none;
}
.tab-switch:checked+.tab-label+.tab-content {
	display: block;
}

選択されたタブのコンテンツのみを表示します。

  1. 一旦すべてのコンテンツを非表示状態に設定。
  2. 選択されたinputタグ(radioボタン)の直後に記述された「tab-label」の直後にある「tab-content」を表示するという意味になります。

ラジオボタンを非表示にする

/* radioボタン非表示 */
.tab-switch {
	display: none;
}

radioボタンは仕組みだけ利用するため、ボタン自体は非表示にしています。

CSSカスタムプロパティ(変数)の使用

CCSの先頭でタブの色を設定しやすように、カスタムプロパティ記法(ここでは、--tab-color:lightgray; /*タブの色*/)を設定し、var() 関数(ここでは、background-color:var(–tab-color);)で呼び出しています。

CSSカスタムプロパティを使わずに、background-color:lightgray;(または#カラーコード;)と直接記述しても問題ありません。

スポンサーリンク

タブの数は自由に変更できます

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

<input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">タブ③</label>
    <div class="tab-content">
      コンテンツ③をここに入れる
    </div>

タブを増やす場合

1行の<input>のid属性と<label>のfor属性は必ず合わせ、

同一タブ内ではname属性をすべて同じにします。

ワンセットのHTMLコードを追加、タブ名、表示する内容等を編集して追加します。

タブを減らす場合

必要ないタブをワンセットまるごと削除します。

このとき外側の<div class=”tab-wrap”>を閉じている一番最後の閉じタグ</div>まで削除しないように注意しましょう。(<div></div>がセットです)

タブを複数、入れ子にできる

このカスタマイズ方法を使うとタブを入れ子にできるので、

「新着記事」「人気記事」の2つを各カテゴリごとにタブ切り替えできるようにしました。

このコードでは、カテゴリーのタブの中に新着/人気の切り替えタブを入れています。

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

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

タブのデザイン

CSSを少し変更すると、使い勝手の良い吹き出しのタブのデザインにもできますよ。

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

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

さいごに/サイト型トップページの作り方を公開しています

アイキャッチ/トップページ

タブ切り替えを自作する方法をご紹介しました。

HTMLは複雑そうに見えてもそのままコピペでき、それぞれの属性につける名前を間違わないようにすれば難なく設置できるかと思います。

また、当サイトして使用しているテーマ「Cocoon」で、当ページのタブ切り替えを使ったサイト型トップページの作り方を公開しています。

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

等を解説しています。

サンプルページも準備したのでみてくださいね!

この記事は以上です。

COMMENT

  1. 匿名 より:

    コメント失礼します。

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

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

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

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

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

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

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

  2. 匿名 より:

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

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

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

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