Studioでラジオボタンとカスタムコードを使ったタブ切り替えを実装する方法

この記事では、Studio標準のラジオボタンとCSSを使ってタブ切り替えを実装する方法を解説します。

以下のポストにて、動画で手順を確認することができます。

https://twitter.com/nakashima_1128/status/2002881714528677954

Studioには標準機能としてタブ切り替えは用意されていません。そのため、これまではボックスにIDを付与して内部リンクで実装する方法と、トグルボックスを使って実装する方法の2つが採用されてきました。

しかし、それらにはユーザー体験上の欠点がありました。今回のラジオボタン＋カスタムコードで実装する方法は、その欠点をすべてクリアしており、現状では最もおすすめできると考えられます。

カスタムコードを使う必要はありますがCSSのみで実装できますので、無料プランでも利用可能・ライブプレビューでの動作確認も可能です。

カスタムコードは、この記事に記載している内容をそのままコピーして貼り付ければOKなように、複数のバリエーションを用意しました。

本記事の立ち位置と参考元について

この実装方法は、株式会社アールイーデザインさんが公開されている方法を使わせてもらっています。本記事では、その画期的なアイデアを元に、カスタムコードに不慣れな方やStudio初心者の方がつまずきやすい設定手順をかみくだいて解説します。

以下が、この実装方法のメリットです。

無料プランでも利用可能
ライブプレビューで動作確認が可能
タブごとのコンテンツ量が異なっても、不自然な余白が生じない
タブとコンテンツの配置の自由度が高い
レスポンシブ対応が容易
コンテンツの編集・管理がしやすい

手順

Step 1：ラジオボタンの改造

追加パネルから「Radio」を追加します。
不要な要素の整理
デフォルトで入っている「Radio Button」というテキストボックスは不要なため、親ボックスごと削除します。ラジオボタンのボタン部分である<input>パーツは削除せずに「非表示」にして残しておいてください。
IDの付与
リスト全体の親ボックス（「RadioList<div>」）を選択し、「設定タブ」のIDに「tab-btns」と入力します。同ボックスの「ラジオタブ」を開き「項目名」を「Radio」→「tab」に書き換えます。
リストデータの設定
リストの「データタブ」を開き、プロパティの「title」となっている部分を「value」に書き換えます。
重要：新たにテキストプロパティを追加して、それを「value」にするのではなく、必ず「title」を「value」に書き換えてください。
値（value）の入力
データの値を「January」「February」…から、半角数字の「1」「2」「3」…に書き換えます。この数字が、実装したいタブの数と対応します。
表示用テキストの追加
タブに表示する文字を入れるため、リスト内にテキストボックスを追加し、新しいテキストプロパティを作成して紐付けます（これは普段通りの操作）。
タブのレイアウト調整
リスト内のアイテム（タブ部分）のレイアウトを調整します。ここはデザインに合わせて自由に設定してください。

これでタブ部分（クリックする部分）の設定は完了です。

「tab-btns」「tab」「value」などはすべて小文字で入力します。小文字が大文字になっていたり、1文字でも異なると機能しなくなるためご注意ください。

Step 2：コンテンツ部分の作成

タブを切り替えたときに表示させる中身を作ります。

コンテンツエリアの作成
コンテンツ全体を囲む親ボックスを配置します。
各コンテンツの中身を作成
その中にボックスを追加し、IDに「tab-wrap-1」と入力します。このボックスの中身が「タブ1」をクリックしたときに表示される内容です。
中に入れる要素は普段通り作成してください。
コンテンツの複製
作成したボックスを複製し、IDを「tab-wrap-2」に変更します。同様に3つ目も作り、IDを「tab-wrap-3」にします。
タブ1以外の非表示設定
「tab-wrap-2」「tab-wrap-3」はレイヤーパネルで非表示にしておきます。「tab-wrap-1」だけが表示されている状態です。

※タブの数が多い場合は、同じ要領でIDの末尾の数字を増やしてください。

Step 3：カスタムコードの挿入

追加パネルから「Blank」ボックス（Embedボックス）を追加し、以下のコードをそのまま貼り付けてください。以下はタブが3つのときのコードです。

<style>
body:has(input[name="tab"][value="2"]:checked) #tab-wrap-1,
  body:has(input[name="tab"][value="3"]:checked) #tab-wrap-1 {
    display: none;
  }
  body:has(input[name="tab"][value="2"]:checked) #tab-wrap-2 {
    display: flex;
  }
  body:has(input[name="tab"][value="3"]:checked) #tab-wrap-3 {
    display: flex;
  }
  #tab-btns label:has(input:checked) {
    background-color: #000000 !important;
  }
  #tab-btns label:has(input:checked) span {
    color: #FFFFFF !important;
  }
}
</style>

選択中のタブ・文字色のカスタマイズ

選択中のタブの背景色を変更する場合は、上記のコード内に含まれている

#tab-btns label:has(input:checked) {
    background-color: #000000 !important;

のカラーコード（#000000の箇所）を変更してください。

同様に、選択しているタブの文字色を変更する場合は

#tab-btns label:has(input:checked) span {
    color: #FFFFFF !important;

のカラーコード（#FFFFFFの箇所）を変更してください。

ここまでの内容が正しく設定できていれば、これでタブ切り替えが機能するはずです。

タブが4つの場合

リストのデータを1つ増やして「value」に「4」を追加し、コードを以下に書き換えます。

<style>
  /* --- タブが4つの場合 --- */

  /* 2, 3, 4のいずれかが選ばれている時、tab-wrap-1 を消す */
  body:has(input[name="tab"][value="2"]:checked) #tab-wrap-1,
  body:has(input[name="tab"][value="3"]:checked) #tab-wrap-1,
  body:has(input[name="tab"][value="4"]:checked) #tab-wrap-1 {
    display: none;
  }

  body:has(input[name="tab"][value="2"]:checked) #tab-wrap-2 {
    display: flex;
  }
  body:has(input[name="tab"][value="3"]:checked) #tab-wrap-3 {
    display: flex;
  }
  body:has(input[name="tab"][value="4"]:checked) #tab-wrap-4 {
    display: flex;
  }

  #tab-btns label:has(input:checked) {
    background-color: #000000 !important;
  }
  #tab-btns label:has(input:checked) span {
    color: #FFFFFF !important;
  }
</style>

タブが5つの場合

4つのときと同様の手順で、コードを以下に書き換えます。

<style>
  /* --- タブが5つの場合 --- */

  /* 2, 3, 4, 5のいずれかが選ばれている時、tab-wrap-1 を消す */
  body:has(input[name="tab"][value="2"]:checked) #tab-wrap-1,
  body:has(input[name="tab"][value="3"]:checked) #tab-wrap-1,
  body:has(input[name="tab"][value="4"]:checked) #tab-wrap-1,
  body:has(input[name="tab"][value="5"]:checked) #tab-wrap-1 {
    display: none;
  }

  body:has(input[name="tab"][value="2"]:checked) #tab-wrap-2 {
    display: flex;
  }
  body:has(input[name="tab"][value="3"]:checked) #tab-wrap-3 {
    display: flex;
  }
  body:has(input[name="tab"][value="4"]:checked) #tab-wrap-4 {
    display: flex;
  }
  body:has(input[name="tab"][value="5"]:checked) #tab-wrap-5 {
    display: flex;
  }

  #tab-btns label:has(input:checked) {
    background-color: #000000 !important;
  }
  #tab-btns label:has(input:checked) span {
    color: #FFFFFF !important;
  }
</style>

おまけ：リストアイテムを順番にふわっと表示させる

これはタブ機能とは直接関係ありませんが、冒頭のサンプルで使用していた、リストのアイテムが先頭から順番にふわっと表示されるアニメーション用のコードも紹介します。

Embedボックスに下記のコードを追記してください（リストアイテムが20個までの場合に対応しています）。

<style>
  /* --- ベースのアニメーション定義 --- */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* --- リストアイテムの共通設定 --- */
  [id^="tab-wrap-"] li {
    opacity: 0;
    /* 0.6s → 1.0s に変更（動き自体をゆっくりに） */
    animation: fadeInUp 1.0s ease forwards;
  }

  /* --- 順番に遅らせる設定 (0.1秒刻みでゆったり登場) --- */
  [id^="tab-wrap-"] li:nth-child(1)  { animation-delay: 0.1s; }
  [id^="tab-wrap-"] li:nth-child(2)  { animation-delay: 0.2s; }
  [id^="tab-wrap-"] li:nth-child(3)  { animation-delay: 0.3s; }
  [id^="tab-wrap-"] li:nth-child(4)  { animation-delay: 0.4s; }
  [id^="tab-wrap-"] li:nth-child(5)  { animation-delay: 0.5s; }
  [id^="tab-wrap-"] li:nth-child(6)  { animation-delay: 0.6s; }
  [id^="tab-wrap-"] li:nth-child(7)  { animation-delay: 0.7s; }
  [id^="tab-wrap-"] li:nth-child(8)  { animation-delay: 0.8s; }
  [id^="tab-wrap-"] li:nth-child(9)  { animation-delay: 0.9s; }
  [id^="tab-wrap-"] li:nth-child(10) { animation-delay: 1.0s; }
  [id^="tab-wrap-"] li:nth-child(11) { animation-delay: 1.1s; }
  [id^="tab-wrap-"] li:nth-child(12) { animation-delay: 1.2s; }
  [id^="tab-wrap-"] li:nth-child(13) { animation-delay: 1.3s; }
  [id^="tab-wrap-"] li:nth-child(14) { animation-delay: 1.4s; }
  [id^="tab-wrap-"] li:nth-child(15) { animation-delay: 1.5s; }
  [id^="tab-wrap-"] li:nth-child(16) { animation-delay: 1.6s; }
  [id^="tab-wrap-"] li:nth-child(17) { animation-delay: 1.7s; }
  [id^="tab-wrap-"] li:nth-child(18) { animation-delay: 1.8s; }
  [id^="tab-wrap-"] li:nth-child(19) { animation-delay: 1.9s; }
  [id^="tab-wrap-"] li:nth-child(20) { animation-delay: 2.0s; }
</style>

まとめ

今回は、Studio標準のラジオボタンを活用したタブ切り替えの実装方法をご紹介しました。

この記事の元となったアールイーデザインさんのコラムでは、この方法を使ったさらに応用的な表現についても触れられています。基本の実装ができたら、ぜひそちらも合わせてご覧いただき、デザインの幅を広げてみてください。

参考情報

ラジオボタンを使って、Studioでタブ切り替え作ってみた｜News｜Studio by Re:design