HTML,CSS,JavaScriptでカテゴリー別フィルタリング機能を実装！

2024年1月21日
デモ
HTML/CSS, JavaScript

デモ

この記事では、HTML、CSS、およびJavaScriptを使用して、製品をカテゴリー別にフィルタリングする方法を紹介します！

1 実際の表示
2 ソースコード例
3 まとめ

実際の表示

製品A
(電子製品)

製品B
(本)

製品C
(電子製品)

製品D
(衣類)

製品E
(おもちゃ)

製品F
(食品)

製品G
(家具)

製品H
(スポーツ)

製品I
(電子製品)

製品J
(本)

製品K
(電子製品)

製品L
(衣類)

製品M
(おもちゃ)

製品N
(食品)

製品O
(家具)

製品P
(スポーツ)

製品Q
(電子製品)

製品R
(本)

製品S
(電子製品)

製品T
(衣類)

製品U
(おもちゃ)

製品V
(食品)

製品W
(家具)

製品X
(スポーツ)

製品Y
(電子製品)

製品Z
(本)

ソースコード例

HTMLソースコード例

<div class="filter-buttons">
	<button class="filter-btn" data-filter="all">全て</button>
	<button class="filter-btn" data-filter="electronics">電子製品</button>
	<button class="filter-btn" data-filter="books">本</button>
	<button class="filter-btn" data-filter="clothing">衣類</button>
	<button class="filter-btn" data-filter="toys">おもちゃ</button>
	<button class="filter-btn" data-filter="food">食品</button>
	<button class="filter-btn" data-filter="furniture">家具</button>
	<button class="filter-btn" data-filter="sports">スポーツ用品</button>
</div>

<div class="product-container">
	<div class="product" data-category="electronics">製品A (電子製品)</div>
	<div class="product" data-category="books">製品B (本)</div>
	<div class="product" data-category="electronics">製品C (電子製品)</div>
	<div class="product" data-category="clothing">製品D (衣類)</div>
	<div class="product" data-category="toys">製品E (おもちゃ)</div>
	<div class="product" data-category="food">製品F (食品)</div>
	<div class="product" data-category="furniture">製品G (家具)</div>
	<div class="product" data-category="sports">製品H (スポーツ)</div>
	<div class="product" data-category="electronics">製品I (電子製品)</div>
	<div class="product" data-category="books">製品J (本)</div>
	<div class="product" data-category="electronics">製品K (電子製品)</div>
	<div class="product" data-category="clothing">製品L (衣類)</div>
	<div class="product" data-category="toys">製品M (おもちゃ)</div>
	<div class="product" data-category="food">製品N (食品)</div>
	<div class="product" data-category="furniture">製品O (家具)</div>
	<div class="product" data-category="sports">製品P (スポーツ)</div>
	<div class="product" data-category="electronics">製品Q (電子製品)</div>
	<div class="product" data-category="books">製品R (本)</div>
	<div class="product" data-category="electronics">製品S (電子製品)</div>
	<div class="product" data-category="clothing">製品T (衣類)</div>
	<div class="product" data-category="toys">製品U (おもちゃ)</div>
	<div class="product" data-category="food">製品V (食品)</div>
	<div class="product" data-category="furniture">製品W (家具)</div>
	<div class="product" data-category="sports">製品X (スポーツ)</div>
	<div class="product" data-category="electronics">製品Y (電子製品)</div>
	<div class="product" data-category="books">製品Z (本)</div>
</div>

HTMLソースコード解説

`<div class="filter-buttons">`

製品カテゴリーをフィルタリングするためのボタンを含むコンテナです。各ボタンは異なるカテゴリーを示す data-filter 属性を持っています。

`<div class="product-container">`

は、製品の表示領域を表します。これには各製品が含まれており、data-category 属性でそれぞれの製品のカテゴリーが指定されています。

CSSソースコード例

.filter-buttons {
    text-align: center;
    padding: 20px 0;
}

.filter-btn {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #fff;
    color: #333;
    border: 2px solid #333;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}
.filter-btn:hover, .filter-btn:focus {
    background-color: #333;
    color: #fff;
}
.product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product {
    background-color: #fff;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    transition: all 0.3s;
}
.product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(-5px);
}

@media screen and (min-width: 768px) {
    .product {
        width: calc(33% - 12px);
    }
}
@media screen and (max-width: 767px) {
    .product {
        width: calc(50% - 10px);
    }
}

JavaScriptソースコード例

document.querySelectorAll('.filter-btn').forEach(button => {
    button.addEventListener('click', function() {
        const filter = this.getAttribute('data-filter');

        document.querySelectorAll('.product').forEach(product => {
            if (filter === 'all' || product.getAttribute('data-category') === filter) {
                product.style.display = 'block';
            } else {
                product.style.display = 'none';
            }
        });
    });
});

JavaScriptソースコード解説

`document.querySelectorAll('.product').forEach(product => {...})`

選択されたカテゴリーと製品の data-category 属性を比較し、一致する場合は製品を表示し、一致しない場合は非表示にします。

まとめ

この記事では、HTML、CSS、JavaScriptで、製品をカテゴリー別にフィルタリングする方法を紹介しました。ボタンをクリックすることで製品の表示を制御することができます。このカスタムフィルタリング機能を使えば、ユーザーが製品の整理と選択が簡単になり、ユーザーエクスペリエンスを向上させることができます。こちらも基本的なスキルになるので参考にして、ウェブ開発のスキルを高めてください！。