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

2025年9月16日

この記事の結論

ページネーションとは、大量のコンテンツを複数ページに分割してユーザーがページ間を移動できるようにするナビゲーション機能です。適切に実装することで、ページ読み込み速度の改善、ユーザーの回遊性向上に加え、Googleが各ページを個別URLとしてクロールしやすくなるSEO上のメリットがあります。基本のHTMLではアクセシビリティを考慮してnavタグとaria-label属性を使い、CSSを切り替えるだけでフラット・サークルなど複数のデザインを実現できます。

生徒

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

ペン博士

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

生徒

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

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

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

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

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

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

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

一覧まわりのUIを整えるなら、テーブル（表）のデザインやボタンのホバーデザインもあわせて実装すると統一感が出ます。

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

ページネーション（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;
}

デザイン③：アウトライン（枠線）スタイル

背景色を使わず、ボーダー（枠線）だけで表現する軽やかなスタイルです。白背景のサイトや、ミニマルなデザインのサイトになじみます。HTML構造は共通のまま、CSSを差し替えるだけで実装できます。

.pagination__link {
  width: 44px;
  height: 44px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: transparent;
  color: #333;
  transition: border-color 0.2s, color 0.2s;
}

.pagination__link:hover {
  border-color: #0066cc;
  color: #0066cc;
}

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

ページネーション実装で押さえるべきアクセシビリティ

見た目だけでなく、スクリーンリーダー利用者にも伝わる実装にすることが重要です。次の3点を意識しましょう。

nav要素で囲む：<nav aria-label="ページ送り">でページネーション全体をマークアップする
現在ページを明示：アクティブなリンクにaria-current="page"を付ける
タップ領域は44px以上：スマホでの誤タップを防ぐため、リンクの縦横は最低44pxを確保する

フレームワーク別のページネーション実装方法

ここまではHTML/CSSで見た目を作る方法を解説しました。実際のサイトでは「ページ番号を自動で出したい」ケースが多いので、代表的な2環境での実装方法も押さえておきましょう。

WordPressでの実装（テーマ関数）

WordPressなら投稿の総ページ数を自動計算してくれる関数が用意されています。一覧テンプレートにthe_posts_pagination()を置くだけでページ送りが出力されます。

<?php
// 投稿一覧テンプレート(index.php等)の下部に置く
the_posts_pagination( array(
  'mid_size'  => 2,           // 現在ページの左右に出す番号数
  'prev_text' => '« 前へ',
  'next_text' => '次へ »',
) );
?>

固定ページでWP_Queryを自作した場合はpaginate_links()を使います。

<!-- 固定ページで独自クエリを使う場合 -->
<?php
echo paginate_links( array(
  'total'   => $query->max_num_pages,
  'current' => max( 1, get_query_var('paged') ),
) );
?>

Reactでの実装（番号ボタン生成）

Reactでは総ページ数の配列を作り、mapでボタンを描画するのが基本形です。現在ページにはaria-current="page"を付けてアクセシビリティも確保します。

// React: 総ページ数から番号ボタンを生成する最小例
function Pagination({ total, current, onChange }) {
  const pages = Array.from({ length: total }, (_, i) => i + 1);
  return (
    <nav aria-label="ページ送り">
      {pages.map((p) => (
        <button
          key={p}
          aria-current={p === current ? "page" : undefined}
          onClick={() => onChange(p)}
        >
          {p}
        </button>
      ))}
    </nav>
  );
}

どの環境でも、出力されるHTMLは前半で紹介した<nav>＋リスト構造に揃えておくと、CSSサンプルをそのまま流用できます。

まとめ：HTMLは共通、CSSだけで印象を切り替えられる

ページネーションは、同じHTML構造のままCSSを差し替えるだけで、フラット・サークル・アウトラインなど印象を自在に変えられます。

基本のHTML構造を共通化し、CSSクラスで見た目を切り替える
アクティブページは色・太字で明確に区別する
nav・aria-current・44pxのタップ領域でアクセシビリティを担保する

コピペで試しながら、自サイトのデザインに合うスタイルを見つけてください。

よくある質問（FAQ）

Q1. ページネーションはなぜ必要なのですか？

A. 主に3つの理由があります。1つ目はページ読み込み速度の改善で、一度に表示するコンテンツ量を制限することで初期表示が速くなります。2つ目はユーザーの回遊性アップで、「次のページ」「前のページ」といった明確な導線でサイト内を移動しやすくなります。3つ目はSEO効果で、Googleが各ページを個別URLとしてクロールするため、インデックスの効率が高まります。

Q2. ページネーションのHTMLでアクセシビリティを高めるにはどうすればよいですか？

A. navタグとaria-label属性を使うのがベストプラクティスです。<nav aria-label=”ページナビゲーション”>でスクリーンリーダーにナビゲーション領域であることを伝え、aria-current=”page”を現在のページ番号に付与して現在地を伝えます。省略記号には…、「前へ」「次へ」には«／»といったHTMLエンティティを使います。

Q3. ページネーションのデザインはどんな種類がありますか？

A. 記事では、HTMLの基本構造を共通で使い、CSSだけを切り替えることで実現できる複数のデザインが紹介されています。背景色とボーダーのみで構成されどんなサイトにもなじむ「シンプルなフラットスタイル」、ページ番号を丸くしてスタイリッシュに見せる「丸形（サークル）スタイル」、背景色を使わずボーダーで表現する「アウトライン（枠線）スタイル」などがあります。