html タブ切り替え javascript

SEOに強いコンテンツ構成: JavaScriptで実装するシンプルタブ切り替え

説明

JavaScriptを使って、シンプルで見やすいタブ切り替えを実装する方法を解説します。HTMLとCSSの基礎知識があれば、簡単に導入できます。初心者にも分かりやすく、コピペで動くサンプルコード付きで解説します。

キーワード

html, タブ切り替え, javascript, タブメニュー, UI, フロントエンド, 初心者, 簡単, サンプルコード

1. はじめに: なぜタブ切り替え？

  • 情報を整理して見やすく表示
  • 省スペースで多くの情報を掲載可能
  • ユーザーにとって快適なUI/UXを実現

2. HTMLの構造

  • タブのリストをマークアップ (<ul>, <li>, <a>)
  • 各タブに対応するコンテンツエリアを準備 (<div>)
  • aria属性を使ってアクセシビリティを向上

サンプルコード:


<ul class="tab-menu">
  <li class="active"><a href="#tab1">タブ1</a></li>
  <li><a href="#tab2">タブ2</a></li>
  <li><a href="#tab3">タブ3</a></li>
</ul>

<div class="tab-content" id="tab1">
  <!-- タブ1の内容 -->
</div>

<div class="tab-content" id="tab2" style="display:none;">
  <!-- タブ2の内容 -->
</div>

<div class="tab-content" id="tab3" style="display:none;">
  <!-- タブ3の内容 -->
</div>

3. CSSでの見栄え調整

  • タブのリストを横並びに配置
  • アクティブなタブを視覚的に強調
  • コンテンツエリアの表示/非表示を切り替え

サンプルコード:


.tab-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tab-menu li {
  float: left;
}

.tab-menu li a {
  display: block;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}

.tab-menu li.active a {
  background-color: #fff;
  border-bottom-color: transparent;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}

4. JavaScriptで動的な切り替えを実装

  • タブをクリックした際のイベントリスナーを設定
  • クリックされたタブに対応するコンテンツを表示
  • それ以外のコンテンツは非表示に
  • アクティブなタブのスタイルを切り替え

サンプルコード:


const tabMenu = document.querySelector('.tab-menu');
const tabContents = document.querySelectorAll('.tab-content');

tabMenu.addEventListener('click', (event) => {
  event.preventDefault();

  const targetLink = event.target.closest('a');
  if (!targetLink) return;

  // 全てのタブとコンテンツを非アクティブに
  [...tabMenu.querySelectorAll('li')].forEach(li => li.classList.remove('active'));
  tabContents.forEach(content => content.style.display = 'none');

  // クリックされたタブとコンテンツをアクティブに
  const targetContentId = targetLink.getAttribute('href');
  document.querySelector(targetContentId).style.display = 'block';
  targetLink.parentElement.classList.add('active');
});

5. まとめ: シンプルなタブ切り替えでUI/UX向上

  • 本記事で紹介した方法で、簡単にタブ切り替えを実装できます。
  • ユーザーにとって分かりやすく、使いやすいウェブサイトを目指しましょう。
  • 更に詳しいカスタマイズ方法や応用例は、他の記事も参考にしてみてください。

関連情報

この記事に関するQ&A

質問 回答
タブの数を増やすにはどうすればいいですか？ HTMLでタブのリストとコンテンツエリアを追加し、JavaScriptでそれぞれの要素を取得して処理するように変更してください。
タブのデザインを変更するにはどうすればいいですか？ CSSで、タブのリストやコンテンツエリアのデザインを自由にカスタマイズできます。
JavaScriptのコードが動かない場合はどうすればいいですか？ ブラウザの開発者ツールのコンソールでエラーが出ていないか確認してください。JavaScriptコードがHTMLの要素よりも先に読み込まれていることを確認してください。

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