ページネーションとは

一覧を複数ページに分け、番号や前へ・次へのリンクでページを行き来する仕組み。

概要

記事一覧や検索結果など、件数が多いコンテンツを 1 ページに詰め込まず、いくつかのページに分割して表示する仕組みです。「前へ」「次へ」のリンクや、ページ番号を並べたリンク列で、読者は好きなページへ移動できます。ページ数が多いときは、間を「…」で省略して表示します。

別名

表記ゆれ：ページ送り、ページャー、ページナビ、ページネーション、pagination

「ページャー」はプログラムの実装名としても使われる呼び方で、デザインの文脈では「ページネーション」が最も一般的です。

AI への伝え方

「ページネーションを付けて」で通じます。ページ番号を何個まで表示するか、間を「…」で省略するかどうかを伝えると仕様がぶれません。

似たパーツとの違い

ページネーションはページという単位で区切って移動するのに対し、「無限スクロール」はページの概念自体がなく、下までスクロールすると自動的に続きが読み込まれる方式です。

デモ

コード

HTML

<nav class="pagination-demo" aria-label="ページネーション">
  <ul class="pagination-demo__list">
    <li>
      <button class="pagination-demo__link pagination-demo__link--side" type="button" data-page="prev">前へ</button>
    </li>
    <li><button class="pagination-demo__link" type="button" data-page="1" aria-current="page">1</button></li>
    <li><button class="pagination-demo__link" type="button" data-page="2">2</button></li>
    <li><button class="pagination-demo__link" type="button" data-page="3">3</button></li>
    <li><span class="pagination-demo__ellipsis" aria-hidden="true">…</span></li>
    <li><button class="pagination-demo__link" type="button" data-page="10">10</button></li>
    <li>
      <button class="pagination-demo__link pagination-demo__link--side" type="button" data-page="next">次へ</button>
    </li>
  </ul>
</nav>

CSS

.pagination-demo {
  font-family: sans-serif;
}

.pagination-demo__list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.pagination-demo__link {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.pagination-demo__link:hover {
  background: #f2f2f2;
}

.pagination-demo__link--side {
  color: #666;
}

.pagination-demo__link[aria-current="page"] {
  background: #0017c1;
  border-color: #0017c1;
  color: #fff;
  font-weight: bold;
}

.pagination-demo__ellipsis {
  padding: 0 4px;
  color: #999;
  font-size: 14px;
}

const pageButtons = document.querySelectorAll(".pagination-demo__link[data-page]:not(.pagination-demo__link--side)");

pageButtons.forEach((button) => {
  button.addEventListener("click", () => {
    pageButtons.forEach((other) => other.removeAttribute("aria-current"));
    button.setAttribute("aria-current", "page");
  });
});