【2026年最新】ページネーション実装完全ガイド｜HTMLコピペで即使えるCSS付きデザイン集

2025年9月16日

生徒

ペン博士！ページネーションをサイトに入れたいのですが、HTMLやCSSをどう書けばいいのか全然わからなくて困っています…

ペン博士

ページネーションはUXにもSEOにも影響する重要な要素じゃ！HTMLの基本構造から、CSSでのデザインカスタマイズ、レスポンシブ対応まで、順を追って丁寧に解説していくぞ！

生徒

ありがとうございます！コピペで使えるサンプルもあると嬉しいです！

「ページネーションを実装したいけれど、HTMLやCSSの書き方がわからない」「デザインをどうカスタマイズすればいいか迷っている」――そんな悩みを抱えていませんか？

ページネーションは、一覧ページや検索結果ページに欠かせないナビゲーション要素です。正しく実装することで、ユーザーの回遊性を高めるだけでなく、Googleのクローラーが各ページを正確に認識しやすくなるというSEO上のメリットもあります。

この記事では、ページネーションの基本的なHTML構造から、コピペで即使えるCSSデザインサンプル、さらにレスポンシブ対応・アクセシビリティ配慮まで、2026年現在のベストプラクティスを踏まえて徹底解説します。読み終えたころには、ご自身のサイトに最適な形でページネーションを導入できるようになるでしょう。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！働き方を変えたい方にも響くストーリーです。

菅井さん
将来への不安と子育てという背景から「副業」に挑戦しようと決意。独学でプログラミング学習を開始した後、WithCodeに出会い体験コースを受講。約4ヶ月の学習に取り組み、当初の目標であった卒業テスト合格を実現。WithCode Platinumにて3件の案件を担当し、現在は副業にとどまらず本格的な「フリーランス」として在宅で活躍することを目指しています。

詳しくはこちらの記事をご覧ください。

ページネーションとは？なぜ必要なのか

ページネーション（pagination）とは、大量のコンテンツを複数のページに分割し、ユーザーがページ間を移動できるようにするナビゲーション機能のことです。ブログの記事一覧、ECサイトの商品一覧、検索結果ページなど、多くのWebサイトで利用されています。

ページネーションが必要な3つの理由

ページ読み込み速度の改善：一度に表示するコンテンツ量を制限することで、初期表示が速くなりユーザー体験が向上します。
ユーザーの回遊性アップ：「次のページ」「前のページ」といった明確な導線があることで、ユーザーがサイト内をスムーズに移動できます。
SEO効果：Googleは各ページを個別のURLとしてクロールするため、適切なページネーション実装によりインデックスの効率が高まります。

ページネーションの基本HTML構造

まずは最もシンプルなページネーションのHTMLをご紹介します。アクセシビリティを考慮して、<nav>タグとaria-label属性を使うのがベストプラクティスです。

<!-- 基本的なページネーションのHTML -->
<nav aria-label="ページナビゲーション">
  <ul class="pagination">
    <li class="pagination__item">
      <a class="pagination__link" href="/page/1" aria-label="前のページ">&laquo; 前へ</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="/page/1">1</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link pagination__link--active" href="/page/2" aria-current="page">2</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="/page/3">3</a>
    </li>
    <li class="pagination__item">
      <span class="pagination__ellipsis">&hellip;</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="/page/10">10</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="/page/3" aria-label="次のページ">次へ &raquo;</a>
    </li>
  </ul>
</nav>

HTMLの各要素の解説

<nav aria-label="ページナビゲーション">：スクリーンリーダーにナビゲーション領域であることを伝えます。
aria-current="page"：現在表示中のページ番号に付与し、スクリーンリーダーに現在地を伝えます。
…（…）：省略記号。ページ数が多い場合に中間のページ番号を省略するために使います。
« / »：「前へ」「次へ」のアイコンとして使用するHTMLエンティティです。

【コピペOK】CSSデザインサンプル集

ここからは、すぐに使えるページネーションのCSSデザインを4パターン紹介します。HTMLは上記の基本構造を共通として使用し、CSSだけ切り替えることでさまざまなスタイルが実現できます。

デザイン①：シンプルなフラットスタイル

最もシンプルでどんなサイトにもなじむデザインです。背景色とボーダーのみで構成されています。

/* シンプルなフラットスタイル */
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 40px auto;
  justify-content: center;
  gap: 6px;
}

.pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s, color 0.2s;
}

.pagination__link:hover {
  background-color: #f5f5f5;
  border-color: #aaa;
}

.pagination__link--active {
  background-color: #0066cc;
  border-color: #0066cc;
  color: #fff;
  font-weight: bold;
  pointer-events: none;
}

.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #999;
  font-size: 14px;
}

デザイン②：丸形（サークル）スタイル

ページ番号を丸くすることでスタイリッシュな印象を与えます。ブログやポートフォリオサイトに人気のデザインです。

/* 丸形スタイル */
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 40px auto;
  justify-content: center;
  gap: 8px;
}

.pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.pagination__link:hover {
  background-color: #ddeeff;
  color: #0066cc;
  transform: scale(1.08);
}

.pagination__link--active {
  background-color: #0066cc;
  color: #fff;
  font-weight: bold;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.35);
}

.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #999;
}