Pagination / 011 — ネオン｜Neon | UIデザイン実装コード

デザイン見本

暗い背景にマゼンタとシアンの発光を重ねた、ネオンサインのようなデザインです。通常はマゼンタで淡く光り、ホバーと現在ページではシアンに切り替わって強く光ります。ゲームや音楽など、夜の雰囲気を持つサイトに向きます。

実装コード

コピーしたHTML・CSS・JSは HTML・CSS・JSコードプレビューツールで動作確認できます。

HTML

<nav class="pagination" aria-label="ページ送り">
    <a href="#" class="page-btn prev" aria-label="前のページ">&lsaquo;</a>
    <a href="#" class="page-btn active" aria-current="page">1</a>
    <a href="#" class="page-btn">2</a>
    <a href="#" class="page-btn">3</a>
    <span class="page-dots">&hellip;</span>
    <a href="#" class="page-btn">12</a>
    <a href="#" class="page-btn next" aria-label="次のページ">&rsaquo;</a>
</nav>

CSS

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-family: system-ui, -apple-system, sans-serif;
    gap: 8px;
    padding: 20px 16px;
    background: #0a0a12;
    border-radius: 10px;
}

.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #ff3df5;
    border-radius: 4px;
    background: transparent;
    color: #ff8bf9;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 61, 245, 0.7);
    box-shadow: 0 0 6px rgba(255, 61, 245, 0.35), inset 0 0 6px rgba(255, 61, 245, 0.2);
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, text-shadow 0.2s;
}

.pagination .page-btn:hover {
    border-color: #3df5ff;
    color: #9df8ff;
    text-shadow: 0 0 8px rgba(61, 245, 255, 0.8);
    box-shadow: 0 0 10px rgba(61, 245, 255, 0.5), inset 0 0 8px rgba(61, 245, 255, 0.25);
}

.pagination .page-btn.active {
    border-color: #3df5ff;
    color: #ffffff;
    text-shadow: 0 0 10px #3df5ff, 0 0 20px #3df5ff;
    box-shadow: 0 0 16px rgba(61, 245, 255, 0.75), inset 0 0 12px rgba(61, 245, 255, 0.4);
}

.pagination .page-dots {
    color: #6a4a7a;
    font-size: 14px;
}

(function () {
    var nav = document.querySelector('.pagination');
    if (!nav) return;

    var btns = nav.querySelectorAll('.page-btn');
    var nums = [];
    btns.forEach(function (b) {
        if (!b.classList.contains('prev') && !b.classList.contains('next')) nums.push(b);
    });

    function setActive(el) {
        nums.forEach(function (n) {
            n.classList.remove('active');
            n.removeAttribute('aria-current');
        });
        el.classList.add('active');
        el.setAttribute('aria-current', 'page');
    }

    function activeIdx() {
        for (var i = 0; i < nums.length; i++) {
            if (nums[i].classList.contains('active')) return i;
        }
        return 0;
    }

    btns.forEach(function (b) {
        b.addEventListener('click', function (e) {
            e.preventDefault();
            if (b.classList.contains('prev')) {
                var p = activeIdx() - 1;
                if (p >= 0) setActive(nums[p]);
            } else if (b.classList.contains('next')) {
                var n = activeIdx() + 1;
                if (n < nums.length) setActive(nums[n]);
            } else {
                setActive(b);
            }
        });
    });
})();