HTML・CSS・JavaScriptで学ぶ！シンプルなページネーション（ページ送り）の実装方法

Flat lay of business concept

Webサイトで大量のデータを扱う場合、すべてを一度に表示するのではなく、ページを分けて少しずつ見せる「ページネーション（ページ送り）」が重要になります。ブログ記事一覧、検索結果一覧、商品一覧など、実に多くのWebサービスで使われています。本記事では、HTMLとCSS、そしてJavaScriptを使って、シンプルなページネーションを自作する方法を初心者にもわかりやすく解説します。仕組みやデザイン、動的な制御まで順を追って紹介しますので、自分でページ送りを作ってみたい方はぜひ参考にしてください。

ページネーションとは？
HTMLでページネーションの基本構造を作る
CSSでスタイリングを整える
JavaScriptで動的なページ送りを実装する
応用：URLに現在のページ番号を反映する
まとめ

ページネーションとは？

ページネーションとは、大量の情報を分割して複数ページに表示し、それをページ番号や「前へ」「次へ」ボタンなどで移動できるようにする機能です。

たとえば、100件の商品データを1ページに10件ずつ表示する場合、10ページに分けて表示し、「1」「2」「3」や「次へ」「前へ」などのボタンを表示して、閲覧者がページを切り替えられるようにします。

この機能は次のような利点があります：

ユーザー体験の向上：読み込み時間を短縮し、視認性を高めます。
パフォーマンスの向上：一度に全データを表示しないため、ブラウザへの負荷が軽減します。
整ったデザイン：データを小分けにできることでレイアウトが整います。

HTMLでページネーションの基本構造を作る

まずは、ページネーションのベースとなるHTML構造を作成します。

<div id="pagination">
  <button id="prevBtn">前へ</button>
  <span id="pageNumbers"></span>
  <button id="nextBtn">次へ</button>
</div>

<ul id="dataList"></ul>

ここでは、

#pagination：ページ送りのナビゲーション部分
#dataList：表示されるデータ（リスト）部分

という構造にしています。

CSSでスタイリングを整える

次に、CSSを使って見た目を整えます。

#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

#pagination button {
  margin: 0 10px;
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#pagination button:disabled {
  background-color: #aaa;
  cursor: default;
}

#pageNumbers span {
  margin: 0 5px;
  cursor: pointer;
}

#pageNumbers span.active {
  font-weight: bold;
  text-decoration: underline;
}

ボタンにマージン・パディングをつけて見やすく
現在のページ番号をactiveクラスで強調
「前へ」や「次へ」ボタンは無効時にグレー表示

このように視覚的にわかりやすくすることで、使いやすいUIになります。

JavaScriptで動的なページ送りを実装する

次に、JavaScriptを使って実際にページ切り替え機能を実装していきます。

const data = Array.from({ length: 50 }, (_, i) => `アイテム ${i + 1}`);
const itemsPerPage = 5;
let currentPage = 1;

function renderList() {
  const start = (currentPage - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const visibleItems = data.slice(start, end);

  const listEl = document.getElementById('dataList');
  listEl.innerHTML = '';
  visibleItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    listEl.appendChild(li);
  });
}

function renderPagination() {
  const pageNumbersEl = document.getElementById('pageNumbers');
  pageNumbersEl.innerHTML = '';
  const pageCount = Math.ceil(data.length / itemsPerPage);

  for (let i = 1; i <= pageCount; i++) {
    const span = document.createElement('span');
    span.textContent = i;
    span.className = (i === currentPage) ? 'active' : '';
    span.addEventListener('click', () => {
      currentPage = i;
      update();
    });
    pageNumbersEl.appendChild(span);
  }

  document.getElementById('prevBtn').disabled = currentPage === 1;
  document.getElementById('nextBtn').disabled = currentPage === pageCount;
}

function update() {
  renderList();
  renderPagination();
}

document.getElementById('prevBtn').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    update();
  }
});

document.getElementById('nextBtn').addEventListener('click', () => {
  const pageCount = Math.ceil(data.length / itemsPerPage);
  if (currentPage < pageCount) {
    currentPage++;
    update();
  }
});

// 初期表示
update();

このスクリプトでは：

データを data に配列で定義
renderList() で現在ページに応じた項目を表示
renderPagination() でページ番号や「前へ・次へ」ボタンを更新
イベントリスナーでクリックごとにページ遷移を制御

このようにすれば、動的なページネーションが完成します。

応用：URLに現在のページ番号を反映する

さらに一歩進めたい場合は、クエリパラメータ（例：?page=3）を使って、現在のページ状態をURLに反映し、リロードしてもそのページから表示できるようにする方法もあります。

javascriptコピーする編集するfunction getPageFromURL() {
  const params = new URLSearchParams(window.location.search);
  return parseInt(params.get('page')) || 1;
}

function setPageToURL(page) {
  const params = new URLSearchParams();
  params.set('page', page);
  history.replaceState({}, '', `?${params}`);
}

このようにして、currentPage に getPageFromURL() を使って初期化すれば、ブラウザリロードにも強い実装が可能です。