HTMLでのタブメニューの作成 – HTMLで始めるホームページ作成

HTMLでのタブメニューの作成 – HTMLで始めるホームページ作成

ホームページ作成において、タブメニューは非常に便利です。タブメニューを使うことで、ユーザーが簡単にナビゲーションできるようになります。さらに、ページの情報を整理整頓するのにも役立ちます。以下では、HTMLによるタブメニューの作り方をご紹介します。

基本的なHTML構造

まず、タブメニューを作成するための基本的なHTML構造を確認しましょう。以下のコードを参考にしてください。

<section class="tabs" role="group">
  <ul class="tab-menu">
    <li><a href="#tab1" rel="nofollow" target="_blank" title="タブ1" aria-label="タブ1">タブ1</a></li>
    <li><a href="#tab2" rel="nofollow" target="_blank" title="タブ2" aria-label="タブ2">タブ2</a></li>
    <li><a href="#tab3" rel="nofollow" target="_blank" title="タブ3" aria-label="タブ3">タブ3</a></li>
  </ul>
  <div id="tab1" class="tab-content">
    <p>タブ1のコンテンツ</p>
  </div>
  <div id="tab2" class="tab-content">
    <p>タブ2のコンテンツ</p>
  </div>
  <div id="tab3" class="tab-content">
    <p>タブ3のコンテンツ</p>
  </div>
</section>

この基本的な構造を使って、タブメニューを作成していきます。

タブメニューのスタイリング

次に、タブメニューをスタイリングするためのCSSについて説明します。タブメニューが見やすく、使いやすくなるようにスタイリングすることが重要です。

デザインはユーザー体験を向上させる鍵です – 有名なデザイン理論から
タブのスタイル

タブメニューのスタイルを設定します。次のコードを使って、タブメニューの外観と操作性を向上させましょう。

.tab-menu {
  list-style-type: none;
  padding: 0;
}
.tab-menu li {
  display: inline-block;
  margin-right: 10px;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
タブの機能を追加

最後に、タブの機能を追加するJavaScriptの簡単な例をご紹介します。JavaScriptを利用して、クリックしたタブのコンテンツを表示させるようにします。

document.addEventListener('DOMContentLoaded', function() {
  var tabs = document.querySelectorAll('.tab-menu a');
  tabs.forEach(function(tab) {
    tab.addEventListener('click', function(event) {
      event.preventDefault();
      document.querySelectorAll('.tab-content').forEach(function(content) {
        content.classList.remove('active');
      });
      var target = document.querySelector(tab.getAttribute('href'));
      target.classList.add('active');
    });
  });
});

以上で、HTMLで簡単なタブメニューを作成する方法をご紹介しました。これを応用すれば、さらに複雑なタブメニューも作成できます。さらに詳しい情報(外部リンク)を確認して、あなたのプロジェクトに合わせたタブメニューを作成してみてください。

コメントを残す