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

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

Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。

実装のポイント

この機能は、以下の3つの要素で構成されています。

  • カラムレイアウト：float を使って各カラムを横並びに配置します
  • 切り替えボタン：アクティブ状態のスタイルを持つボタンを配置します
  • JavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えます

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        box-sizing: border-box;
    }
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    /* 左右に並ぶ2つの等幅カラムを作成 */
    .column {
        float: left;
        width: 50%;
        padding: 10px;
        color: white;
    }
    /* カラムの後のfloatを解除 */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    /* ボタンのスタイル */
    .btn {
        border: none;
        outline: none;
        padding: 12px 16px;
        background-color: #f1f1f1;
        cursor: pointer;
    }
    .btn:hover {
        background-color: #ddd;
    }
    .btn.active {
        background-color: #666;
        color: white;
    }
</style>
</head>
<body>
<h1>リスト・グリッドビューのサンプル</h1>
<h2>下のボタンをクリックして表示を切り替えてください</h2>
<div id="btnContainer">
<button class="btn" onclick="listView()">List</button>
<button class="btn active" onclick="gridView()">Grid</button>
</div>
<br />
<div class="row">
<div class="column" style="background-color:rgb(154, 9, 173);">
<h2>Column 1</h2>
</div>
<div class="column" style="background-color:rgb(113, 35, 216);">
<h2>Column 2</h2>
</div>
</div>
<div class="row">
<div class="column" style="background-color:rgb(19, 143, 85);">
<h2>Column 3</h2>
</div>
<div class="column" style="background-color:rgb(207, 69, 27);">
<h2>Column 4</h2>
</div>
</div>
<script>
    var elements = document.querySelectorAll(".column");
    function listView() {
        Array.from(elements).forEach(item => {
            item.style.width = "100%";
        });
        Array.from(document.querySelectorAll(".btn")).forEach((item, index) => {
            if (index === 0) item.classList.add("active");
            else item.classList.remove("active");
        });
    }
    function gridView() {
        Array.from(elements).forEach(item => {
            item.style.width = "50%";
        });
        Array.from(document.querySelectorAll(".btn")).forEach((item, index) => {
            if (index === 1) item.classList.add("active");
            else item.classList.remove("active");
        });
    }
</script>
</body>
</html>

コードの解説

CSSの役割

.column クラスに float: left; と width: 50% を指定することで、2つのカラムが横並びのグリッド状に配置されます。また、.row:after の clear: both; によってfloatを解除し、レイアウト崩れを防いでいます。ボタンには .btn.active スタイルを用意し、現在選択されている表示モードを視覚的に示します。

JavaScriptの役割

listView() 関数は、すべての .column 要素の幅を 100% に設定します。これにより、各カラムが縦に積み重なるリスト表示になります。gridView() 関数は逆に、幅を 50% に戻すことでグリッド表示へ切り替えます。同時に、classList.add() と classList.remove() を使って、押されたボタンに active クラスを付与し、もう一方からは削除することで、選択状態を切り替えています。

出力結果

上記のコードを実行すると、初期状態ではグリッド表示（2列レイアウト）で4つのカラムが表示されます。

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

「List」ボタンをクリックすると、すべてのカラムが幅100%になり、縦一列のリスト表示に切り替わります。

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

まとめ

このように、CSSのfloatレイアウトとJavaScriptによるクラス操作・スタイル変更を組み合わせるだけで、ライブラリに依存しないシンプルなリスト／グリッド切り替え機能を実装できます。より柔軟なレスポンシブ対応が必要な場合は、FlexboxやCSS Grid、classList.toggle() を活用するとさらに洗練された実装が可能です。

  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つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル