コピペで使えるページネーション20個まとめ（記事一覧のページ送りボタン）

コピペで使えるページネーション20個まとめ（記事一覧のページ送りボタン）

2026.10.03

ブログの記事一覧や、商品一覧のページが長くなってきた時に必要になるのが、「1・2・3…」とページを切り替えるボタン（ページネーション）です。

この記事では、コピペするだけで使えるページネーションのデザインを20個まとめました。
定番の四角いボタンから、「…」で省略するタイプ、「前へ・次へ」だけのタイプ、スライドショー向けのドット型まで、場面ごとに使い分けられる種類を用意しています。

これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

記事の下にある「1・2・3」のボタンのこと？

そうなんだ。ページネーションって言うんだよ。サイトの雰囲気に合わせて見た目を変えるだけで、ぐっと整った印象になるんだ。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、ページネーションを表示したい場所に貼り付けます。

今いるページは、class=”current”を付けたspanタグで表します。
リンク先は、aタグのhref=”#”の部分を、実際のページのURLに書き換えてください。

01. シンプルな四角いボタン

数字を四角で囲んだ、もっとも定番のページネーションです。

実際の見た目

HTMLコード

<nav class="kts-page01">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page01 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page01 a, .kts-page01 span { text-decoration: none; }
.kts-page01 a, .kts-page01 span { min-width: 36px; height: 36px; line-height: 36px; text-align: center; border: 1px solid #D1D5DB; border-radius: 4px; color: #374151; font-size: 14px; }
.kts-page01 .current { background: #2563EB; border-color: #2563EB; color: #fff; font-weight: 700; }

02. 丸いボタン

数字を丸で囲んだ、やわらかい印象のタイプです。

実際の見た目

HTMLコード

<nav class="kts-page02">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page02 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page02 a, .kts-page02 span { text-decoration: none; }
.kts-page02 a, .kts-page02 span { width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; background: #F3F4F6; color: #4B5563; font-size: 14px; }
.kts-page02 .current { background: #EC4899; color: #fff; font-weight: 700; }

03. 下線で示すタイプ

今のページに下線を引くだけの、すっきりとしたタイプです。

実際の見た目

HTMLコード

<nav class="kts-page03">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page03 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page03 a, .kts-page03 span { text-decoration: none; }
.kts-page03 { gap: 14px; }
.kts-page03 a, .kts-page03 span { padding: 6px 4px; border-bottom: 2px solid transparent; color: #6B7280; font-size: 15px; }
.kts-page03 .current { border-bottom-color: #111827; color: #111827; font-weight: 700; }

04. 省略記号「…」付き

ページ数が多い時に、途中を「…」で省略するタイプです。

実際の見た目

HTMLコード

<nav class="kts-page04">
  <a href="#">‹</a>
  <a href="#">1</a>
  <span class="dots">…</span>
  <a href="#">7</a>
  <span class="current">8</span>
  <a href="#">9</a>
  <span class="dots">…</span>
  <a href="#">20</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page04 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page04 a, .kts-page04 span { text-decoration: none; }
.kts-page04 a, .kts-page04 span { min-width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 6px; color: #374151; font-size: 14px; }
.kts-page04 a { border: 1px solid #E5E7EB; }
.kts-page04 .current { background: #0F766E; color: #fff; font-weight: 700; }
.kts-page04 .dots { min-width: 20px; color: #9CA3AF; }

05. 「前へ」「次へ」だけのタイプ

数字を出さずに、前後の移動ボタンだけを置くシンプルなタイプです。

実際の見た目

HTMLコード

<nav class="kts-page05"><a href="#" class="prev">‹ 前の記事</a><a href="#" class="next">次の記事 ›</a></nav>

CSSコード

.kts-page05 { display: flex; justify-content: space-between; gap: 10px; font-family: sans-serif; }
.kts-page05 a { flex: 1; max-width: 200px; padding: 12px 16px; border: 1px solid #D1D5DB; border-radius: 8px; color: #111827; font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; }
.kts-page05 a:hover { background: #F9FAFB; }

06. ページ数の表示付き

「3 / 10ページ」のように、全体のどこにいるかを数字で示すタイプです。

実際の見た目

HTMLコード

<nav class="kts-page06"><a href="#">‹</a><span>3 / 10 ページ</span><a href="#">›</a></nav>

CSSコード

.kts-page06 { display: flex; align-items: center; justify-content: center; gap: 16px; font-family: sans-serif; }
.kts-page06 a { width: 38px; height: 38px; line-height: 36px; text-align: center; border: 1px solid #D1D5DB; border-radius: 50%; color: #374151; font-size: 18px; text-decoration: none; }
.kts-page06 span { font-size: 14px; color: #4B5563; }

07. つながったボタン型

ボタン同士をくっつけて、1本の帯のように見せるタイプです。

実際の見た目

HTMLコード

<nav class="kts-page07">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page07 { display: inline-flex; border: 1px solid #D1D5DB; border-radius: 8px; overflow: hidden; font-family: sans-serif; }
.kts-page07 a, .kts-page07 span { min-width: 40px; height: 38px; line-height: 38px; text-align: center; border-left: 1px solid #D1D5DB; color: #374151; font-size: 14px; text-decoration: none; }
.kts-page07 a:first-child { border-left: 0; }
.kts-page07 .current { background: #7C3AED; color: #fff; font-weight: 700; }

08. 影付きのカード風

ボタンに影を付けて、ふんわり浮かせたタイプです。

実際の見た目

HTMLコード

<nav class="kts-page08">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page08 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page08 a, .kts-page08 span { text-decoration: none; }
.kts-page08 { gap: 8px; }
.kts-page08 a, .kts-page08 span { min-width: 38px; height: 38px; line-height: 38px; text-align: center; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); color: #374151; font-size: 14px; }
.kts-page08 .current { background: #F97316; color: #fff; font-weight: 700; }

09. ダークカラーのタイプ

黒系の背景で、引き締まった印象にしたい時のタイプです。

実際の見た目

HTMLコード

<nav class="kts-page09">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page09 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page09 a, .kts-page09 span { text-decoration: none; }
.kts-page09 { padding: 12px; background: #111827; border-radius: 10px; }
.kts-page09 a, .kts-page09 span { min-width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 6px; color: #D1D5DB; font-size: 14px; }
.kts-page09 .current { background: #FACC15; color: #111827; font-weight: 700; }

10. グラデーションのタイプ

今のページにグラデーションをかけた、華やかなタイプです。

実際の見た目

HTMLコード

<nav class="kts-page10">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page10 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page10 a, .kts-page10 span { text-decoration: none; }
.kts-page10 a, .kts-page10 span { min-width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 10px; background: #F5F3FF; color: #6D28D9; font-size: 14px; }
.kts-page10 .current { background: linear-gradient(135deg, #6366F1, #EC4899); color: #fff; font-weight: 700; }

11. 枠線だけのタイプ

白地に枠線を引いた、控えめで上品なタイプです。

実際の見た目

HTMLコード

<nav class="kts-page11">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page11 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page11 a, .kts-page11 span { text-decoration: none; }
.kts-page11 a, .kts-page11 span { min-width: 36px; height: 36px; line-height: 34px; text-align: center; border: 1px solid #0EA5E9; border-radius: 4px; color: #0369A1; font-size: 14px; box-sizing: border-box; }
.kts-page11 .current { border-width: 2px; line-height: 32px; font-weight: 700; }

12. 大きめの押しやすいタイプ

ボタンを大きくした、スマホでもタップしやすいタイプです。

実際の見た目

HTMLコード

<nav class="kts-page12">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page12 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page12 a, .kts-page12 span { text-decoration: none; }
.kts-page12 { gap: 10px; }
.kts-page12 a, .kts-page12 span { min-width: 48px; height: 48px; line-height: 48px; text-align: center; border-radius: 12px; background: #ECFDF5; color: #047857; font-size: 17px; font-weight: 700; }
.kts-page12 .current { background: #10B981; color: #fff; }

13. 小さめの控えめなタイプ

文字を小さくまとめた、ページの下にさりげなく置けるタイプです。

実際の見た目

HTMLコード

<nav class="kts-page13">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page13 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page13 a, .kts-page13 span { text-decoration: none; }
.kts-page13 { gap: 4px; }
.kts-page13 a, .kts-page13 span { min-width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 3px; color: #6B7280; font-size: 12px; }
.kts-page13 .current { background: #374151; color: #fff; }

14. 「もっと見る」ボタン型

数字の代わりに、続きを読み込むボタンを1つ置くタイプです。

実際の見た目

HTMLコード

<div class="kts-page14"><a href="#">もっと見る</a></div>

CSSコード

.kts-page14 { text-align: center; font-family: sans-serif; }
.kts-page14 a { display: inline-block; padding: 12px 48px; border: 2px solid #111827; border-radius: 999px; color: #111827; font-weight: 700; text-decoration: none; }
.kts-page14 a:hover { background: #111827; color: #fff; }

15. 「最初へ」「最後へ」付き

一番最初と最後のページへ飛べるボタンを付けた、ページ数が多いサイト向けのタイプです。

実際の見た目

HTMLコード

<nav class="kts-page15">
  <a href="#">«</a>
  <a href="#">‹</a>
  <a href="#">2</a>
  <span class="current">3</span>
  <a href="#">4</a>
  <a href="#">›</a>
  <a href="#">»</a>
</nav>

CSSコード

.kts-page15 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page15 a, .kts-page15 span { text-decoration: none; }
.kts-page15 a, .kts-page15 span { min-width: 36px; height: 36px; line-height: 36px; text-align: center; border: 1px solid #E5E7EB; border-radius: 6px; color: #374151; font-size: 14px; }
.kts-page15 .current { background: #DC2626; border-color: #DC2626; color: #fff; font-weight: 700; }

16. 点だけのドット型

数字の代わりに小さな点を並べる、スライドショーなどに向くタイプです。

実際の見た目

HTMLコード

<nav class="kts-page16"><a href="#"></a><span class="current"></span><a href="#"></a><a href="#"></a></nav>

CSSコード

.kts-page16 { display: flex; justify-content: center; align-items: center; gap: 10px; }
.kts-page16 a, .kts-page16 span { display: block; width: 10px; height: 10px; border-radius: 50%; background: #D1D5DB; }
.kts-page16 .current { width: 28px; border-radius: 5px; background: #2563EB; }

17. 左右に矢印ボタンを分けたタイプ

前後の矢印を両端に置き、数字を中央にまとめたタイプです。

実際の見た目

HTMLコード

<nav class="kts-page17"><a href="#" class="arrow">← 前へ</a><div class="nums"><a href="#">1</a><span class="current">2</span><a href="#">3</a></div><a href="#" class="arrow">次へ →</a></nav>

CSSコード

.kts-page17 { display: flex; justify-content: space-between; align-items: center; font-family: sans-serif; }
.kts-page17 a, .kts-page17 span { text-decoration: none; color: #374151; font-size: 14px; }
.kts-page17 .arrow { padding: 8px 14px; border-radius: 6px; background: #F3F4F6; font-weight: 700; }
.kts-page17 .nums { display: flex; gap: 4px; }
.kts-page17 .nums a, .kts-page17 .nums span { width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; }
.kts-page17 .current { background: #111827; color: #fff; font-weight: 700; }

18. 点線のやわらかいタイプ

点線で囲んだ、手作り感のあるやさしい印象のタイプです。

実際の見た目

HTMLコード

<nav class="kts-page18">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page18 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page18 a, .kts-page18 span { text-decoration: none; }
.kts-page18 a, .kts-page18 span { min-width: 36px; height: 36px; line-height: 32px; text-align: center; border: 2px dashed #FDBA74; border-radius: 10px; color: #C2410C; font-size: 14px; box-sizing: border-box; }
.kts-page18 .current { border-style: solid; border-color: #F97316; background: #FFF7ED; font-weight: 700; }

19. 数字が浮き上がるタイプ

マウスを乗せると数字がふわっと浮き上がる、動きのあるタイプです。

実際の見た目

HTMLコード

<nav class="kts-page19">
  <a href="#">‹</a>
  <span class="current">1</span>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">›</a>
</nav>

CSSコード

.kts-page19 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: sans-serif; }
.kts-page19 a, .kts-page19 span { text-decoration: none; }
.kts-page19 a, .kts-page19 span { min-width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 8px; background: #F3F4F6; color: #374151; font-size: 14px; transition: transform .2s, box-shadow .2s; }
.kts-page19 a:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.kts-page19 .current { background: #0EA5E9; color: #fff; font-weight: 700; }

20. 和風の落ち着いたタイプ

明朝体と落ち着いた色で、和の雰囲気に合わせたタイプです。

実際の見た目

HTMLコード

<nav class="kts-page20">
  <a href="#">前</a>
  <span class="current">壱</span>
  <a href="#">弐</a>
  <a href="#">参</a>
  <a href="#">次</a>
</nav>

CSSコード

.kts-page20 { display: flex; justify-content: center; gap: 8px; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.kts-page20 a, .kts-page20 span { width: 40px; height: 40px; line-height: 38px; text-align: center; border: 1px solid #7C2D12; color: #7C2D12; font-size: 15px; text-decoration: none; box-sizing: border-box; }
.kts-page20 .current { background: #7C2D12; color: #FEF3C7; }

カスタマイズの小ワザ

WordPressで記事一覧のページネーションを自動で出している場合は、テーマが出力するclass名に合わせてCSSのセレクタを書き換えてください。
今いるページだけはリンクにせず、spanタグにしておくと、「ここにいる」ことが伝わりやすくなります。
ページ数が多い時は、04番のように途中を「…」で省略すると、すっきり見せられます。
スマホでは、12番のように大きめのボタンにするとタップしやすくなります。
色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面	該当するページネーション
定番の見た目	01, 02, 03
ページ数が多い	04, 15
前後の移動だけ	05, 06, 17
まとまりよく見せたい	07, 11, 13
目立たせたい	08, 09, 10
スマホで押しやすく	12
続きを読み込む	14
スライドショー	16
雰囲気を出したい	18, 19, 20

ページの切り替えボタンも、こんなに種類があるんだね！

そうなんだ。目立たない部分だけど、押しやすさや見やすさで回遊率も変わってくるんだよ。まずは01番や02番から試してみてね。

20個のページネーションは、今いるページをclass="current"のspanタグで表し、リンク先はhrefを書き換えて使う。ページ数が多い時は省略記号、スマホでは大きめのボタンが向いている。

HTML・CSS, コピペで使えるシリーズ, ページネーション

コピペで使えるローディングアニメーション20個まとめ（読み込み中のくるくる表示）

コピペで使えるハンバーガーメニュー20個まとめ（スマホ用の三本線メニュー）