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

CSSとJavaScriptでフルページタブを作成する方法【サンプルコード付き】

CSSとJavaScriptを組み合わせると、クリックしたタブのコンテンツが画面全体に広がって表示される「フルページタブ」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みをわかりやすく解説します。

サンプルコード

以下は、HTML・CSS・JavaScriptだけで作成できるフルページタブの完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body, html {
    height: 100%;
    margin: 0;
}
.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 15px;
    width:33.33%;
}
.tablink:hover {
    background-color: black;
}
.tabcontent {
    color: white;
    display: none;
    padding: 100px 20px;
    height: 100%;
}
#Home {background-color: blue;}
#About {background-color: gray;}
#Contact {background-color: orange;}
</style>
</head>
<body>
<button class="tablink" onclick="demo('Home', this, 'blue')">Home</button>
<button class="tablink" onclick="demo('About', this, 'gray')" id="clickme">About</button>
<button class="tablink" onclick="demo('Contact', this, 'orange')">ContactUs</button>
<div id="Home" class="tabcontent">
    <h3>Home</h3>
    <p>This is the Home page.</p>
</div>
<div id="About" class="tabcontent">
    <h3>About</h3>
    <p>This is information about the company.</p>
</div>
<div id="Contact" class="tabcontent">
    <h3>ContactUs</h3>
    <p>Contact us for any feedback, query and complaints.</p>
</div>
<script>
function demo(pageName,elmnt,color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(pageName).style.display = "block";
    elmnt.style.backgroundColor = color;
}
document.getElementById("clickme").click();
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、まず「About」タブが選択された状態で灰色のコンテンツが全画面に表示されます。

CSSとJavaScriptでフルページタブを作成する方法【サンプルコード付き】

続いて「ContactUs」タブをクリックすると、以下のようにオレンジ色のお問い合わせページへと全画面が切り替わります。

CSSとJavaScriptでフルページタブを作成する方法【サンプルコード付き】

コードのポイント

  • .tablinkクラス：各タブボタンに適用するスタイルです。float: leftで横並びに配置し、width: 33.33%を指定することで3つのボタンが画面幅いっぱいに均等に並びます。ホバー時には背景色が黒に変化します。
  • .tabcontentクラス：タブの中身となるコンテンツ領域です。初期状態ではdisplay: noneで非表示になっており、高さはheight: 100%で画面全体に広がります。
  • demo()関数：タブがクリックされたときに呼び出される処理です。まずすべてのコンテンツを非表示にし、各ボタンの背景色をリセットしたうえで、指定されたIDのコンテンツだけをdisplay: blockで表示します。同時に、クリックされたボタンの背景色も引数で渡された色に更新されます。
  • 初期表示の設定：document.getElementById("clickme").click()により、ページ読み込み時に「About」タブを自動的にクリックしています。これにより、最初から特定のタブを開いた状態にできます。

このように、CSSでのレイアウト制御とJavaScriptでの表示切替を組み合わせるだけで、外部ライブラリに頼らずフルページタブを実現できます。タブの数や配色は自由に変更できるので、ぜひ自分のサイトに合わせてカスタマイズしてみてください。

  1. CSSとJavaScriptで作る名言スライドショー！前へ・次へボタン付きの実装方法を解説

    CSSとJavaScriptを組み合わせると、名言や引用文を順番に切り替えて表示できるスライドショーを手軽に作成できます。本記事では、「前へ」「次へ」ボタンとドット型ナビゲーションを備えた名言スライドショーの具体的な実装例を、コード付きでわかりやすく解説します。 実装例：完全なサンプルコード 以下のコードをそのままHTMLファイルとして保存すれば、ブラウザですぐに動作を確認できます。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=dev

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル