html タブ切り替えサンプル

HTMLタブ切り替え：シンプルで実用的な実装サンプルと解説

このページでは、HTML、CSS、JavaScriptを使ったタブ切り替えの実装方法を、初心者の方にも理解しやすいように解説します。コピペで使えるサンプルコード付きなので、すぐに自分のサイトに導入できます。

タブ切り替えとは？

タブ切り替えUIは、複数のコンテンツを限られたスペースに効率的に表示する方法です。ウェブサイトやアプリケーションで広く利用されています。

タブ切り替えUIのメリット

情報を整理して表示できるため、ユーザーが見やすく理解しやすい
省スペースで多くのコンテンツを表示できるため、ページの縦長化を防ぐ
ユーザーが能動的に情報を選択できるため、操作性を向上させる

よくある使用例

商品情報：異なるサイズや色の商品情報を切り替えて表示
FAQ：カテゴリーごとに質問と回答を分類して表示
料金プラン：複数のプランを比較しやすいように表示

HTMLの基本構造

まずは、タブ切り替えのHTMLの基本構造を見ていきましょう。ここでは、3つのタブを持つシンプルな例を挙げます。


<ul class="tab-list">
  <li class="tab active">タブ1</li>
  <li class="tab">タブ2</li>
  <li class="tab">タブ3</li>
</ul>

<div class="content-area">
  <div id="tab1-content" class="content active">
    <p>タブ1の内容です。</p>
  </div>
  <div id="tab2-content" class="content">
    <p>タブ2の内容です。</p>
  </div>
  <div id="tab3-content" class="content">
    <p>タブ3の内容です。</p>
  </div>
</div>

HTMLのマークアップ解説

<ul>要素と<li>要素を使ってタブのリストを作成します。
<div class="content-area">内に、各タブに対応するコンテンツを配置します。
タブとコンテンツは、id属性を使って関連付けます。（例：タブ1とtab1-content）
最初のタブとコンテンツには、activeクラスを付けて初期表示を設定します。

分かりやすいコードの書き方、コメントの重要性

HTMLを書く際には、後から見て理解しやすいように、適切なインデントやコメントを入れるようにしましょう。特に、タブとコンテンツの関連付けが明確になるようにコメントを入れることをおすすめします。

CSSによるデザイン

CSSを使って、タブのデザインを自由にカスタマイズできます。ここでは、シンプルなタブデザインの例を紹介します。


<style>
.tab-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  overflow: hidden;
}

.tab {
  float: left;
  border: 1px solid #ccc;
  padding: 10px 20px;
  cursor: pointer;
}

.tab.active {
  background-color: #eee;
  border-bottom-color: transparent;
}

.content-area {
  clear: both;
  border: 1px solid #ccc;
  padding: 20px;
}

.content {
  display: none;
}

.content.active {
  display: block;
}
</style>

CSSの記述例解説

.tab-list：タブのリスト全体のスタイルを設定します。ここでは、リストの装飾を消し、横並びに配置しています。
.tab：個々のタブのスタイルを設定します。ここでは、枠線、パディング、カーソルなどを指定しています。
.tab.active：アクティブなタブのスタイルを設定します。ここでは、背景色を変え、下線を取り除いています。
.content-area：コンテンツエリア全体のスタイルを設定します。ここでは、枠線とパディングを指定しています。
.content：各コンテンツのスタイルを設定します。ここでは、初期状態では非表示にしています。
.content.active：アクティブなコンテンツのスタイルを設定します。ここでは、表示するようにしています。

レスポンシブ対応

スマートフォンなどの小さな画面でも見やすくするために、メディアクエリを使ってレスポンシブ対応を行いましょう。例えば、画面幅が狭い場合はタブを縦並びにするなどの調整が考えられます。


@media screen and (max-width: 768px) {
  .tab-list {
    display: block;
  }

  .tab {
    float: none;
    width: 100%;
    margin-bottom: 10px;
  }
}

JavaScriptで動作を追加

JavaScriptを使って、タブのクリックイベントを処理し、コンテンツの表示切り替えを行います。


<script>
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // アクティブなタブとコンテンツのクラスを削除
    document.querySelector('.tab.active').classList.remove('active');
    document.querySelector('.content.active').classList.remove('active');

    // クリックされたタブとコンテンツにactiveクラスを追加
    tab.classList.add('active');
    document.getElementById(tab.textContent + '-content').classList.add('active');
  });
});
</script>

JavaScriptのコード解説

querySelectorAll()を使って、全てのタブとコンテンツを取得します。
forEach()を使って、各タブにクリックイベントを設定します。
クリックされたタブのテキストコンテンツを取得し、対応するコンテンツのIDを特定します。
classList.add()とclassList.remove()を使って、アクティブなタブとコンテンツを切り替えます。

スムーズなアニメーションの実装

JavaScriptのアニメーションライブラリやCSSのトランジションを使って、コンテンツの表示切り替えにスムーズなアニメーションを追加できます。これにより、ユーザーエクスペリエンスを向上させることができます。詳細については、各ライブラリやCSSのドキュメントを参照してください。

まとめ

HTML、CSS、JavaScriptを使って、基本的なタブ切り替えを実装する方法を紹介しました。サンプルコードを参考に、自由にカスタマイズして活用してください。

よくある質問

タブの数を増やすには？

HTMLで<li class="tab">要素と、対応する<div class="content">要素を追加します。JavaScriptのコードは、要素のクラス名に基づいて動作するため、特に変更は必要ありません。

デフォルトで表示するタブを変更するには？

HTMLで、デフォルトで表示したいタブとコンテンツにactiveクラスを設定します。他のタブとコンテンツからはactiveクラスを削除してください。

アニメーションの速度を調整するには？

CSSのtransitionプロパティでアニメーションの速度を調整できます。例えば、transition: all 0.3s ease;とすると、0.3秒かけてスムーズにアニメーションします。値を変更することで速度を調整できます。

その他の参考記事:タブ切り替え jquery