# ページネーションのCSS実装

> 記事一覧の下に置くページ送りナビ。現在ページはaria-current="page"で示し、タップしやすい36px四方のリンクをgapで等間隔に並べます。

- カテゴリ: ナビゲーション
- URL: https://www.css-dictionary.com/recipes/pagination/

## HTML

```html
<nav aria-label="ページ送り">
  <ul class="pagination">
    <li><a href="#" aria-label="前のページへ">‹</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
    <li><span class="gap-dots" aria-hidden="true">…</span></li>
    <li><a href="#">12</a></li>
    <li><a href="#" aria-label="次のページへ">›</a></li>
  </ul>
</nav>
```

## CSS

```css
.pagination {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination a,
.gap-dots {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 14px;
  color: #5c5445;
  text-decoration: none;
}

.pagination a {
  border: 1px solid #e2d8c2;
  background: #fff;
  transition: border-color 0.15s, color 0.15s;
}

.pagination a:hover {
  border-color: #b0413e;
  color: #b0413e;
}

.pagination a:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: 2px;
}

.pagination a[aria-current="page"] {
  background: #b0413e;
  border-color: #b0413e;
  color: #fff;
  font-weight: 600;
}
```

## 仕組みの解説

ページ番号の並びは ul/li でマークアップし、nav の aria-label で「ページ送り」であることを伝えます。現在ページの見た目は専用クラスではなく aria-current="page" 属性セレクタで当てるのがポイントで、スタイルとアクセシビリティ情報が常に一致します。各リンクは display: grid + place-items: center で数字を中央に置き、min-widthと高さ36pxでタップしやすい大きさを確保しています。

## 実装のポイント

省略（…）はリンクにせずaria-hiddenにします。前へ・次へは記号だけなのでaria-labelを忘れずに。

## AIに依頼するときの文例

ページネーションを作ってください。ul/liとnav[aria-label]でマークアップし、現在ページはaria-current="page"属性セレクタでスタイリング、各リンクは36px四方以上でタップしやすくしてください。

## 使っているプロパティ

- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [list-style](https://www.css-dictionary.com/property/list-style.md)
- [place-items](https://www.css-dictionary.com/property/place-items.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)