HTMLでのインタラクティブタブの作成 – HTMLで始めるホームページ作成

HTMLでのインタラクティブタブの作成 – HTMLで始めるホームページ作成

ウェブデザインの一環として、インタラクティブなタブを作成する方法は非常に有用です。さらに、ユーザーエクスペリエンスを向上させるためのキーとなります。

このガイドでは、簡単なHTMLと少しのJavaScriptを使ってインタラクティブタブを作成する方法を説明します。まず、基本的なHTML構造から始めましょう。

基本的なHTML構造

以下のコードは、タブの基本的なHTML構造を示しています。各タブのタイトルとコンテンツ部分を定義します。


<div class="tabs">
    <ul class="tab-titles">
        <li>タブ1</li>
        <li>タブ2</li>
        <li>タブ3</li>
    </ul>
    <div class="tab-content">
        <div>タブ1のコンテンツ</div>
        <div>タブ2のコンテンツ</div>
        <div>タブ3のコンテンツ</div>
    </div>
</div>
    

次に、JavaScriptを使用してタブの機能を追加します。

JavaScriptでのタブ機能の追加

以下のコードを使用して、タブの切り替えを実装できます。


document.addEventListener('DOMContentLoaded', function() {
    var tabs = document.querySelectorAll('.tab-titles li');
    var contents = document.querySelectorAll('.tab-content div');
    tabs.forEach(function(tab, index) {
        tab.addEventListener('click', function() {
            tabs.forEach(function(t) { t.classList.remove('active'); });
            contents.forEach(function(c) { c.style.display = 'none'; });
            tab.classList.add('active');
            contents[index].style.display = 'block';
        });
    });
});
    

上記のスクリプトでは、ユーザーがタブをクリックしたときに対応するコンテンツを表示するように設定されています。さらに、アクティブなタブにはクラスを追加してスタイルを適用することができます。

スタイリングの追加

最後に、CSSを使ってタブの見た目を向上させましょう。


<style>
.tabs {
    display: flex;
    flex-direction: column;
}
.tab-titles {
    display: flex;
    list-style: none;
    padding: 0;
}
.tab-titles li {
    padding: 10px;
    cursor: pointer;
    border: 1px solid #ccc;
}
.tab-titles li.active {
    background: #eee;
}
.tab-content div {
    display: none;
}
.tab-content div:first-child {
    display: block;
}
</style>
    

これで、インタラクティブなタブの作成が完了です。さらに、CSSによってタブがスタイリッシュに表示されます。

“インタラクティブなタブはユーザーエクスペリエンスを向上させる素晴らしい方法です。 – Webデザインの専門家

まとめ

このガイドでは、HTMLおよび少しのJavaScriptとCSSを使用してインタラクティブなタブを作成する方法を説明しました。さらに、これらのタブはユーザーインターフェースの重要な要素となり得ます。詳細な情報や他の実装例については、こちら(外部リンク)を参照してください。

コメントを残す