切り替え機能がついた「タブメニュー」の作り方【コピペのみ】

切り替え機能がついた「タブメニュー」の作り方をお伝えします。

この方法は、ホームページのスペースを有効に活用できるというメリットがあります。タブを切り替えることで、同じスペースで、たくさんの情報を見れるからです。

ここでは、タブの色を変える方法やタブの数を増やす方法など、カスタマイズ方法もお伝えするので、ぜひ活用してくださいね。

■ このようなタブメニューが完成します！

タブをクリックすると、枠の中のコンテンツが切り替わります。
ここでは、このようなタブメニューを作る方法をお伝えします。

■ 切り替え機能がついた「タブメニュー」の作り方の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：タブメニューを表示したい箇所に、下記のソースを入れる。

<div class="tab-menu">
    <ul class="tabs">
        <li data-tab="tab-1" class="active">タブ1</li>
        <li data-tab="tab-2">タブ2</li>
        <li data-tab="tab-3">タブ3</li>
    </ul>
    <div class="tab-content active" id="tab-1">
        <p>タブ1のコンテンツ</p>
    </div>
    <div class="tab-content" id="tab-2">
        <p>タブ2のコンテンツ</p>
    </div>
    <div class="tab-content" id="tab-3">
        <p>タブ3のコンテンツ</p>
    </div>
</div>

tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            if (this.getAttribute('data-tab') !== activeTab) {
                document.querySelector(`#${activeTab}`).classList.remove('active');
                document.querySelector(`.tabs li[data-tab="${activeTab}"]`).classList.remove('active');

activeTab = this.getAttribute('data-tab');
                this.classList.add('active');
                document.getElementById(activeTab).classList.add('active');
            }
        });
    });
});
</script>

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、HTMLファイルに貼り付けてください。

タブメニューを表示したい箇所に、上記のソースを入れます。

なお、タブの文字（タブ1やタブ2）は自由に変更することができますし、タブの中のコンテンツ（タブ1のコンテンツなど）も、自由に変更することができますよ。

手順３：タブをクリックして、タブが切り替わることを確認する。

ホームページの表示を確認して、下記のような「タブメニュー」が表示されていることを確認してください。

また、タブをクリックして、タブが正常に切り替わることも確認できれば、作業は完了です。

■ 【カスタマイズ方法】タブメニューの色を変更する方法

タブメニューの色は、CSSファイル（style.css）に入れた記述の中の、「tabs li」の中にある「background-color: #dee6fc;」の箇所と、「tabs li.active」の中にある「background-color: #ffffff;」の箇所で、タブメニューの色を指定しています。

そのため、この箇所を、たとえば「background-color: #2ecc71;」などに変更することで、タブの色を変えることができますよ。

■ 【カスタマイズ方法】タブの数を増やす方法

タブの数を増やすには、HTMLファイルに入れた記述の中で、下記のように「タブ4」を増やすだけです。

<div class="tab-content" id="tab-3">
<p>タブ3のコンテンツ</p>
</div>
　　↓　↓　↓　↓　↓
<div class="tab-content" id="tab-3">
<p>タブ3のコンテンツ</p>
</div>
<div class="tab-content" id="tab-4">
<p>タブ4のコンテンツ</p>
</div>

こうすることで、タブの数を増やすことができます。

なお、「タブ3」の箇所をコピーして使うと、分かりやすいと思いますよ。
（「tab-4」に変更するのを忘れないようにしてくださいね）