Studioでタブ切り替えを作成する

タブを使用して情報を整理し、見やすくすっきりとしたページが構成できます。本記事では一例として、Studioのボックスとアンカーリンクを使った以下のようなタブの作成方法をご紹介します。

まずは、作成するタブの構成を確認しましょう。

最初に、デザインの土台となるボックスをエディタ左のアイコンをクリックし、ページに配置します。

ボックスを広げ、上下パディングを設定します。

追加したボックス内にテキストボックスを追加し、デザインします。

次に、タブの切り替えボタンをボックス内に作成します。

タブ内に表示するコンテンツも配置します。

切り替えボタンの親ボックスと、コンテンツの親ボックスを選択し、これらをグループ化（⌘ + G）します。これでタブの親ボックスができます。

この親ボックスの横幅は100%にします。コンテンツ内のデザインが同じであれば、レスポンシブデザインの調整もこの段階で行うと効率的です。

作成したタブの親ボックスをコピー＆ペーストで複製し、タブ2、タブ3を作成します。

タブと見出しを内包するボックスの縦幅を「auto」にし、複製したタブ内のコンテンツ変更とタブの切り替えボタンのデザインを調整します。

各タブにユニークなID（例：tab-1, tab-2, tab-3）をエディタ右側の設定パネルで設定します。

設定パネルにて、各タブの切り替えボタンにアンカーリンクを設定し、対応するコンテンツに遷移できるようにします。

アンカーリンクでタブの切り替えを行うため、遷移後のタブ位置調整のため各タブの上部にパディングを設定します。

次に、3つのタブボックスをShift +カーソル選択で複数選択し、グループ化（⌘ + G）します。

グループ化したボックスの横幅を100%に設定し、選択したままボックス上部に表示される配置と方向メニューを調整します。

矢印の方向メニューでは、向きを右へ変更し、配置メニューでは上左端に設定します。さらに、はみ出し設定を非表示に変更します。

最後に、見出しのテキストボックスの位置をネガティブマージンで調整します。

全ての設定が完了したら、ライブプレビュー機能を使用して、デザインと機能が正しく動作するか確認してください。