タブを使用して情報を整理し、見やすくすっきりとしたページが構成できます。本記事では一例として、Studioのボックスとアンカーリンクを使った以下のようなタブの作成方法をご紹介します。
注意：デザイン上のタブ実装について
この実装方法は、あくまでタブ切り替えをデザイン上で再現するものであり、HTML として正しいタブ構造ではありません。そのため、キーボード操作などが正しく機能せず、一部の閲覧者が利用できない場合があります。
注意：モーダル内での動作について
新しい公開基盤で公開されているサイトでは、このタブ切り替えをモーダル上に設置した場合に正しく表示・動作しないことがあります。モーダル内で一部のコンテンツを切り替えて表示したい場合は、URLクエリフィルター機能などを活用した構成を検討してください。
1. 土台ボックスの設置
全体（タブの全容と該当コンテンツ）の土台となるボックスを設置します。
見出しが必要な場合は、土台ボックス内にテキストボックスを追加します。
2. ひとつ目のタブと該当コンテンツの作成
例として、「いぬ」「ねこ」「うさぎ」のタブを切り替えるデザインを制作します。
タブ全体を作成します。
まずは、「いぬタブ」を選択中のデザインを用意します。
「いぬタブ」選択時に表示する「いぬコンテンツ」を作成します。
レイヤーは、1と同じ階層に作ります。
「いぬ選択中のタブ」と「いぬコンテンツ」をグループ化します。
グループ名を「いぬ選択中」とします。
「いぬ選択中」ボックスの、横幅を100%、高さをautoにします。
Tips：デバイスのサイズに関わらず、コンテンツ内のデザインが同じであれば、この段階でレスポンシブデザインの調整を行うと効率的です。
3. タブの複製
「いぬ選択中」のボックス（レイヤー）を複製します。
それぞれのデザイン内容とレイヤー名を、「ねこ」「うさぎ」に対応させます。
「土台となるBox」の高さを[auto]にします。
4. ID設定とアンカーリンク設定
各タブにIDを設定します。
例：
・「いぬ選択中」のボックス：dog
・「ねこ選択中」のボックス：cat
・「うさぎ選択中」のボックス：rabbit
すべての各タブに、動物名に該当するアンカーリンクを設定します。
（この画像の場合、9箇所に設定）
これで、タブクリック時に該当コンテンツが表示されるように見えます。
5. レイアウト最終調整
「いぬ選択中」「ねこ選択中」「うさぎ選択中」のボックス上部にそれぞれ、同じ幅のパディングを設定します。（遷移時のガタつきを抑えるため）
「いぬ選択中」「ねこ選択中」「うさぎ選択中」のレイヤーをグループ化します。グループの横幅は[100%]にします。
最後に、見出しのテキストボックスの位置をネガティブマージンで調整します。
6. 確認と更新