CSSとJavaScriptでクラス名に基づいてDIV要素をフィルタリングする方法

Webページでは、ボタンの操作に応じて特定のカテゴリの要素だけを表示したり非表示にしたりする「フィルタリング機能」がよく使われます。この記事では、CSSとJavaScriptを組み合わせて、DIV要素のクラス名に基づいてフィルタリングを行う方法を解説します。

実装のポイント

この仕組みは、次の3つの要素で構成されています。

表示・非表示の制御：初期状態では全要素を display: none; で非表示にし、show クラスが付いた要素のみ display: block; で表示します。
フィルタリング処理：JavaScriptで各要素のクラス名を確認し、選択されたカテゴリに一致する要素に show クラスを付与します。
ボタンのアクティブ状態：現在選択されているボタンに active クラスを付け、視覚的に分かりやすくします。

サンプルコード

以下は、「すべて表示」「動物」「果物」の3つのボタンで要素を絞り込む完全なコード例です。

<!DOCTYPE html>
<html>
<style>
    .filterElements {
        float: left;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 20px;
        background-color: rgb(28, 98, 179);
        color: #ffffff;
        width: 100px;
        line-height: 100px;
        text-align: center;
        margin: 2px;
        display: none;
    }
    .show {
        display: block;
    }
    .container {
        margin-top: 20px;
        overflow: hidden;
    }
    .btn {
        border: none;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        outline: none;
        padding: 12px 16px;
        background-color: #d6e5ec;
        cursor: pointer;
    }
    .btn:hover {
        background-color: rgb(157, 209, 211);
    }
    .btn.active {
        background-color: rgb(34, 95, 228);
        color: white;
    }
</style>
<body>
<h1>DIV要素フィルタリングのデモ</h1>
<div class="filterBtns">
<button class="btn active" onclick="filterSelection('all')">すべて表示</button>
<button class="btn" onclick="filterSelection('animals')">動物</button>
<button class="btn" onclick="filterSelection('fruits')">果物</button>
</div>
<div class="container">
<div class="filterElements fruits">オレンジ</div>
<div class="filterElements animals">キリン</div>
<div class="filterElements animals">チーター</div>
<div class="filterElements animals">ライオン</div>
<div class="filterElements fruits">グアバ</div>
<div class="filterElements animals">犬</div>
<div class="filterElements fruits">バナナ</div>
<div class="filterElements fruits">マンゴー</div>
<div class="filterElements animals">牛</div>
</div>
<script>
    filterSelection("all");
    function filterSelection(c) {
        var x, i;
        x = document.querySelectorAll(".filterElements");
        if (c == "all") c = "";
        Array.from(x).forEach(item => {
            removeActiveClass(item, "show");
            if (item.className.indexOf(c) > -1) addActiveClass(item, "show");
        });
    }
    function addActiveClass(ele, name) {
        var i, arr1, arr2;
        arr1 = ele.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
            if (arr1.indexOf(arr2[i]) == -1) {
                ele.className += " " + arr2[i];
            }
        }
    }
    function removeActiveClass(ele, name) {
        var i, arr1, arr2;
        arr1 = ele.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
            while (arr1.indexOf(arr2[i]) > -1) {
                arr1.splice(arr1.indexOf(arr2[i]), 1);
            }
        }
        ele.className = arr1.join(" ");
    }
    var filterBtns = document.querySelector(".filterBtns");
    var btns = filterBtns.getElementsByTagName("button");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function() {
            var current = document.getElementsByClassName("active");
            current[0].className = current[0].className.replace(" active", "");
            this.className += " active";
        });
    }
</script>
</body>
</html>

コードの解説

1. filterSelection関数によるフィルタリング

filterSelection(c) 関数は、引数 c で受け取ったカテゴリ名（animals や fruits）をもとに処理を行います。querySelectorAll ですべての .filterElements 要素を取得し、各要素に対して一度 show クラスを削除した後、クラス名にカテゴリ名が含まれている場合のみ show クラスを再び追加します。「すべて表示」の場合は c が空文字になるため、すべての要素が表示されます。

2. クラスの追加・削除ヘルパー関数

addActiveClass と removeActiveClass は、クラス名をスペース区切りの配列として扱い、重複なく安全にクラスを追加・削除するための補助関数です。これにより、意図しないクラスの二重登録を防ぎます。

3. ボタンのアクティブ状態の切り替え

最後のループ処理では、各ボタンにクリックイベントリスナーを登録しています。クリックされると、既存の active クラスを外し、クリックされたボタンに新しく active クラスを付与することで、選択中のボタンが青色で強調表示されます。

実行結果

上記のコードを実行すると、最初はすべての要素が表示されます。

CSSとJavaScriptでクラス名に基づいてDIV要素をフィルタリングする方法

「動物」ボタンなどをクリックすると、対応するカテゴリの要素だけが表示されます。

CSSとJavaScriptでクラス名に基づいてDIV要素をフィルタリングする方法

このように、CSSの display プロパティとJavaScriptのクラス操作を組み合わせることで、シンプルかつ柔軟なフィルタリング機能を実装できます。ギャラリーや商品一覧など、さまざまな場面で応用できるテクニックなので、ぜひ活用してみてください。

CSSとJavaScriptを使ってドロップダウンメニュー内の項目を検索・絞り込む方法

JavaScriptでテーブルを検索・絞り込むフィルター機能を実装する方法

JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】
JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。サンプルコード以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor
JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法
JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。ドラッグ可能なDIV要素のサンプルコード以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。 <!DOCTYPE html> <html> <style> body {