STUDIOでタブ切り替えを実装する方法

お知らせ：この記事は2020年公開当時の実装方法を解説しています。最新情報については「タブ切り替えの作成方法 | STUDIO U」をご参照ください。

こんにちは。STUDIOを使った制作代行事業（https://studio-gaz.design/）を運営している株式会社gazの吉岡です。
この度公式からオファーもらってSTUDIO BlogにTips寄稿することになりました。

今回はWEBサイトでよく使われるタブ切り替えの実装方法をまとめたいと思います。
タブ切り替え実装に関してはSTUDIOの純機能のみで可能です。

【サンプルデモページ】
https://gaz-demo.studio.design

簡単に以下に手順をまとめます。

目次

1. STUDIOにタブboxとコンテンツboxを配置

2. タブboxに複数個メニューを配置

3. コンテンツboxに複数個コンテンツを配置

4. 配置したコンテンツにIDを付与

5. タブにページ内リンクを設定（コンテンツに対して）

6. コンテンツboxにoverflow: hidden;を設定

1.STUDIOにタブboxとコンテンツboxを配置

まずはSTUDIOのプロジェクト内にboxを2つを配置しましょう。
1つ目はタブ部分のbox（以下タブbox）
2つ目はコンテンツ部分のbox（以下コンテンツbox）
です。

2.タブboxに複数個メニューを配置

タブboxに複数個メニューを配置します。

親要素のタブboxは縦横auto指定にしておきましょう。
こちらのサンプルの場合は各要素をwidth25%で作成しています。

3.コンテンツboxに複数個コンテンツを配置

次にタブbox同様にコンテンツbox内に子要素としてコンテンツを複数個配置します。
並び順は縦でも横でも問題ありません。（画像は横並び）

コンテンツが配置できたらそれぞれのコンテンツにIDを振ります。
すべてのコンテンツに別々のIDを設定しましょう。

4.タブにページ内リンクを設定（コンテンツに対して）

IDの設定が終わったので、次はそれぞれのタブに対してページ内リンクを設定します。
「タブA」には「コンテンツA」という形ですべてのページ内リンクを設定します。

5.コンテンツboxにoverflow: hidden;を設定

コンテンツboxをクリックして親要素から子要素がはみ出ない設定にします。
コンテンツboxとコンテンツのサイズを任意のサイズに合わせればタブ切り替えの完成です。

完成すると以下のようになります。

最後に自分なりのアニメーションや、コンテンツを配置して自由にカスタマイズしてみてください。WEBサイトの表現の幅が広がること間違いなしです。