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

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

CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。

実装のポイント

  • クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。
  • 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。
  • 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        padding: 1%;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .left, .right, .center {
        float: left;
        width: 33%;
        color: white;
        padding: 10px;
        height: 200px;
        text-align: center;
    }
    .left {
        background-color: tomato;
    }
    .right {
        background-color: teal;
    }
    .center {
        background-color: rgb(166, 71, 255);
    }
    .container:after {
        clear: both;
    }
    .closebtn {
        float: right;
        color: white;
        font-size: 35px;
        cursor: pointer;
    }
    .closebtn:hover {
        transform: scale(1.5);
    }
    .containerTab {
        padding: 20px;
        width: 99%;
        color: white;
    }
</style>
</head>
<body>
<h1 style="text-align: center;">3カラムグリッドのサンプル</h1>
<div class="container">
<div class="left" onclick="openTab('tab1');">
<h1>左側のテキスト</h1>
</div>
<div class="center" onclick="openTab('tab2');">
<h1>中央のテキスト</h1>
</div>
<div class="right" onclick="openTab('tab3');">
<h1>右側のテキスト</h1>
</div>
</div>
<div id="tab1" class="containerTab" style="display:none;background:tomato">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>タブ 1</h2>
<p>
ここにタブ1の内容が入ります。クリックして展開されたパネルには、テキストや画像など自由にコンテンツを配置できます。
</p>
</div>
<div id="tab2" class="containerTab" style="display:none;background:rgb(166, 71, 255)">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>タブ 2</h2>
<p>
ここにタブ2の内容が入ります。クリックして展開されたパネルには、テキストや画像など自由にコンテンツを配置できます。
</p>
</div>
<div id="tab3" class="containerTab" style="display:none;background:teal">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>タブ 3</h2>
<p>
ここにタブ3の内容が入ります。クリックして展開されたパネルには、テキストや画像など自由にコンテンツを配置できます。
</p>
</div>
<script>
    function openTab(tabName) {
        var i, x;
        x = document.querySelectorAll(".containerTab");
        Array.from(x).forEach(item => {
            item.style.display = "none";
        });
        document.getElementById(tabName).style.display = "block";
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、最初に次のような3カラムのグリッドが表示されます。

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

続いて、いずれかのカラムをクリックすると、そのカラムの色に合わせた詳細パネルがグリッドの下に展開されます。

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

コードの解説

HTMLの構造

「left」「center」「right」の3つのdivがグリッドのカラムに相当し、それぞれにopenTab('tab1')のような関数呼び出しが組み込まれています。一方、tab1〜tab3のパネルは初期状態でdisplay:noneが指定されており、画面には表示されません。

CSSのスタイリング

各カラムはfloat: leftとwidth: 33%によって横一列に並べられ、トマト・紫・ティールの3色で視覚的に区別されています。閉じるボタンはホバー時にtransform: scale(1.5)で拡大するため、クリックできることが直感的に伝わります。

JavaScriptの動作

openTab()関数では、まずquerySelectorAll('.containerTab')ですべてのタブを取得し、一度すべて非表示にします。その後、引数として渡されたIDのタブだけをdisplay: blockで表示します。この処理により、複数のパネルが同時に開くことを防ぎ、常に1つのタブのみが展開される仕組みを実現しています。

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

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

  2. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード