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

CSSとJavaScriptでタブUIを実装する方法【初心者向け解説】

CSSとJavaScriptを組み合わせれば、Webページにタブ切り替え機能を簡単に実装できます。タブを使うことで、限られたスペースに複数の情報を整理して表示でき、ユーザーにとって見やすいインターフェースを実現できます。

ここでは、試験情報を例に、クリックすると表示内容が切り替わるタブの作成方法を紹介します。

実装例

以下が完全なサンプルコードです。そのままHTMLファイルとして保存すれば動作します。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tab {
    overflow: hidden;
    border: 2px solid gray;
    background-color: #FFE4C4;
}
.tab button {
    background-color: inherit;
    float: left;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 15px;
}
.tab button:hover {
    background-color: gray;
}
.tab button.active {
    background-color: #ccc;
}
.demo2 {
    display: none;
    padding: 3px 12px;
}
</style>
</head>
<body>
<h2>試験案内</h2>
<p>以下は試験に関する情報です。</p>
<div class="tab">
<button class="demo" onclick="infofunc(event, 'dates')">試験日</button>
<button class="demo" onclick="infofunc(event, 'centre')">試験会場</button>
</div>
<div id="dates" class="demo2">
<h3>試験日</h3>
<p>試験日は3月25日に発表されます。</p>
</div>
<div id="centre" class="demo2">
<h3>試験会場</h3>
<p>試験会場は3月30日に発表されます。</p>
</div>
<script>
function infofunc(e, info) {
    var i, content, links;
    content = document.getElementsByClassName("demo2");
    for (i = 0; i < content.length; i++) {
        content[i].style.display = "none";
    }
    links = document.getElementsByClassName("demo");
    for (i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" active", "");
    }
    document.getElementById(info).style.display = "block";
    e.currentTarget.className += " active";
}
</script>
</body>
</html>

コードのポイント

  • HTML構造： div class="tab" の中にタブボタンを配置し、それぞれのボタンのonclick属性からJavaScript関数を呼び出します。
  • コンテンツ部分： 各タブに対応する内容は、class="demo2" を持つ個別のdivとして用意し、初期状態ではCSSのdisplay: none;で非表示にしています。
  • JavaScript処理： infofunc()関数は、まずすべてのコンテンツを非表示にし、すべてのボタンから「active」クラスを取り除きます。その後、クリックされたタブに対応するコンテンツだけを表示し、押されたボタンに「active」クラスを追加してハイライトします。
  • ホバー効果： :hoverセレクターにより、マウスカーソルを重ねたときにボタンの背景色が変化するようになっています。

実行結果

このコードをブラウザで開くと、まず次のような画面が表示されます。

CSSとJavaScriptでタブUIを実装する方法【初心者向け解説】

次に、「試験日」や「試験会場」など任意のタブをクリックすると、対応する情報だけが表示され、選択したタブボタンが強調表示されます。

CSSとJavaScriptでタブUIを実装する方法【初心者向け解説】

まとめ

このように、数行のJavaScriptとシンプルなCSSだけで、jQueryなどの外部ライブラリに頼らずタブ切り替えUIを作成できます。タブの数やデザインは自由に変更できるので、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を組み合わせると、クリックしたタブのコンテンツが画面全体に広がって表示される「フルページタブ」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みをわかりやすく解説します。 サンプルコード 以下は、HTML・CSS・JavaScriptだけで作成できるフルページタブの完全なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, i