【JavaScript】ライブラリを使わない「タブメニュー」の作り方！【シンプル】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではシンプルな「タブメニュー」の作り方を解説します！Webサイト制作で頻出なデザインなので、サクッと作れるようにしておくといいでしょう！

作り方はたくさんありますが、今回はできるだけ「シンプル」かつ「実践的」にします。細かいところは各自で機能を追加したりデザインを変えたりしてみてください。かなり有益なはずです。

「jQuery」などのライブラリは使わず、ただの「JavaScript」で作っていきます！バニラJSとも呼ばれるやつです。

また、下の動画でも「タブメニュー」の作り方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは、内容へ入ります！

「タブメニュー」とは何か？

このような「タブ」と呼ばれるボタンを押すと、表示内容が切り替わるようなメニューのことを指します！

よく見るやつだね！

「タブメニュー」の作り方！

それでは「タブメニュー」の作り方！をまとめますね。

わーい！

コード！

<div class="container">
    <div class="tabs">
        <button class="active" data-tab="skill">スキル</button>
        <button data-tab="career">経歴</button>
        <button data-tab="achievement">実績</button>
    </div>
    <div class="tab-content active" id="skill">スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル スキル  </div>
    <div class="tab-content" id="career">経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 経歴 </div>
    <div class="tab-content" id="achievement">実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 実績 </div>
</div>

@charset "utf-8";

html {
    font-size: 16px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 700px;
    margin: 130px auto;
}
button {
    all: unset;
    color: black;
    padding: 8px;
    font-size: 50px;
    border-radius: 4px 4px 0 0;
}
button.active {
    color: white;
    background-color: black;
}
.tab-content {
    font-size: 30px;
    background-color: black;
    color: white;
    padding: 8px;
    display: none;
}
.tab-content.active {
    display: block;
}

let tabs = document.querySelectorAll('button');
let contents = document.querySelectorAll('.tab-content');

tabs.forEach( (tab) => {
    tab.addEventListener('click', () => {
        tabs.forEach( (tab) => { 
            tab.classList.remove('active');
        } );
        tab.classList.add('active');
        
        contents.forEach( (content) => { 
            content.classList.remove('active'); 
        } );
        let target = document.getElementById(tab.dataset.tab);
        target.classList.add('active');
    });
} );

こんな感じで基本的な機能は実装できると思います！

とてもシンプルなタブメニューになりますが、ここからデザインを変更してリッチにしたり、自分好みに変更を加えてみてください！

まとめ！

「タブメニュー」は頻出のデザインですので、ここでサクッと作れるようにしておきましょう！！

忘れたらまたこの記事に戻ってきて、何度でも読み返してみてください！

また、下の動画でも「タブメニュー」の作り方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

では、また！