ページネーションの実装方法｜初心者でも今すぐ使えるHTML・CSSのデザイン例を徹底解説！

2025年9月16日

生徒

ペン博士！ページネーションをサイトに入れたいのですが、どう実装すればいいのか分からなくて困っています…

ペン博士

ページネーションの実装方法じゃな！実はデザインやコードの書き方にはいろいろな工夫があるんじゃ！しっかり覚えていくんだぞ！

生徒

そうなんですね！ありがとうございます！

「ページネーションを実装したいけれど、HTMLやCSSの書き方やデザインの工夫がわからない…..」と悩んでいませんか。この記事では、基本から応用までページネーションの作り方を具体的に解説します。読み終えたころには、ご自身のサイトに最適な形で導入できるようになるでしょう。

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

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

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

菅井さんの主な制作実績はこちら

広告用途での新規LP制作

株式会社YOURDELT 様

ページネーションとは

ページネーションとは、記事や商品一覧、検索結果などのコンテンツを複数ページに分割する仕組みです。番号付きリンクや「前へ」「次へ」といったナビゲーションで、ページを切り替えられます。ページネーションを導入すると、情報を整理しやすくなります。ユーザーが目的の内容に効率よくたどり着ける点も、大きな利点です。

また、ページネーションはユーザー体験を高めるだけでなく、SEOの面でも重要です。正しく実装すれば、検索エンジンがサイト構造を理解しやすくなり、インデックスの最適化につながります。そのため、Webサイトを運営する上で欠かせない要素といえるでしょう。

ページネーションのHTMLテンプレート

どのデザインにも対応できるよう、基本のHTMLテンプレートを用意します。ページ番号や矢印アイコンは、このテンプレートを基にCSSで装飾を変えれば、多彩なデザインに展開可能です。

また、ページネーションを正しく表示するには、ブラウザごとのデフォルトスタイルをリセットしておくことが重要です。ここでは destyle.css を使い、余白やリンクの下線を取り除きます。こうすることで、どのブラウザでも統一感のある見た目になります。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.min.css">

<ul class="Pager">
  <li class="Pager-Item">
    <a class="Pager-Link" href="/page/1/">
      <svg xmlns="http://www.w3.org/2000/svg" class="Pager-Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round"d="M15 19l-7-7 7-7"
 />
      </svg>
    </a>
  </li>
  <li class="Pager-Item"><a class="Pager-Link" href="/page/1/"><span>1</span></a></li>
  <li class="Pager-Item"><a class="Pager-Link isCurrent" href="/page/2/"><span>2</span></a></li>
  <li class="Pager-Item"><a class="Pager-Link" href="/page/3/"><span>3</span></a></li>
  <li class="Pager-Item"><a class="Pager-Link" href="/page/4/"><span>4</span></a></li>
  <li class="Pager-Item"><a class="Pager-Link" href="/page/5/"><span>5</span></a></li>
  <li class="Pager-Item">
    <a class="Pager-Link" href="/page/5/">
      <svg xmlns="http://www.w3.org/2000/svg" class="Pager-Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round"d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </li>
</ul>

丸型デザインのページネーション

ペン博士

ボタンを円形にすると柔らかくフレンドリーな印象になるんじゃ！要素同士もコンパクトに収まって、シンプルながらも親しみやすい雰囲気になるぞ！軽快さや遊び心を出したい場面にぴったりなんじゃ！

.Pager {
  display: flex;
  align-items: center;
   margin-top: 20px;
}
.Pager-Link {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  transition: all 0.15s linear;
}
.Pager-Icon { width: 20px; }
.Pager-Link.isCurrent {
  background: #222;
  color: #fff;
  pointer-events: none;
}
.Pager-Link:not(.isCurrent):hover {
  background: #007acc;
  color: #fff;
}
.Pager > * + * { margin-left: 8px; }

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

丸型の連結デザインページネーション

ペン博士

丸型を横につなげると一体感のあるデザインになるんじゃ！全体がまとまって操作のしやすさも向上するぞ！おしゃれなUIを表現したい場面に向いているスタイルなんじゃ！

.Pager {
  display: flex;
  align-items: center;
  margin-top: 20px;
  border: 2px solid #222;
  border-radius: 9999px;
  overflow: hidden;
  width: fit-content; 
}
.Pager > * + * { border-left: 1px solid #222; }
.Pager-Link {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  transition: all 0.15s linear;
}
.Pager-Icon { width: 20px; }
.Pager-Link.isCurrent {
  background: #007acc;
  color: #fff;
  pointer-events: none;
}
.Pager-Link:not(.isCurrent):hover {
  background: #007acc;
  color: #fff;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

四角型デザインのページネーション

ペン博士

四角い形状にするときちんと整った印象を与えられるんじゃ！直線的で安定感があり、すっきりとした見た目が特徴なんじゃぞ！整然としたデザインを求めるときや、落ち着いた雰囲気を出したい場面に適しているんじゃ！

.Pager {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.Pager > * + * {
  margin-left: 12px;
}
.Pager-Link {
  min-width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  background: #fff;
  border: 1px solid #ccc;
  transition: all 0.15s linear;
}
.Pager-Icon {
  width: 20px;
}
.Pager-Link.isCurrent {
  background: #007acc;
  color: #fff;
  pointer-events: none;
}
.Pager-Link:not(.isCurrent):hover {
  background: #007acc;
  color: #fff;
}
.Pager > * + * { margin-left: 12px; }

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

四角型の連結デザインページネーション

ペン博士

四角型を横に連結したスタイルは、きちんと整列して見えるのが特徴なんじゃ！堅実さや安定感を演出できるから、実用性を重視する場面にぴったりなんじゃぞ！

.Pager {
  display: flex;
  align-items: center;
  margin-top: 20px;
  border: solid 2px #222;
  width: fit-content; 
}
.Pager > * + * {
  border-left: solid 2px #222;
}
.Pager-Link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 45px;
  height: 45px;
  background: #fff;
  font-size: 14px;
  color: #111;
  font-weight: bold;
  transition: all 0.15s linear;
}
.Pager-Icon {
  width: 20px;
}
.Pager-Link.isCurrent {
  background: #007acc;
  color: #fff;
  pointer-events: none;
}
.Pager-Link:not(.isCurrent):hover {
  background: #007acc;
  color: #fff;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

リンク風デザインの青文字ページネーション

ペン博士

テキストリンクのように青文字で表示されるデザインなんじゃ！シンプルで直感的にリンクと認識できるから、読み物系のサイトや記事一覧に適しているぞ！

.Pager {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.Pager-Link {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  font-size: 20px;
  font-weight: bold;
  color: #007acc;
  transition: all 0.15s linear;
}
.Pager-Icon { width: 20px; }
.Pager-Link.isCurrent {
  color: #222;
  pointer-events: none;
}
.Pager-Link:not(.isCurrent):hover { opacity: 0.6; }

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

ボタン風デザインのページネーション

ペン博士

ボタンのように立体的に見えるデザインじゃ！影や角丸を活用して、クリックできる「押しボタン感」を強調できるぞ！マテリアルデザインやUIライブラリ風の見た目になって、モダンなWebサイトにも自然に馴染むんじゃ！

.Pager {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.Pager > * + * {
  margin-left: 12px;
}
.Pager-Link {
  min-width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  background: #f8f8f8;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}
.Pager-Icon {
  width: 20px;
}
.Pager-Link.isCurrent {
  background: #007acc;
  color: #fff;
  border-color: #007acc;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  pointer-events: none;
}
.Pager-Link:not(.isCurrent):hover {
  background: #e6f2ff;
  border-color: #007acc;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

生徒

ペン博士、ページネーションの実装方法が理解できました！様々なデザインがあるんですね！