前へ・次へボタン付きページネーションを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

前へ・次へボタン付きページネーションを作る方法

前へ・次へボタン付きページネーションを作る方法を紹介します。このサンプルでは、No.1〜No.10までの10枚の記事カードを用意し、1ページにつき2枚ずつ表示します。ページ下部には1〜5のページ番号と「前へ」「次へ」ボタンを配置し、ページ番号をクリックして直接移動する方法と、現在のページから1ページずつ前後へ移動する方法の両方を利用できます。

1ページ目ではNo.1とNo.2、2ページ目ではNo.3とNo.4というように、10枚の記事カードを5ページに分けて表示します。「次へ」をクリックすると現在のページから1ページ進み、「前へ」をクリックすると1ページ戻ります。また、1ページ目では「前へ」、5ページ目では「次へ」を操作できない状態にします。記事一覧、ECサイトの商品一覧、管理画面のデータ一覧、会員サイトのコンテンツ一覧など、複数の項目を順番に確認したい場面で利用できます。

HTMLでは10枚の記事カードとページネーションを配置し、CSSではカードやページ番号、「前へ」「次へ」ボタンのデザインを整えます。JavaScriptでは1ページに表示する件数を2件に設定し、現在のページに該当するカードだけを表示します。記事カードの内容や枚数、1ページに表示する件数、ボタンのサイズや余白などを用途に合わせて変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

記事一覧

10枚の記事カードを1ページにつき2枚ずつ表示します。

No.1

サンプル記事 1

1件目のサンプル記事です。ここに記事の説明文を表示します。

No.2

サンプル記事 2

2件目のサンプル記事です。ここに記事の説明文を表示します。

No.3

サンプル記事 3

3件目のサンプル記事です。ここに記事の説明文を表示します。

No.4

サンプル記事 4

4件目のサンプル記事です。ここに記事の説明文を表示します。

No.5

サンプル記事 5

5件目のサンプル記事です。ここに記事の説明文を表示します。

No.6

サンプル記事 6

6件目のサンプル記事です。ここに記事の説明文を表示します。

No.7

サンプル記事 7

7件目のサンプル記事です。ここに記事の説明文を表示します。

No.8

サンプル記事 8

8件目のサンプル記事です。ここに記事の説明文を表示します。

No.9

サンプル記事 9

9件目のサンプル記事です。ここに記事の説明文を表示します。

No.10

サンプル記事 10

10件目のサンプル記事です。ここに記事の説明文を表示します。

「前へ」「次へ」または1〜5のページ番号をクリックしてください。選択したページに合わせて、10枚の記事カードが2枚ずつ切り替わります。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>前へ・次へボタン付きページネーション</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!--
    記事一覧とページネーション全体。
    この中に表示する記事カードをページごとに切り替えます。
  -->
  <div class="prev-next-pagination_wrap">

    <!-- 記事一覧のタイトル。用途に合わせて自由に書き換えられます。 -->
    <div class="prev-next-pagination_title">
      記事一覧
    </div>

    <!-- 記事一覧の説明文。表示内容に合わせて自由に書き換えられます。 -->
    <p class="prev-next-pagination_text">
      10枚の記事カードを1ページにつき2枚ずつ表示します。
    </p>

    <!--
      ページネーションで切り替える記事カード一覧。
      このサンプルでは10枚のカードを用意しています。
      実際に使用するときは記事・商品などの内容へ自由に書き換えてください。
    -->
    <div class="prev-next-pagination_list">

      <!-- 1件目の記事カード。番号・タイトル・説明文を自由に変更できます。 -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.1</div>
        <div class="prev-next-pagination_card-title">サンプル記事 1</div>
        <p class="prev-next-pagination_card-text">
          1件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 2件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.2</div>
        <div class="prev-next-pagination_card-title">サンプル記事 2</div>
        <p class="prev-next-pagination_card-text">
          2件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 3件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.3</div>
        <div class="prev-next-pagination_card-title">サンプル記事 3</div>
        <p class="prev-next-pagination_card-text">
          3件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 4件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.4</div>
        <div class="prev-next-pagination_card-title">サンプル記事 4</div>
        <p class="prev-next-pagination_card-text">
          4件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 5件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.5</div>
        <div class="prev-next-pagination_card-title">サンプル記事 5</div>
        <p class="prev-next-pagination_card-text">
          5件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 6件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.6</div>
        <div class="prev-next-pagination_card-title">サンプル記事 6</div>
        <p class="prev-next-pagination_card-text">
          6件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 7件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.7</div>
        <div class="prev-next-pagination_card-title">サンプル記事 7</div>
        <p class="prev-next-pagination_card-text">
          7件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 8件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.8</div>
        <div class="prev-next-pagination_card-title">サンプル記事 8</div>
        <p class="prev-next-pagination_card-text">
          8件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 9件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.9</div>
        <div class="prev-next-pagination_card-title">サンプル記事 9</div>
        <p class="prev-next-pagination_card-text">
          9件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

      <!-- 10件目の記事カード -->
      <article class="prev-next-pagination_card" data-prev-next-pagination-card>
        <div class="prev-next-pagination_number">No.10</div>
        <div class="prev-next-pagination_card-title">サンプル記事 10</div>
        <p class="prev-next-pagination_card-text">
          10件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>
      </article>

    </div>

    <!--
      ページネーション部分。
      「前へ」「次へ」と1〜5のページ番号で表示するカードを切り替えます。
      10枚を2枚ずつ表示するため、このサンプルでは5ページ用意しています。
    -->
    <nav class="prev-next-pagination_nav" aria-label="ページネーション">

      <!-- 現在のページから1ページ前へ移動するボタン -->
      <button
        type="button"
        class="prev-next-pagination_move"
        data-prev-next-pagination-prev>
        前へ
      </button>

      <!-- 1ページ目へ移動するボタン -->
      <button
        type="button"
        class="prev-next-pagination_button is-current"
        data-prev-next-pagination-page="1"
        aria-current="page">
        1
      </button>

      <!-- 2ページ目へ移動するボタン -->
      <button
        type="button"
        class="prev-next-pagination_button"
        data-prev-next-pagination-page="2">
        2
      </button>

      <!-- 3ページ目へ移動するボタン -->
      <button
        type="button"
        class="prev-next-pagination_button"
        data-prev-next-pagination-page="3">
        3
      </button>

      <!-- 4ページ目へ移動するボタン -->
      <button
        type="button"
        class="prev-next-pagination_button"
        data-prev-next-pagination-page="4">
        4
      </button>

      <!-- 5ページ目へ移動するボタン -->
      <button
        type="button"
        class="prev-next-pagination_button"
        data-prev-next-pagination-page="5">
        5
      </button>

      <!-- 現在のページから1ページ次へ移動するボタン -->
      <button
        type="button"
        class="prev-next-pagination_move"
        data-prev-next-pagination-next>
        次へ
      </button>

    </nav>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* 記事一覧とページネーション全体 */
.prev-next-pagination_wrap{
  width:100%; /* 親要素の横幅いっぱいに表示する */
  margin:40px auto; /* 上下40pxの余白。値を大きくすると上下の間隔が広がる */
  padding:32px; /* 内側の余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線。1pxを大きくすると枠線が太くなる */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 記事一覧のタイトル */
.prev-next-pagination_title{
  margin:0 0 10px; /* 下側10pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#0f172a; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
}

/* 記事一覧の説明文 */
.prev-next-pagination_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとカードとの間隔が広がる */
  color:#475569; /* 説明文の文字色 */
  line-height:1.7; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* 記事カード一覧 */
.prev-next-pagination_list{
  display:grid; /* 記事カードを縦方向へ並べる */
  gap:16px; /* カード同士の間隔。値を大きくすると間隔が広がる */
}

/* 1件分の記事カード */
.prev-next-pagination_card{
  padding:24px; /* カード内側の余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #e2e8f0; /* カードの枠線。1pxを大きくすると枠線が太くなる */
  border-radius:12px; /* カードの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* カードの背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* JavaScriptで現在のページ以外の記事カードを非表示にする */
.prev-next-pagination_card[hidden]{
  display:none;
}

/* 記事カードの番号 */
.prev-next-pagination_number{
  margin:0 0 6px; /* 下側6pxの余白。値を大きくするとタイトルとの間隔が広がる */
  color:#2563eb; /* 番号の文字色 */
  font-size:14px; /* 番号の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 番号を太字にする */
}

/* 記事カードのタイトル */
.prev-next-pagination_card-title{
  margin:0 0 8px; /* 下側8pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#0f172a; /* タイトルの文字色 */
  font-size:20px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
}

/* 記事カードの説明文 */
.prev-next-pagination_card-text{
  margin:0; /* ブラウザ標準の余白を削除 */
  color:#475569; /* 説明文の文字色 */
  line-height:1.7; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* ページネーション全体 */
.prev-next-pagination_nav{
  display:flex; /* ボタンを横方向へ並べる */
  flex-wrap:wrap; /* 画面幅が足りない場合はボタンを折り返す */
  justify-content:center; /* ボタンを中央へ配置する */
  gap:10px; /* ボタン同士の間隔。値を大きくすると間隔が広がる */
  margin-top:28px; /* 記事カードとの間隔。値を大きくするとページネーションが下へ離れる */
}

/* ページ番号と前へ・次へボタン */
.prev-next-pagination_button,
.prev-next-pagination_move{
  min-width:48px; /* ボタンの最小横幅。値を大きくするとボタンが横に広がる */
  height:48px; /* ボタンの高さ。値を大きくするとボタンが高くなる */
  padding:0 14px; /* 左右14pxの余白。値を大きくするとボタンが横に広がる */
  border:1px solid #cbd5e1; /* ボタンの枠線。1pxを大きくすると枠線が太くなる */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* ボタンの背景色 */
  color:#334155; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示する */
  transition:0.3s; /* 0.3秒で表示を切り替える。値を大きくすると変化が遅くなる */
}

/* ボタンへマウスを重ねたとき・キーボードで選択したとき */
.prev-next-pagination_button:hover,
.prev-next-pagination_button:focus,
.prev-next-pagination_move:hover,
.prev-next-pagination_move:focus{
  border-color:#2563eb; /* 枠線を青色に変更する */
  color:#2563eb; /* 文字を青色に変更する */
}

/* 現在表示しているページ番号 */
.prev-next-pagination_button.is-current{
  border-color:#2563eb; /* 現在ページの枠線色 */
  background:#2563eb; /* 現在ページの背景色 */
  color:#ffffff; /* 現在ページの文字色 */
}

/* 1ページ目の前へ・最終ページの次へなど、移動できないボタン */
.prev-next-pagination_move:disabled{
  border-color:#e2e8f0; /* 操作できないボタンの枠線色 */
  background:#f1f5f9; /* 操作できないボタンの背景色 */
  color:#94a3b8; /* 操作できないボタンの文字色 */
  cursor:not-allowed; /* 操作できないことを示すカーソル */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* 記事一覧とページネーション全体 */
  .prev-next-pagination_wrap{
    padding:24px 18px; /* 上下24px・左右18px。スマートフォンでは内側余白を小さくする */
  }

  /* 記事カード */
  .prev-next-pagination_card{
    padding:20px 16px; /* 上下20px・左右16px。スマートフォンではカード内の余白を小さくする */
  }

  /* ページ番号と前へ・次へボタン */
  .prev-next-pagination_button,
  .prev-next-pagination_move{
    min-width:44px; /* 最小横幅44px。スマートフォンでボタンをコンパクトにする */
    height:44px; /* 高さ44px。スマートフォンでボタンをコンパクトにする */
    padding:0 12px; /* 左右12px。前へ・次へボタンの横幅を抑える */
  }

}

// ページネーションで切り替える記事カードをすべて取得する
const prevNextPaginationCards = document.querySelectorAll(
  '[data-prev-next-pagination-card]'
);

// 1〜5のページ番号ボタンをすべて取得する
const prevNextPaginationButtons = document.querySelectorAll(
  '[data-prev-next-pagination-page]'
);

// 「前へ」ボタンを取得する
const prevNextPaginationPrev = document.querySelector(
  '[data-prev-next-pagination-prev]'
);

// 「次へ」ボタンを取得する
const prevNextPaginationNext = document.querySelector(
  '[data-prev-next-pagination-next]'
);

// 1ページに表示する記事カードの件数
// 2を3に変更すると1ページに3件ずつ表示される
// 値を変更した場合はカード枚数に合わせてHTMLのページ番号も調整する
const prevNextPaginationItemsPerPage = 2;

// HTMLに配置したページ番号ボタンの数を全ページ数として使用する
const prevNextPaginationTotalPages = prevNextPaginationButtons.length;

// 現在表示しているページ番号
// 初期状態は1ページ目
let prevNextPaginationCurrentPage = 1;

// 指定されたページの記事カードを表示する
function prevNextPaginationShowPage(page){

  // 現在のページ番号を更新する
  prevNextPaginationCurrentPage = page;

  // 表示を開始する記事カードの位置を計算する
  const start = (page - 1) * prevNextPaginationItemsPerPage;

  // 表示を終了する位置を計算する
  const end = start + prevNextPaginationItemsPerPage;

  // 現在のページに含まれる記事カードだけを表示する
  prevNextPaginationCards.forEach((card, index) => {
    card.hidden = index < start || index >= end;
  });

  // 現在のページ番号の表示を切り替える
  prevNextPaginationButtons.forEach((button) => {

    // data属性からページ番号を取得する
    const buttonPage = Number(button.dataset.prevNextPaginationPage);

    // 現在表示しているページか確認する
    const isCurrent = buttonPage === page;

    // 現在のページだけis-currentクラスを付ける
    button.classList.toggle('is-current', isCurrent);

    // 現在のページだけaria-currentを設定する
    if(isCurrent){
      button.setAttribute('aria-current', 'page');
    }else{
      button.removeAttribute('aria-current');
    }

  });

  // 1ページ目では「前へ」を操作できない状態にする
  prevNextPaginationPrev.disabled = page === 1;

  // 最終ページでは「次へ」を操作できない状態にする
  prevNextPaginationNext.disabled = page === prevNextPaginationTotalPages;

}

// ページ番号をクリックしたとき、そのページを表示する
prevNextPaginationButtons.forEach((button) => {

  button.addEventListener('click', () => {

    // クリックしたボタンのページ番号を取得して表示する
    prevNextPaginationShowPage(
      Number(button.dataset.prevNextPaginationPage)
    );

  });

});

// 「前へ」をクリックしたとき1ページ戻る
prevNextPaginationPrev.addEventListener('click', () => {

  // 1ページ目より後ろにいる場合だけ1ページ戻る
  if(prevNextPaginationCurrentPage > 1){
    prevNextPaginationShowPage(prevNextPaginationCurrentPage - 1);
  }

});

// 「次へ」をクリックしたとき1ページ進む
prevNextPaginationNext.addEventListener('click', () => {

  // 最終ページより前にいる場合だけ1ページ進む
  if(prevNextPaginationCurrentPage < prevNextPaginationTotalPages){
    prevNextPaginationShowPage(prevNextPaginationCurrentPage + 1);
  }

});

// ページを開いたときは1ページ目を表示する
// 1を変更すると最初に表示するページを変更できる
prevNextPaginationShowPage(1);

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはNo.1〜No.10までの10枚の記事カードと、「前へ」「1〜5」「次へ」のページネーションを配置します。CSSで記事カードやページネーションのデザインを整え、JavaScriptで現在のページに該当する記事カードだけを表示します。

サンプルでは1ページにつき2枚の記事カードを表示し、合計5ページに分けています。ページ番号をクリックすると指定したページへ直接移動でき、「前へ」と「次へ」を使うと現在のページから1ページずつ移動できます。1ページ目では「前へ」、5ページ目では「次へ」が操作できない状態になります。

記事カードの内容はサンプル用のため、実際に使用するときは記事、商品、管理データなど用途に合わせた内容へ書き換えられます。外部ライブラリや外部サービスは使用していないため、3ファイルを同じ階層へ配置してindex.htmlをブラウザで開くと動作を確認できます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlは記事一覧とページネーションを構成するファイルです。No.1〜No.10までの記事カードと、「前へ」「1〜5」「次へ」の各ボタンを配置しています。記事カードの番号、タイトル、説明文を用途に合わせて変更できます。

style.cssは記事一覧、記事カード、ページ番号、「前へ」「次へ」ボタンのデザインを設定するファイルです。全体の横幅はwidth:100%;で表示し、余白、背景色、枠線、角丸、ボタンサイズ、ボタン同士の間隔などを変更できます。

script.jsは記事カードの表示切り替えを行うファイルです。1ページに表示する件数、現在のページ、ページ番号の選択状態、「前へ」「次へ」の移動処理を管理します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存してください。index.htmlからstyle.cssとscript.jsを読み込む構成になっています。

sample/index.htmlをブラウザで開くと、最初にNo.1とNo.2の記事カードが表示されます。「次へ」をクリックするとNo.3とNo.4へ進み、さらにクリックすると次の2枚へ切り替わります。「前へ」をクリックすると1つ前のページへ戻ります。1〜5のページ番号をクリックした場合は、選択したページへ直接移動します。

カスタマイズできる内容
index.htmlでは「記事一覧」のタイトル、説明文、No.1〜No.10の記事カードの番号、タイトル、説明文を変更できます。記事カードを追加・削除することもできますが、カード枚数や1ページに表示する件数を変更した場合は、必要なページ数に合わせてHTMLのページ番号も調整してください。

style.cssでは、全体の背景色や余白、記事カードの背景色・枠線・角丸、ページネーションのボタンサイズ・間隔・色などを変更できます。script.jsでは、1ページに表示する記事カードの件数と最初に表示するページを変更できます。

数値調整
style.css
width:100%;
記事一覧とページネーション全体を親要素の横幅いっぱいに表示します。固定の最大横幅は設定していません。

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
記事一覧タイトルの文字サイズです。値を大きくすると文字が大きくなります。

margin:0 0 28px;
説明文の下側余白です。28pxを大きくすると記事カードとの間隔が広がります。

gap:16px;
記事カード同士の間隔です。値を大きくするとカード同士の間隔が広がります。

padding:24px;
記事カードの内側余白です。値を大きくするとカード内の余白が広がります。

border-radius:12px;
記事カードの角丸です。値を大きくすると丸みが強くなります。

gap:10px;
「前へ」、ページ番号、「次へ」の各ボタン同士の間隔です。値を大きくするとボタン同士が離れます。

margin-top:28px;
記事カードとページネーションの間隔です。28pxを大きくするとページネーションが記事カードから離れます。

min-width:48px;
ページネーションボタンの最小横幅です。値を大きくするとボタンが横に広がります。

height:48px;
ページネーションボタンの高さです。値を大きくするとボタンが高くなります。

padding:0 14px;
ボタンの左右の内側余白です。14pxを大きくすると、特に「前へ」「次へ」ボタンの横幅が広がります。

border-radius:10px;
ページネーションボタンの角丸です。値を大きくすると丸みが強くなります。

font-size:16px;
ページネーションボタンの文字サイズです。値を大きくすると文字が大きくなります。

transition:0.3s;
ボタンの表示が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く変化します。

script.js
const prevNextPaginationItemsPerPage = 2;
1ページに表示する記事カードの件数です。2を3に変更すると1ページにつき3枚ずつ表示します。値を変更した場合は、カード枚数に合わせてindex.htmlのページ番号も調整してください。

prevNextPaginationShowPage(1);
ページを開いたときに最初に表示するページです。1を変更すると初期表示するページを変更できます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;によって記事一覧とページネーション全体が親要素の横幅に合わせて表示されます。ページネーションにはflex-wrap:wrap;を設定しているため、横幅が足りない場合はボタンが折り返されます。

画面幅640px以下では、全体の余白をpadding:24px 18px;、記事カードの余白をpadding:20px 16px;へ変更します。また、ページネーションボタンは最小横幅と高さを44pxへ変更し、スマートフォンでも収まりやすいサイズに調整しています。スマートフォン・タブレット・PCで利用できます。