お知らせ：この記事は2020年公開当時の実装方法を解説しています。最新情報については「タブ切り替えの作成方法 | STUDIO U」をご参照ください。こんにちは。STUDIOを使った制作代行事業（https://studio-gaz.design/）を運営している株式会社gazの吉岡です。この度公式からオファーもらってSTUDIO BlogにTips寄稿することになりました。今回はWEBサイトでよく使われるタブ切り替えの実装方法をまとめたいと思います。タブ切り替え実装に関してはSTUDIOの純機能のみで可能です。【サンプルデモページ】https://gaz-demo.studio.design簡単に以下に手順をまとめます。目次STUDIOにタブboxとコンテンツboxを配置タブboxに複数個メニューを配置コンテンツboxに複数個コンテンツを配置配置したコンテンツにIDを付与タブにページ内リンクを設定（コンテンツに対して）コンテンツ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サイトの表現の幅が広がること間違いなしです。