CSSのみで（Javascriptを使用せず）タブを実装する

このネタは結構ありますよね。。。

多いのが flex レイアウトでラジオボタンとタブページ div を折り返しで分ける実装方法。
（リンクボタン方式もあるが履歴を無駄に発生させる・・・）

よく見るflexタブの駄目な点

Tabキーでフォーカスされない（display:noneとしているため）
　tabindexを指定してもタブの移動が面倒。
　ラジオボタンを使っているのに矢印キー（←→）で選択出来ない。

flexでorder:-1を使用している（OKでもいいじゃんと思うが原理主義的にはNG）

それで、:hover および :focus による装飾もしたかったので、以下の実装で解決した。

ぱーふぇくとなCSSタブ

動作確認済みブラウザ
・Google Chrome 104 (および Chromium Edge)
・FireFox 104

See the Pen Css Tab (no-script) by cfd-ack (@cfd-ack) on CodePen.

タブのデザイン古くね？ ← オッサンですから。。。

2022/09/05 追記：button タグは不要ですね。この内容なら label だけで充分。（整理してなかった・・・
下記の解説も読み替えて下さい。。。

かいせつ

※ラジオボタンからの兄弟要素による表示切替については既知の手法なので省略します。

まずラジオボタン本体は width:0 等で見えなくする。
ブラウザによってはappearanceも必要。FireFoxはappearance無しだと面白い感じになる。
（※追記：コントロール表示のカスタマイズとしてはこちらが本筋の手法らしいです。）
見えないけど存在するのでTabキーアクセスは確保される。（display:none パターンではアウト）
通常のラジオボタンなので矢印キー（←→）による選択もできる。

つづいて label を使いタブとして見える部分を装飾、button で label のみを囲む。
（button 側は罫線なし padding:0 にしないとマウス押下領域と反応領域のズレが生じる。）
button:hover > label でマウスオーバー表示。
input[type="radio"]:focus + button > label でフォーカス強調（outlineまたは代替表現）

さて・・・ここまで作りこんだが業務で使うことはなさそうだ・・・（おぅ
flex折り返しなのでタブが増えたら多段タブ（複数行）になるし・・・（←そんなにタブ増やすのおかしくね？

スクロール可能な１行タブとなるとJavascript必須。であればどうにでも実装出来るし。