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

先日コメントにてCocoonで使える[ショートコード]のオプションと使い方まとめで実装しているタブ切り替えについて質問をいただきました。

これ↓

このタブ切り替えは、ラジオボタンを利用してCSSだけで切り替えを実装出来るこちらのページを参考にカスタマイズしたものです。

参考 【CSS】CSSだけでタブ切り替えを作る方法 – bagelee（ベーグリー）

コメント欄でもこんなコードで実装出来るよ～ってやり取りがあって色々考えたんですけど、
ふともっと汎用性の高いコーディング出来るんじゃ？と思い立ったので回答したコードの改良版を紹介します。

★汎用性の高いタブ切り替えHTML＆CSS

これだけのコードで出来るよって事で最低限のスタイルのみ適用してます。

See the Pen タブ切り替え（汎用版） by 草村 (@kusamura_mono) on CodePen.38847

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">ボタン 1</label>
    <div class="tab-content">
        コンテンツ 1
    </div>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン 2</label>
    <div class="tab-content">
        コンテンツ 2
    </div>
    <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">ボタン 3</label>
    <div class="tab-content">
        コンテンツ 3
    </div>
</div>

CSS

.tab-wrap {
    display: flex;
    flex-wrap: wrap;
}
.tab-label {
    color: White;
    background: LightGray;
    margin-right: 5px;
    padding: 3px 12px;
    order: -1;
}
.tab-content {
    width: 100%;
    display: none;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
    background: DeepSkyBlue;
}
.tab-switch:checked+.tab-label+.tab-content {
     display: block;
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}

デザインパターン

HTMLは基本のまま、CSSだけで多様なデザインが可能です。参考にどうぞ！

ボタンが幅に合わせて伸縮する

タブが増減してもタブ幅が勝手に調整されるよ。

See the Pen タブ切り替え(汎用版/装飾) by 草村 (@kusamura_mono) on CodePen.38847

アコーディオンメニュー風

2019-06-27: HTMLがボタン＋コンテンツになってるのでアコーディオンメニューみたいにも出来る

See the Pen タブ切り替え(汎用版/アコーディオン) by 草村 (@kusamura_mono) on CodePen.38847

左右２カラムにする（ボタン縦）

2019-06-27: flex-direction: column;で２カラムに出来ます。height/widthの指定が必要。

See the Pen タブ切り替え(汎用版/コンテンツ横並び) by 草村 (@kusamura_mono) on CodePen.38847

スライドするタブ切り替え

See the Pen CSSだけでスライドするタブ切り替え by 草村 (@kusamura_mono) on CodePen.38847

CSSだけでスライドするタブ切り替えを考えてみた

汎用性の高いタブ切り替えを元にスライドして切り替わる動きをCSSだけで出来ないかなぁって事で考えてみました。ちゃんと左右にスクロールしたようにスライドします。こんな感じサンプル基本構造サンプルHTML<div class="tab-wrap...

web.monogusa-note.com

2020-02-26

使い方・コード解説

超ざっくり解説

HTML解説

<input id="TAB-01" type="radio" name="TAB" checked="checked" /><label for="TAB-01">ボタン 1</label>
<input id="TAB-02" type="radio" name="TAB" /><label for="TAB-02">ボタン 2</label>
<input id="TAB-03" type="radio" name="TAB" /><label for="TAB-03">ボタン 3</label>

※ボタンになる部分を見やすいように余計な記述を削除して抜粋しています。

1. <input>のname属性に同じ名前を付ける。
   
2. １行の<input>のid属性と<label>のfor属性に同じ名前を付ける。
   

名前は他と被らなければなんでも大丈夫です。

同じページに複数タブ切り替えがある場合気をつける事

<!-- 1つめのタブ切り替え -->
<input id="TAB01-01" type="radio" name="TAB01" /><label for="TAB01-01">ボタン 1</label>
<input id="TAB01-02" type="radio" name="TAB01" /><label for="TAB01-02">ボタン 2</label>
<input id="TAB01-03" type="radio" name="TAB01" /><label for="TAB01-03">ボタン 3</label>

<!-- 2つめのタブ切り替え -->
<input id="TAB02-01" type="radio" name="TAB02" /><label for="TAB02-01">ボタン 1</label>
<input id="TAB02-02" type="radio" name="TAB02" /><label for="TAB02-02">ボタン 2</label>
<input id="TAB02-03" type="radio" name="TAB02" /><label for="TAB02-03">ボタン 3</label>

※ボタンになる部分を見やすいように余計な記述を削除して抜粋しています。

1. タブ切り替え毎に<input>のname属性にそれぞれ別の名前を付ける。
   
2. <input>のid属性と<label>のfor属性が別のタブ切り替えとかぶらないように気をつける。※もちろん同タブ切り替え内でもかぶらないように

CSS解説

デフォルトでコンテンツを非表示にしています。

.tab-content {
    display: none;
}

:checkedを使いラジオボタンが選択された時に表示します。

.tab-switch:checked+.tab-label+.tab-content {
    display: block;
}

ラベルは上に並ぶようにしています。

.tab-wrap { 
    display: flex;
    flex-wrap: wrap;
}
.tab-label {
    order: -1;
}

もっとHTMLをシンプルに

ボタン周辺のコード長くて見づらい…って感じならclass属性撤廃しても大体大丈夫です。

<input id="TAB-01" type="radio" name="TAB" /><label for="TAB-01">ボタン 1</label>

CSSは次のように変更

1. .tab-switchを.tab-wrap>input[type="radio"]に変更
2. .tab-labelを.tab-wrap>labelに変更

checkedがなくても初期状態でタブを表示する

何らかの事情でcheckedを指定出来ない場面で使える手法です。

See the Pen タブ切り替え（汎用版/checked無し対応） by 草村 (@kusamura_mono) on CodePen.38847

HTML

HTMLはこちらのclassにtab-orderを追加します。

最後のタブを左に移動したくない場合は追加しなくてOKです。

<div class="tab-wrap tab-order">

CSS

.tab-wrap {
    display: flex;
    flex-wrap: wrap;
}
.tab-label,
.tab-switch:checked~.tab-switch:last-of-type+.tab-label {
    color: White;
    background: LightGray;
    margin-right: 5px;
    padding: 3px 12px;
}
.tab-label{
    order: -1;
}
.tab-content,
.tab-switch:checked~.tab-content:last-of-type { 
    width: 100%;
    display: none;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label,
.tab-label:last-of-type {
    background: DeepSkyBlue;
}
.tab-switch:checked+.tab-label+.tab-content,
.tab-content:last-of-type {
    display: block;
}
/* 最後のタブを左に */ 
.tab-order .tab-label:last-of-type {
    order: -2;
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}

どうなってる？

デフォルトで最後のタブをアクティブ状態に。

/* 最後のラベル */
.tab-label:last-of-type { /* アクティブ */ }

/* 最後のコンテンツ */
.tab-content:last-of-type { /* アクティブ */ }

最後のタブ以外がアクティブなら、最後のタブを非アクティブに。

/* 選択されたラジオボタンがある場合 ~ 最後のラジオボタン + のラベル */
.tab-switch:checked ~ .tab-switch:last-of-type + .tab-label { /* 非アクティブ */ }

/* 選択されたラジオボタンがある場合 ~ 最後のコンテンツ */
.tab-switch:checked ~ .tab-content:last-of-type { /* 非アクティブ */ }

デフォルトで最初のタブがアクティブなように見せるために「最後のタブを左」へ移動。これもorderで解決…。

.tab-order .tab-label:last-of-type {
    order: -2;
}

WordPressで使う際の注意点

クラシックエディタでこのHTMLコードを使おうとすると勝手に<p>で囲まれるので使えません。

TinyMCE Advancedプラグインで段落を保持するように設定すると使えるかもしれません。

ブロックエディタではカスタムHTMLに記述すれば使えました。

Cocoonサイドバーウィジェットで利用する

2019-09-19追記:

初期状態でタブがアクティブにならない場合があります。
その場合#checkedがなくても初期状態でタブを表示するのCSSを利用する必要があります。

このCSSでは「最後のタブ」が「初期アクティブタブ」になります。
HTMLのchecked=”checked”を最後のタブに指定するか、指定自体なくすと良いです。

Cocoonサイドバーで意図した動作にならない理由について
もっと詳しい解説を知りたい方は#コメント欄にてご確認ください。

【小話】よくあるタブ切り替え

See the Pen よくあるタブ切り替え by 草村 (@kusamura_mono) on CodePen.38847

<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-01" checked="checked">ボタン 1</label>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン 2</label>
    <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">ボタン 3</label> 
    <div class="tab-content" id="TAB-01-content">
        コンテンツ 1
    </div>
    <div class="tab-content" id="TAB-02-content">
        コンテンツ 2
    </div>
    <div class="tab-content" id="TAB-03-content">
        コンテンツ 3
    </div>
</div>

ざっくり言うとこういう並びのHTMLです。

ラジオボタン１ + ラベル１
ラジオボタン２ + ラベル２ 
ラジオボタン３ + ラベル３ 
コンテンツ１
コンテンツ２
コンテンツ３

私も参考にさせてもらったタブ切り替えで、よく見かけるHTMLでの実装方法かなと思います。

これの面倒くさい所は、コンテンツを内包する要素にidを設定する＆設定したidをCSSに記述する必要がある所ですね。
なぜかというとそれぞれのラジオボタンとコンテンツの紐付けができないから。

CSSがこんな感じで間接セレクタ(~)とidで記述しています。

#TAB-01:checked ~ #TAB-01-content,
#TAB-02:checked ~ #TAB-02-content,
#TAB-03:checked ~ #TAB-03-content {
    display: block;
}

これでは一つのページに複数設置がしづらいので、私は:nth-of-type(n)で対応する方法をとっていました。

.tab-switch:first-of-type:checked ~ .tab-content:first-of-type,
.tab-switch:last-of-type:checked ~ .tab-content:last-of-type,
.tab-switch:nth-of-type(2):checked ~ .tab-content:nth-of-type(2) { 
    display: block; 
}

これなら複数のタブ切り替えに対応可能です。

ただ、コードも長いしタブが増えたら:nth-of-type(n)を追加するって形がどうも気持ち悪いな～と心の片隅で引っかかっていた所、タブ切り替えについてコメントを頂いて再考する機会がありました。

残念ながら回答の段階では思いつかなかったんですが汗

理想のHTML

ラジオボタンとコンテンツがなぜ紐付けし辛いかっていうと隣接してないからですよね。

こんな風になってるHTMLだと

ラジオボタン１ + ラベル１
ラジオボタン２ + ラベル２ 
ラジオボタン３ + ラベル３ 
コンテンツ１
コンテンツ２
コンテンツ３

前述のように間接セレクタ(~)を使う必要がある。
でも間接セレクタだと後方にある要素(コンテンツ１～３)全部に当てはまるので、それぞれにidを付ける必要がある。

だから隣接するように、こう出来ればいい。

ラジオボタン１ + ラベル１ + コンテンツ１
ラジオボタン２ + ラベル２ + コンテンツ２
ラジオボタン３ + ラベル３ + コンテンツ３

こう出来なかった理由は、上部にメニューを並べて下にコンテンツが表示されるのが理想なのでレイアウト的に都合が悪かったから。

ここで唐突にひらめく。

orderで入れ替えちゃえば解決するじゃん！？

もとよりラジオボタンは非表示なんで放って置いて、ラベルにorder:-1;を設定するだけでいとも簡単にラベルだけ並べる事が出来ました。Amazing…。

って事で、理想のHTML・CSSにラジオボタン:checked+ラベル+コンテンツだけで切り替えが出来るようになりました。

あとがき

まるで世紀の大発見のような気持ちだったけど、実はもう一般的だったらちょっと恥ずかしい…。

flexが使えるようになってレイアウトの幅が広がったなぁと感じます。

HTML的にも見出し＋コンテンツのような順で記述出来てコードもシンプルになったのでちょっと気分がいいです。

汎用性は高くなったと思うんですが、実際使うとレイアウトの自由度が制限される事が出てきたりするんでしょうかね。

Edge未対応ですが<details>なんてタグも存在してたりするのでいつかCSSすら不要な時代もくるかもしれませんね。

結論：orderマジ便利。

CSSだけでスライドするタブ切り替えを考えてみた

汎用性の高いタブ切り替えを元にスライドして切り替わる動きをCSSだけで出来ないかなぁって事で考えてみました。ちゃんと左右にスクロールしたようにスライドします。こんな感じサンプル基本構造サンプルHTML<div class="tab-wrap...

web.monogusa-note.com

2020-02-26