JSなしでタブ切り替えデザインを実装できるの、、、！？

はじめに

こんにちは、普段はフロントエンドもバックエンドもどっちもやっているエンジニアです。
久々にHTMLをハードコーディングする機会があったのですが、その時にちょっと驚いたことがあったので記事を書くことにしました。

その驚いたこととはタイトルにもある通り、タブ切り替えのデザインを実装する際にJSを使わずに実装できるということです、、！

▼一般的なタブ切り替えデザインの図

世の中のエンジニアはどうやって実装してるの？

僕はタブ切り替えを実装する際はJSを使い、クリックされた要素にdisplay:blockを付与するクラスを追加し、今まで表示してたタブにdisplay:noneを付与するクラスを追加するのが常識だと思ったました。

何故なら初めてタブ切り替えのデザインを実装した時に、参考にした記事がそうやっていたから……( ;∀;)

もちろんこのやり方が不正解というわけではないですし、むしろ一般的なやり方だとと思います。

JSなしでタブ切り替えデザインを実装する方法

今回初めて知ったタブ切り替えの実装方法が、CSSのみで実装する方法になります。

参考にさせていただいたサイトがこちら↓
https://pote-chil.com/html-maker/tab

タブ切り替えデザインを実装する際のテンプレートを探していたらたまたま見つけました。

JSを使ったやり方ではクリックされたタブに表示非表示用のクラスを付与してタブの切り替えを実現していました。

ですがこちらのやり方だとクラスの代わりにラジオボタンのcheckedをキーにして表示非表示を制御しています。

.html

<div class="tab-001">
    <label>
        <input type="radio" name="tab-001" checked>
        タブ1
    </label>
    <div>
        上に枠線の付いたタプです。現在表示されているタブがどれなのか判別しやすいのが特徴。
        背景が白以外の箇所で利用するとよりおしゃれに見えます。
    </div>

    <label>
        <input type="radio" name="tab-001">
        タブ2
    </label>
    <div>ぜひ線の色をお好みの色に変えてみてください。</div>

    <label>
        <input type="radio" name="tab-001">
        タブ3
    </label>
    <div>もちろんレスポンシブ対応で、タブの追加にも対応しています。</div>
</div>

.css

.tab-001 {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
}

.tab-001 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    color: #535353;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-001 > label:hover {
    opacity: .8;
}

.tab-001 input {
    display: none;
}

.tab-001 > div {
    display: none;   /* ←注目：コンテンツは基本非表示 */
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-001 label:has(:checked) {
    background-color: #fff;
    border-color: #2589d0 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-001 label:has(:checked) + div {
    display: block;   /* ←注目：checkedがついたタブに隣接するコンテンツを表示させる */
}

確かに上記の構成にすればJSを使わなくてもタブ切り替えができる……

まあクリック判定のためにラジオボタン使っていたり、HTMLの書き方的にあまりよろしくない感はありますが、CSSしか使ってないので動作は軽いです。
あまりHTML構造を意識しなくていいようなページ（そんな要件があればになってしまいますが）などにはこの書き方でも問題ないのではないでしょうか。

感想

生成AIやノーコードツールが台頭してきたこの時代にHTMLをハードコーディングするスキルなんていらないだろ～などと思ってましたが、実際に自分で実装してみるとやはり知見が広がりますね。

何よりラジオボタンでタブ切り替えの実装をするという発想がなかったことが悔しいです、、、笑

エンジニアたるものもっと頭を柔らかくせねば、、、と気を引き締めつつ今後もいっぱい手を動かしていく所存です。