HTMLでのカスタムタブの作成 – HTMLで始めるホームページ作成

HTMLでのカスタムタブの作成 – HTMLで始めるホームページ作成

ホームページを作成するとき、多くの場合、情報を整理し、ユーザーが簡単にアクセスできるようにするために、タブを使用したレイアウトが役立ちます。この記事では、HTMLとCSSを使用してカスタムタブを作成する方法を説明します。

1. タブの基本構造

まず、カスタムタブの基本的なHTML構造を作ります。以下のコードスニペットは、タブの基本的な構造を示しています。

  <div class="tabs">
    <ul class="tab-list">
      <li class="tab active">タブ1</li>
      <li class="tab">タブ2</li>
      <li class="tab">タブ3</li>
    </ul>
    <div class="tab-content">タブ1の内容</div>
    <div class="tab-content">タブ2の内容</div>
    <div class="tab-content">タブ3の内容</div>
  </div>
  

2. CSSでのスタイリング

さらに、タブとその内容をスタイリングするためにCSSを追加します。以下は基本的なスタイリングの例です。

  <style>
  .tabs {
    display: flex;
    flex-direction: column;
  }
  .tab-list {
    display: flex;
    list-style-type: none;
    padding: 0;
  }
  .tab {
    padding: 10px;
    cursor: pointer;
  }
  .tab.active {
    font-weight: bold;
  }
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
  }
  </style>
  

3. JavaScriptでのインタラクション

それに加えて、タブのクリックイベントを処理し、クリックされたタブに対応するコンテンツを表示するために、JavaScriptを使用します。

  <script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('.tab');
    const contents = document.querySelectorAll('.tab-content');

    tabs.forEach((tab, index) => {
      tab.addEventListener('click', function () {
        tabs.forEach(t => t.classList.remove('active'));
        contents.forEach(c => c.classList.remove('active'));

        tab.classList.add('active');
        contents[index].classList.add('active');
      });
    });
  });
  </script>
  

4. カスタムタブの利用例

例えば、このカスタムタブを利用することで、製品情報のセクション分けやFAQページの作成など、様々なケースで便利に使用できます。実際に試して、その有用性を検証してください。

良いデザインは良いビジネスです – IBM

このように、カスタムタブを追加することで、ユーザー体験を向上させることができます。もっと詳細な情報が必要な場合は、公式ドキュメント(外部リンク)を参照してください。