ラジオボタンを使って、Studioでタブ切り替え作ってみた

「カスタムコード css＋ラジオボタン」でタブの切り替えを作ってみました。
cssでdisplay:noneで表示切り替えをしているので、コンテンツの中身の高さも気にする必要がありません。
また、アンカーリンクを使用していないので、画面リサイズしてもレイアウトが崩れません。
参考までにどうぞ。

用意するもの

• iframe（表示切り替えcss用。headタグ内記載でも可）
• ラジオボタン（タブボタン）
• container（タブのコンテンツたちを囲む用の親ボックス）
• 「tab-wrap」それぞれのタブボックス。中にはpやdivなど自分の入れたい要素を好きに入れてください。

※idは任意ですので、ご自身のわかりやすいものに変えて大丈夫です。

ラジオボタンの準備

デフォルトのラジオボタンを追加し、タイトルなどは削除してlabelのリストだけを残します。
valueの値を利用して、cssでタブの表示を操作するので、値は英数字にします。タブのテキストはまた別でテキストプロパティを追加して設定するといいです。
項目名は任意で大丈夫ですが、今回は「tab」で設定します。
idはタブのcurrentの見た目を調整したい場合は設定してください。

これでボタンの準備は完了です。

コンテンツの準備

タブの切り替えは「nameが“tab”のラジオボタンのvalueが“2”の時はコンテンツ“2”を表示」という感じにcssで調整します。それぞれのコンテンツにはidを振って、cssの切り替えに使えるようにしておきます（tab-wrap-x 部分）。
コンテンツの作り込みが終わったら、デフォルト表示の1つ目以外は目のアイコンを閉じて非表示にします。

階層は、containerの親ボックスの中にタブのボックスを入れます。
1つ目以外のコンテンツはデフォルトを非表示にしてしまうので、containerの並び順などは自分が編集しやすい設定で大丈夫です。

cssの調整

cssは下図を挿入します。

2〜5行目でタブ2／3の時はコンテンツ1を非表示という処理をしています。
コンテンツ1はデフォルトが表示状態なので「display:none」の処理を入れる必要があります。

6〜8行目はコンテンツ2、9〜11行目はコンテンツ3のタブを表示する処理をしています。
この2つはデフォルトが非表示なので、「display:flex」を指定します。
※「display:block」にしてしまうと、並び順や揃えが効かなくなるので注意してください。

12行目〜17行目はカレントの時のスタイルです。任意ですので、こちらは自分で好きに設定してください。
これでタブの設定は完了です。

応用編

hasとラジオボタンのcheckedを応用すると様々な挙動を再現できます。

アンケート風のタブ切り替えです。横に動くアニメーションはcssのtranslateでつけています。
ヌルッという動きを表現するために、display:noneにはせずheightとopacityを調整してそれぞれのコンテンツの高さを調整しています。

ラジオボタンはリストでなくとも、項目名(value)が同じならいいので、他のコンテンツにラジオボタンを置いてもタブの切り替えが機能します。そのため、動画のような戻るボタンを作ることもできます。

cssを書かないといけないのが少し大変ですが、慣れてしまえば簡単なので色々レイアウトの幅が広がりそうな予感がします。