ケケンタ

タブ切り替え機能を作りたいけどやり方が分からない……

ケケンタ

横並びじゃなくて「縦並び」のタブ切り替えができるようにしたい……

今回はこのようなお悩みをお持ちの方へ向けて

JavaScriptで作るタブ切り替え機能
【３パターン】

をご紹介します。

Web制作でよく利用されるタブ切り替え機能のメリットは、ページ遷移をしなくてもユーザーが見たい情報を簡単に切り替えられることです。

しかし、タブ切り替え機能をいちから自分で実装するのは手間がかかる一方で、ソースコードを使い回せば簡単に実装可能です。

ケケンタ

この記事でご紹介するソースコードはコピペOKです！

ぜひコーディングの際にご活用いただき、作業効率をアップしていただければと思います。

あわせて読みたい

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE Web制作を仕事にしたいけど、プログラミングスクールに通うには費用がかかりすぎる……けど、独学だと相談相手もいないから、挫折しないか心配…… こうした悩みをお持ちの…

【ソースコード】タブ切り替え機能

以下よりご紹介する「３つ」のタブ切り替え機能に共通した使い方について
ソースコードのコメントにも記述していますが、「tab-elemのdata-tabid」と「tabbody-elemのid」を一致させてご使用ください。

パターン①　タブボタンが横並び（もっとも一般的なタブ切り替え）

もっとも一般的な形のタブ切り替え機能です。

See the Pen タブ（水平方向） by ケケンタ (@lgshifbg-the-looper) on CodePen.

タブボタンを折り返したい場合は後述の「タブボタンが横並び＋タブボタンの折り返し付き」をご覧ください。

パターン②　タブボタンが縦並び

タブボタンを縦並びにして、コンテンツを右側に配置したタブ切り替え機能です。

See the Pen タブ（垂直方向） by ケケンタ (@lgshifbg-the-looper) on CodePen.

 レスポンシブ対応（タブとコンテンツを縦並びに）したいとき

#tab-vのCSSにflex-direction: column;を追加するだけでタブボタンとコンテンツが縦並びになります。

パターン③　タブボタンが横並び＋タブボタンの折り返し付き

タブボタンが横並び＋タブボタンを指定した個数で折り返せるパターンです。

See the Pen タブ（水平方向）複数行パターン by ケケンタ (@lgshifbg-the-looper) on CodePen.

 以下のCSSで、１行に表示するタブ数を制御しています。

#tab-h .tab-elem {
    /* calc((100% - ([タブの隙間×2]em * [表示タブ数])) / [表示タブ数]) */
    width: calc((100% - (1em * 4)) / 4);
    padding: 7px 0 7px 0;
    text-align: center;
    border: solid 2px #656766;
    color: #ffffff;
    border-radius: 10px 10px 0 0;
    background-color: #656766;
}

calcの計算式は「calc((100% – ([タブの隙間×2]em * [表示タブ数])) / [表示タブ数])」にそって値を当てはめればOKです。

例えば、タブ同士の隙間が0.5emのタブボタンを１行に３つ表示したいときは

calc((100% – (1.5em * 3)) / 3)

のようにします。

まとめ

以上がタブ切り替え機能３パターンのご紹介でした。

タブ切り替えはWeb制作でもときおり実装が求められます。

自分で実装しようとすると手間がかかる一方、既存のソースコードをコピペで使い回しても問題なくかつ効率的に実装ができます。

ケケンタ

この記事でご紹介したソースコードは自由にコピペしていただいてOKです！

ぜひご活用いただき、コーディングの効率化にお役立ていただければ何よりです。

それでは、最後までご覧いただきありがとうございました。

このブログではWeb制作やWordPress、PHPに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...

関連記事 – アニメーション –