ページネーション Pagination
コンテンツを複数ページに分割しナビゲーションするUIコンポーネント。
ライブデモ
ソースコード
<nav class="demo-pagination" aria-label="ページナビゲーション">
<button class="demo-page-btn demo-page-prev" aria-label="前のページ" disabled>‹ 前へ</button>
<button class="demo-page-btn active" aria-current="page">1</button>
<button class="demo-page-btn">2</button>
<button class="demo-page-btn">3</button>
<span class="demo-page-ellipsis">…</span>
<button class="demo-page-btn">8</button>
<button class="demo-page-btn">9</button>
<button class="demo-page-btn">10</button>
<button class="demo-page-btn demo-page-next" aria-label="次のページ">次へ ›</button>
</nav>.demo-pagination {
display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.demo-page-btn {
padding: 8px 14px; border: 1px solid #e5e7eb; border-radius: 8px;
background: #fff; color: #555; font-size: 14px; cursor: pointer;
transition: all 0.2s; min-width: 40px; text-align: center;
}
.demo-page-btn:hover:not(:disabled):not(.active) {
border-color: var(--ui-primary);
color: var(--ui-primary);
background: color-mix(in srgb, var(--ui-primary) 6%, #fff);
}
.demo-page-btn.active {
background: var(--ui-primary); color: #fff;
border-color: var(--ui-primary); font-weight: 600;
}
.demo-page-btn:disabled {
opacity: 0.4; cursor: not-allowed;
}
.demo-page-prev, .demo-page-next {
font-weight: 600; padding: 8px 16px;
}
.demo-page-ellipsis {
padding: 8px 6px; color: #999; font-size: 14px;
}document.querySelectorAll('.demo-page-btn:not(.demo-page-prev):not(.demo-page-next):not(:disabled)').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.demo-page-btn').forEach(b => {
b.classList.remove('active');
b.removeAttribute('aria-current');
});
this.classList.add('active');
this.setAttribute('aria-current', 'page');
const prev = document.querySelector('.demo-page-prev');
const next = document.querySelector('.demo-page-next');
const page = parseInt(this.textContent);
prev.disabled = page === 1;
next.disabled = page === 10;
});
});AIプロンプト
Basic
ページネーションをHTML/CSSで作ってください。前へ/次へボタンとページ番号ボタンがあり、現在のページがハイライトされます。
Custom
以下の仕様でページネーションを実装してください。 - 省略記号付き（1 2 3 ... 8 9 10 のような表示） - 前へ/次へボタン + 先頭/末尾ボタン - プライマリカラー: #2563eb - 1ページあたりの表示件数切り替え（10/20/50） - 現在のページ番号と総件数の表示 - ボタンにホバーアニメーション
Advanced
アクセシビリティ対応のページネーションを実装してください。 - nav要素にaria-labelを設定 - 現在ページにaria-current="page"を設定 - キーボード操作対応（矢印キーでページ移動） - スクリーンリーダー用の「ページ X / Y」読み上げ - レスポンシブ（モバイルでは前へ/次へのみ表示） - URL同期（?page=Nのクエリパラメータ） - ページ変更時のフォーカス管理