CSSでタブ切り替えを設置する（複数設置可）

大まかにカテゴリーを分けると

釣りと ブログ

について書いている当サイト。

トップページを開いたときにごちゃごちゃ記事が混ざっているのは嫌だったので、

カテゴリーをタブ切り替えにしたいな

と思っていて。

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

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

初期状態ではボタン①が選択されているので（変更可能）、ボタン②、ボタン③を押してみてください。

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

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

参考にさせていただいたサイト

今回『ものぐさWEBノート』さんから知恵をお借りしました！！ヾ(*・∀・)

CSSだけで使いやすく汎用性の高いタブ切り替え(複数設置対応)を実装する

先日コメントにてCocoonで使えるのオプションと使い方まとめで実装しているタブ切り替えについて質問をいただきました。これ↓このタブ切り替えは、ラジオボタンを利用してCSSだけで切り替えを実装出来るこちらのページを参考にカスタマイズしたもの

web.monogusa-note.com

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

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">
      コンテンツ①をここに入れる
    </div>

    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン②</label>
    <div class="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">
      コンテンツ③をここに入れる
    </div>
</div>

HTMLの解説

ずらーっと並ぶと何がなんだかよく分からないように見えますが、タブ１つのコードはこの部分です。

<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">
      コンテンツ①をここに入れる
    </div>

<input>（ラジオボタン）と <label>タグがセットで１つのタブができあがります。

<input>（ラジオボタン）に、タブのオン／オフ（そのタブが選択されているかいないか）を拾ってもらい、<label>の方でタブの見た目を整えます。

HTMLのポイント

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

1. <input> のname属性に同じ名前を付ける。
   1. ボタン① <input id=”TAB-01” name=”TAB” />
   2. ボタン② <input id=”TAB-02” name=”TAB” />
   3. ボタン③ <input id=”TAB-03”name=”TAB” />
2. １行の<input>のid属性と<label>のfor属性に同じ名前を付ける。
   1. ボタン①<input id=”TAB-01” /><label for=”TAB-01“></label>
   2. ボタン②<input id=”TAB-02” /><label for=”TAB-02“></label>
   3. ボタン③<input id=”TAB-03” /><label for=”TAB-03“></label>
3. 初期状態でアクティブにするタブ
   1. <input>のchecked=”checked“を指定します

CSS

タブのデザインはこのサイトに合わせた色の吹き出しにしています。

/**************************
 タブ切り替え
***************************/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
margin:5px 0;
}

.tab-label {
  color: White;
  background:lightgray;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  border-radius: 2px;
  position: relative;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
 background:#AEC4E5;/*背景色*/
}
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 10px solid transparent;
border-top:10px solid #AEC4E5;
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}

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

タブを入れ子にして複数設置

この方法を使えばタブを複数設置できるとのことで、

新着記事 人気記事

この２つを各カテゴリごとにタブ切り替え

できるようにしました。

タブ複数設置DEMO

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

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">
        
<div class="tab-wrap">
    <input name="TAB-1" class="tab-switch" id="TAB-1-1" type="radio" checked="checked"><label class="tab-label" for="TAB-1-1">新着記事</label>
    <div class="tab-content">
↓ここにカテゴリ①の新着記事を表示↓
      
    </div>

    <input name="TAB-1" class="tab-switch" id="TAB-1-2" type="radio"><label class="tab-label" for="TAB-1-2">人気記事</label>
    <div class="tab-content">
↓ここにカテゴリ①人気記事を表示↓

    </div>
</div>
    </div>


    <input id="TAB-02" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-02">カテゴリ②</label>
    <div class="tab-content">

<div class="tab-wrap">
    <input name="TAB-2" class="tab-switch" id="TAB-2-1" type="radio" checked="checked"><label class="tab-label" for="TAB-2-1">新着記事</label>
    <div class="tab-content">
↓ここにカテゴリ②の新着記事を表示↓

    </div>

    <input name="TAB-2" class="tab-switch" id="TAB-2-2" type="radio"><label class="tab-label" for="TAB-2-2">人気記事</label>
    <div class="tab-content">
↓ここにカテゴリ②の人気記事を表示↓

    </div>
</div>

    </div>

    <input id="TAB-03" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-03">カテゴリ③</label>
    <div class="tab-content">

<div class="tab-wrap">
    <input name="TAB-3" class="tab-switch" id="TAB-3-1" type="radio" checked="checked"><label class="tab-label" for="TAB-3-1">新着記事</label>
    <div class="tab-content">
↓ここにカテゴリ③の新着記事を表示↓

    </div>

    <input name="TAB-3" class="tab-switch" id="TAB-3-2" type="radio"><label class="tab-label" for="TAB-3-2">人気記事</label>
    <div class="tab-content">
↓ここにカテゴリ③の人気記事を表示↓

    </div>
</div>



    </div>
</div>

当ブログのトップページに採用

そんなこんなで当ブログにもタブ切り替えが設置され、新トップページが完成いたしました～＼(^-^)／

釣り／千葉

新着記事

↓ここにカテゴリ①の新着記事を表示↓

釣行記（千葉）

千葉港でルアーとエギング／カマスが釣れていました！

2022年06月24日2022年06月27日

釣行記（千葉）

５月早朝のシリヤケイカ…釣れず

2022年05月31日2022年06月12日

釣行記（千葉）

2022潮干狩り／千葉ポートパークでマテガイを探そう！

2022年05月03日2022年06月05日

人気記事

↓ここにカテゴリ①人気記事を表示↓

釣行記（千葉）

2021千葉ポートパークで潮干狩り／アサリ、ホンビノスは不漁もマテガイが採れました

2021年04月30日2022年06月11日

釣行記（千葉）

新魚種ホウボウが釣れたー♪久しぶりの釣りは長浦港へ

2020年07月26日2022年06月05日

釣行記（千葉）

人気の千葉港でルアーフィッシング／シーバス（スズキ）が釣れるとは！

2020年10月27日2022年06月11日

釣り/茨城

新着記事

↓ここにカテゴリ②の新着記事を表示↓

釣行記（茨城）

小サバ沸く中、サビキ釣りでヒラメが釣れる！？／鹿島港

2022年06月13日2022年06月18日

釣行記（茨城）

尺アジまで届かず！も昼間から良型多し／鹿島港

2022年05月04日2022年06月12日

釣行記（茨城）

４月の鹿島港はまだまだサヨリ好調♪アジも回ってきています！

2022年04月24日2022年06月11日

人気記事

↓ここにカテゴリ②の人気記事を表示↓

釣行記（茨城）

2020／鹿島港のサヨリはどうかな？

2020年01月19日2022年06月11日

釣行記（茨城）

2021／釣り始めは波崎へ行ってみました

2021年01月16日2022年06月11日

釣行記（茨城）

鹿島港で2021年初のカレイ♪

2021年01月16日2022年06月11日

釣り/宮城

新着記事

↓ここにカテゴリ③の新着記事を表示↓

釣行記（宮城）

春休みは宮城・塩釜港で夜釣り／春メバルに癒された時間

2021年04月03日2022年06月11日

釣行記（宮城）

冬の三連休はハゼ、セイゴ、クロダイなど、まったり五目釣り／宮城（塩釜）

2020年12月04日2022年05月07日

釣行記（宮城）

奇跡の冬アイナメ／塩釜港

2018年12月23日2022年06月11日

人気記事

↓ここにカテゴリ③の人気記事を表示↓

釣行記（宮城）

冬の三連休はハゼ、セイゴ、クロダイなど、まったり五目釣り／宮城（塩釜）

2020年12月04日2022年05月07日

釣行記（宮城）

奇跡の冬アイナメ／塩釜港

2018年12月23日2022年06月11日

釣行記（宮城）

ソロ釣行で釣れたアイナメ／七ヶ浜（松ケ浜漁港）

2016年03月28日2022年06月11日

ショートコードを利用した新着記事と人気記事

新着記事と人気記事についてはワードプレステーマ「Cocoon」のショートコードを使って表示しています。

記事作成画面でショートコードのブロックを選択してコードを書きます。

[new_list]

[popular_list]

カテゴリや表示する記事数を指定したり、表示形式をある程度変えることもできます。

使い方はCocoon公式サイトをご覧ください。

ひとこと

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

自分で作るには難しいと思っていたタブ切り替えを、情報を公開しているサイト様々のおかげで実装することができて満足しています♪(*・ω・人)