プラグパーツWEB

・コンテンツをカテゴリ分けするコード

このプログラムではニュースやブログなどで、記事を簡単に見つけられるよう、カテゴリ分けをして表示することができるプログラムパーツです。

以下プレビュー

HTML

CSS

JavaScript


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ピックアップニュース</title>
</head>
<body>
    <div class="news-container">
        <h2>ピックアップニュース</h2>
        <div class="filter-buttons">
            <button class="filter-btn active" data-filter="all">すべて</button>
            <button class="filter-btn" data-filter="highschool">高校</button>
            <button class="filter-btn" data-filter="university">大学</button>
            <button class="filter-btn" data-filter="corporation">法人</button>
        </div>
        <div class="news-list">
            <!-- 仮のニュース項目 -->
            <div class="news-item" data-category="university">
                <span class="category1">大学</span> 2025年3月1日 - 大学説明会のお知らせ
            </div>
            <div class="news-item" data-category="highschool">
                <span class="category0">高校</span> 2025年2月28日 - 高校オープンキャンパス開催
            </div>
            <div class="news-item" data-category="corporation">
                <span class="category2">法人</span> 2025年2月25日 - 法人事業報告書公開
            </div>
            <div class="news-item" data-category="university">
                <span class="category1">大学</span> 2025年2月20日 - 新学科設立のお知らせ
            </div>
            <div class="news-item" data-category="highschool">
                <span class="category0">高校</span> 2025年2月15日 - 高校生向け進学相談会
            </div>
        </div>
    </div>
</body>
</html>


.news-container {
    max-width: 800px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}
.filter-buttons {
    margin-bottom: 20px;
}
.filter-buttons button {
    padding: 10px 20px;
    margin-right: 10px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
}
.filter-buttons button.active {
    background-color: #007bff;
    color: white;
}
.news-item {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}
.news-item.hidden {
    display: none;
}
.category0 {
    background-color: green;
    padding: 8px 17px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 90%;
}
.category1 {
    background-color: #bb9f00;
    padding: 8px 17px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 90%;
}
.category2 {
    background-color: #d10050;
    padding: 8px 17px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 90%;
}


document.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.filter-btn');
    const newsItems = document.querySelectorAll('.news-item');

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            // すべてのボタンからactiveクラスを削除し、クリックしたボタンに追加
            buttons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');

            const filter = button.getAttribute('data-filter');

            // ニュース項目をフィルタリング
            newsItems.forEach(item => {
                const category = item.getAttribute('data-category');
                if (filter === 'all' || category === filter) {
                    item.classList.remove('hidden');
                } else {
                    item.classList.add('hidden');
                }
            });
        });
    });
});