JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptでタブヘッダーを作成する方法をわかりやすく解説

CSSとJavaScriptを組み合わせることで、クリックすると表示内容が切り替わる「タブヘッダー」を簡単に作成できます。この記事では、実際に動作するサンプルコードを使いながら、タブUIの実装方法をステップごとに解説します。

完成イメージ

今回作成するのは、「日付」「時間」「会場」の3つのタブを持つ試合スケジュール画面です。各ボタンをクリックすると、対応するコンテンツだけが表示され、クリックされたボタンの背景色も変化します。

サンプルコード全体

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tablink {
    background-color: black;
    color: white;
    float: left;
    cursor: pointer;
    padding: 20px 12px;
    font-size: 15px;
    width: 33.3%;
}
.tablink:hover {
    background-color: black;
}
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}
#date {
    background-color: blue;
    border: 1px solid black;
}
#time {
    background-color: yellow;
    color: black;
    border: 1px solid black;
}
#venue {
    background-color: orange;
    border: 1px solid black;
}
</style>
</head>
<body>
<h2>Match Schedule</h2>
<div id="date" class="tabcontent">
    <h1>Date</h1>
    <p>Match will held on 2nd April.</p>
</div>
<div id="time" class="tabcontent">
    <h1>Time</h1>
    <p>Begins: 9AM</p>
</div>
<div id="venue" class="tabcontent">
    <h1>Venue</h1>
    <p>MCG, Australia</p>
</div>
<button class="tablink" onclick="demo('date', this, 'red')" id="defaultOpen">Date</button>
<button class="tablink" onclick="demo('time', this, 'green')">Time</button>
<button class="tablink" onclick="demo('venue', this, 'blue')">Venue</button>
<script>
function demo(match, e, color) {
    var i, content, links;
    content = document.getElementsByClassName("tabcontent");
    var len1 = content.length;
    for (i = 0; i < len1; i++) {
        content[i].style.display = "none";
    }
    links = document.getElementsByClassName("tablink");
    var len2 = links.length;
    for (i = 0; i < len2; i++) {
        links[i].style.backgroundColor = "";
    }
    document.getElementById(match).style.display = "block";
    e.style.backgroundColor = color;
}
document.getElementById("defaultOpen").click();
</script>
</body>
</html>

コードのポイント解説

1. タブボタンのスタイル（.tablink）

3つのボタンを float: left; と width: 33.3% を使って横並びに配置しています。cursor: pointer; を指定することで、マウスオーバー時にポインタが手の形になり、クリックできることが直感的に伝わります。

2. タブコンテンツのスタイル（.tabcontent）

すべてのコンテンツ領域は初期状態で display: none; になっています。これにより、JavaScriptで制御されるまで何も表示されません。

3. JavaScriptによる切り替え処理（demo関数）

demo() 関数は次の手順で動作します。

  • まず、すべての .tabcontent 要素を非表示にします。
  • 次に、すべてのタブボタンの背景色をリセットします。
  • そして、引数で渡されたIDに一致するコンテンツだけを display: block; で表示します。
  • 最後に、クリックされたボタン自身の背景色を、第3引数で指定された色に変更します。

4. 初期状態の設定

ページ読み込み時に document.getElementById("defaultOpen").click(); を実行することで、「Date」タブが自動的に開いた状態になります。これにより、ユーザーが最初にアクセスしたときにもコンテンツが表示されます。

実行結果

上記のコードを実行すると、黒背景の3つのタブボタンと、その下に表示されるコンテンツが確認できます。初期状態では「Date」タブがアクティブになっています。

続いて、「Time」や「Venue」など別のタブをクリックしてみましょう。表示されるコンテンツが切り替わり、クリックしたボタンの背景色が赤・緑・青へと変化することがわかります。

まとめ

CSSだけでタブの見た目を整え、JavaScriptの getElementsByClassName() と getElementById() を使って表示・非表示を切り替えるのが、タブヘッダー実装の基本です。この仕組みを理解すれば、商品紹介ページやFAQセクションなど、さまざまな場面で応用できます。ぜひ自分のプロジェクトでも試してみてください。

  1. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

  2. CSSとJavaScriptで作る！レスポンシブスライドショーの実装方法を徹底解説

    CSSとJavaScriptを組み合わせることで、画像を切り替えて表示できるレスポンシブなスライドショーを簡単に実装できます。本記事では、「前へ・次へ」のナビゲーションボタンとドットインジケーター付きのスライドショーを、実際のコード例とともにわかりやすく解説します。 実装例：完全なコード 以下は、CSSとJavaScriptを使用してレスポンシブスライドショーを作成するサンプルコードです。そのままHTMLファイルに保存すれば、すぐに動作を確認できます。 <!DOCTYPE html> <html> <head> <meta name="v