ケケンタタブ切り替え機能を作りたいけどやり方が分からない……
ケケンタ横並びじゃなくて「縦並び」のタブ切り替えができるようにしたい……
今回はこのようなお悩みをお持ちの方へ向けて
JavaScriptで作るタブ切り替え機能
【３パターン】
をご紹介します。
- タブボタンが横並びのタブ切り替え（もっとも一般的なもの）
- タブボタンが縦並びのタブ切り替え
- タブボタンが横並びのタブ切り替え＋タブボタンの折り返し付き
Web制作でよく利用されるタブ切り替え機能のメリットは、ページ遷移をしなくてもユーザーが見たい情報を簡単に切り替えられることです。
しかし、タブ切り替え機能をいちから自分で実装するのは手間がかかる一方で、ソースコードを使い回せば簡単に実装可能です。
ケケンタこの記事でご紹介するソースコードはコピペOKです！
ぜひコーディングの際にご活用いただき、作業効率をアップしていただければと思います。
【ソースコード】タブ切り替え機能
パターン① タブボタンが横並び（もっとも一般的なタブ切り替え）
もっとも一般的な形のタブ切り替え機能です。
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;
}
例えば、タブ同士の隙間が0.5emのタブボタンを１行に３つ表示したいときは
calc((100% – (1.5em * 3)) / 3)
のようにします。
まとめ
以上がタブ切り替え機能３パターンのご紹介でした。
タブ切り替えはWeb制作でもときおり実装が求められます。
自分で実装しようとすると手間がかかる一方、既存のソースコードをコピペで使い回しても問題なくかつ効率的に実装ができます。
ケケンタこの記事でご紹介したソースコードは自由にコピペしていただいてOKです！
ぜひご活用いただき、コーディングの効率化にお役立ていただければ何よりです。
それでは、最後までご覧いただきありがとうございました。
このブログではWeb制作やWordPress、PHPに関する情報を発信しています。
御興味のある方はほかの記事もご覧いただけるとうれしいです！
コメント