HTMLとCSSでおしゃれなタブメニューを作る方法

Webサイトでよく見かける「タブメニュー」。複数のコンテンツをコンパクトに表示し、ユーザーの利便性を高める便利なUIパーツです。この記事では、JavaScriptを使わず、HTMLとCSSだけで動作するシンプルなタブメニューの作り方を丁寧に解説します。Web制作初心者の方でもすぐに取り入れられるよう、サンプルコード付きでわかりやすく紹介しますので、ぜひ一緒に作ってみましょう！

タブメニューとは？基本の考え方を知ろう

タブメニューは、見出し（タブ）をクリックすることで、それに対応するコンテンツが切り替わるインターフェースです。主に以下のような場面で使われます。

  • 商品紹介ページでの仕様・レビュー・Q&A切り替え
  • 管理画面でのメニュー切り替え
  • プロフィールや設定画面など、情報量が多いページでの情報整理

タブメニューを使うことで、ページを分けずにコンパクトに情報を表示でき、ユーザーにとっても見やすく、操作しやすいUIを提供できます。

HTMLでタブメニューの骨組みを作る

まずはHTMLで基本となる構造を記述しましょう。以下がシンプルなタブメニューのマークアップ例です。

<div class="tab-container">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1">タブ1</label>

  <input type="radio" id="tab2" name="tab">
  <label for="tab2">タブ2</label>

  <input type="radio" id="tab3" name="tab">
  <label for="tab3">タブ3</label>

  <div class="tab-content content1">
    <p>これはタブ1のコンテンツです。</p>
  </div>
  <div class="tab-content content2">
    <p>これはタブ2のコンテンツです。</p>
  </div>
  <div class="tab-content content3">
    <p>これはタブ3のコンテンツです。</p>
  </div>
</div>

この構造では、input type="radio"を利用して、JavaScriptなしで選択状態を切り替える工夫をしています。label要素がタブの役割を果たし、それに対応するコンテンツを後述するCSSで制御します。

CSSでタブのデザインと切り替え機能を実装する

次に、上記HTMLにスタイルと表示制御を加えるCSSを書いていきます。

.tab-container {
  width: 80%;
  margin: 0 auto;
  font-family: sans-serif;
}

.tab-container input[type="radio"] {
  display: none;
}

.tab-container label {
  display: inline-block;
  padding: 10px 20px;
  margin-right: -5px;
  cursor: pointer;
  background-color: #eee;
  border: 1px solid #ccc;
  border-bottom: none;
  transition: background-color 0.3s;
}

.tab-container label:hover {
  background-color: #ddd;
}

.tab-content {
  border: 1px solid #ccc;
  padding: 20px;
  display: none;
  background-color: #f9f9f9;
}

#tab1:checked ~ .content1,
#tab2:checked ~ .content2,
#tab3:checked ~ .content3 {
  display: block;
}

#tab1:checked ~ label[for="tab1"],
#tab2:checked ~ label[for="tab2"],
#tab3:checked ~ label[for="tab3"] {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

このCSSのポイントは以下の通りです。

  • display: noneで全てのタブ内容を非表示にし、選択されたタブに応じてdisplay: blockで表示を切り替える
  • labelにスタイルを与えることで、見た目もタブらしく仕上げる
  • 選択中のタブには背景色を変えて、選択状態が明確になるようにしている

サンプルコードをそのまま使える形で紹介

以下にHTMLとCSSを統合した完全なコードを掲載します。コピー＆ペーストでそのまま使える形です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSだけで作るタブメニュー</title>
  <style>
    .tab-container {
      width: 80%;
      margin: 0 auto;
      font-family: sans-serif;
    }
    .tab-container input[type="radio"] {
      display: none;
    }
    .tab-container label {
      display: inline-block;
      padding: 10px 20px;
      margin-right: -5px;
      cursor: pointer;
      background-color: #eee;
      border: 1px solid #ccc;
      border-bottom: none;
      transition: background-color 0.3s;
    }
    .tab-container label:hover {
      background-color: #ddd;
    }
    .tab-content {
      border: 1px solid #ccc;
      padding: 20px;
      display: none;
      background-color: #f9f9f9;
    }
    #tab1:checked ~ .content1,
    #tab2:checked ~ .content2,
    #tab3:checked ~ .content3 {
      display: block;
    }
    #tab1:checked ~ label[for="tab1"],
    #tab2:checked ~ label[for="tab2"],
    #tab3:checked ~ label[for="tab3"] {
      background-color: #fff;
      border-bottom: 1px solid #fff;
    }
  </style>
</head>
<body>

<div class="tab-container">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1">タブ1</label>

  <input type="radio" id="tab2" name="tab">
  <label for="tab2">タブ2</label>

  <input type="radio" id="tab3" name="tab">
  <label for="tab3">タブ3</label>

  <div class="tab-content content1">
    <p>これはタブ1のコンテンツです。</p>
  </div>
  <div class="tab-content content2">
    <p>これはタブ2のコンテンツです。</p>
  </div>
  <div class="tab-content content3">
    <p>これはタブ3のコンテンツです。</p>
  </div>
</div>

</body>
</html>

タブメニューを活用する際の注意点

CSSだけで動作するタブメニューは便利ですが、いくつかの注意点があります。

  • アクセシビリティの配慮：キーボード操作への対応やARIA属性を追加すると、よりアクセシブルになります。
  • タブの数が多すぎる場合は非推奨：視認性が落ちるので、5つ以上のタブが必要な場合は別のUIパターンも検討しましょう。
  • JavaScriptによる強化：CSSだけでは制御が難しい「アニメーション付き切り替え」や「URLでのタブ状態保持」などはJavaScriptを活用しましょう。

まとめ：CSSでできることを活かして、快適なUIを作ろう！

HTMLとCSSだけでも、ここまで機能的なタブメニューが実現できます。複雑なスクリプトを使わなくても、ユーザーにとって操作しやすく、見やすいコンテンツを提供できます。ぜひ今回のサンプルを活用して、あなたのWebサイトでも便利なタブメニューを取り入れてみてください。

タイトルとURLをコピーしました