最初・最後へ移動できるページネーションを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

最初・最後へ移動できるページネーションを作る方法

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

1ページ目ではNo.1とNo.2、2ページ目ではNo.3とNo.4というように、10枚の記事カードを5ページに分けて表示します。途中のページを表示している状態から先頭や最終ページへ移動したい場合でも、ページ番号を順番にクリックする必要がありません。記事一覧、ECサイトの商品一覧、管理画面のデータ一覧、会員サイトのコンテンツ一覧など、複数ページに分かれた内容の先頭と最後へすばやく移動できるようにしたい場面で利用できます。

HTMLでは10枚の記事カードと「最初」「最後」を含むページネーションを配置し、CSSでは記事カードや各ボタンのデザインを整えます。JavaScriptでは1ページに表示する件数を2件に設定し、選択したページに該当するカードだけを表示します。また、1ページ目では「最初」、5ページ目では「最後」を使用できない状態へ切り替えます。記事内容やカード枚数、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>

  <!-- ページネーションと記事カードのデザインを読み込む -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!--
    記事一覧全体です。
    ここから下がページネーションで切り替える実際のコンテンツです。
  -->
  <div class="first-last-pagination_wrap">

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

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

    <!--
      記事カード一覧です。
      カードを追加・削除すると一覧の件数を変更できます。
      ページ数を変更する場合は下のページ番号ボタンも合わせて変更してください。
    -->
    <div class="first-last-pagination_list">

      <!-- 1件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <!-- カード番号。自由に書き換えられます -->
        <div class="first-last-pagination_number">No.1</div>

        <!-- 記事タイトル。実際の記事タイトルなどへ変更してください -->
        <div class="first-last-pagination_card-title">サンプル記事 1</div>

        <!-- 記事の説明文。実際の記事説明などへ変更してください -->
        <p class="first-last-pagination_card-text">
          1件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 2件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.2</div>

        <div class="first-last-pagination_card-title">サンプル記事 2</div>

        <p class="first-last-pagination_card-text">
          2件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 3件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.3</div>

        <div class="first-last-pagination_card-title">サンプル記事 3</div>

        <p class="first-last-pagination_card-text">
          3件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 4件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.4</div>

        <div class="first-last-pagination_card-title">サンプル記事 4</div>

        <p class="first-last-pagination_card-text">
          4件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 5件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.5</div>

        <div class="first-last-pagination_card-title">サンプル記事 5</div>

        <p class="first-last-pagination_card-text">
          5件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 6件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.6</div>

        <div class="first-last-pagination_card-title">サンプル記事 6</div>

        <p class="first-last-pagination_card-text">
          6件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 7件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.7</div>

        <div class="first-last-pagination_card-title">サンプル記事 7</div>

        <p class="first-last-pagination_card-text">
          7件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 8件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.8</div>

        <div class="first-last-pagination_card-title">サンプル記事 8</div>

        <p class="first-last-pagination_card-text">
          8件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 9件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.9</div>

        <div class="first-last-pagination_card-title">サンプル記事 9</div>

        <p class="first-last-pagination_card-text">
          9件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

      <!-- 10件目の記事カード -->
      <article class="first-last-pagination_card" data-first-last-pagination-card>

        <div class="first-last-pagination_number">No.10</div>

        <div class="first-last-pagination_card-title">サンプル記事 10</div>

        <p class="first-last-pagination_card-text">
          10件目のサンプル記事です。ここに記事の説明文を表示します。
        </p>

      </article>

    </div>

    <!--
      ページネーション部分です。
      「最初」、1〜5のページ番号、「最後」を配置しています。
      10件を2件ずつ表示するため、5ページ分のボタンを用意しています。
    -->
    <nav class="first-last-pagination_nav" aria-label="ページネーション">

      <!-- 1ページ目へ直接移動するボタン -->
      <button
        class="first-last-pagination_move"
        type="button"
        data-first-last-pagination-first>
        最初
      </button>

      <!-- 1ページ目。最初に選択されているページです -->
      <button
        class="first-last-pagination_button is-current"
        type="button"
        data-first-last-pagination-page="1"
        aria-current="page">
        1
      </button>

      <!-- 2ページ目 -->
      <button
        class="first-last-pagination_button"
        type="button"
        data-first-last-pagination-page="2">
        2
      </button>

      <!-- 3ページ目 -->
      <button
        class="first-last-pagination_button"
        type="button"
        data-first-last-pagination-page="3">
        3
      </button>

      <!-- 4ページ目 -->
      <button
        class="first-last-pagination_button"
        type="button"
        data-first-last-pagination-page="4">
        4
      </button>

      <!-- 5ページ目 -->
      <button
        class="first-last-pagination_button"
        type="button"
        data-first-last-pagination-page="5">
        5
      </button>

      <!-- 最終ページへ直接移動するボタン -->
      <button
        class="first-last-pagination_move"
        type="button"
        data-first-last-pagination-last>
        最後
      </button>

    </nav>

  </div>

  <!-- ページ切り替え処理を読み込む -->
  <script src="script.js"></script>

</body>
</html>

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

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

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

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

/* 記事カード一覧 */
.first-last-pagination_list{
  display:grid; /* 記事カードをグリッドで配置する */
  gap:16px; /* 記事カード同士の間隔。値を大きくするとカード間が広がる */
}

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

/* 現在のページに含まれない記事カードを非表示にする */
.first-last-pagination_card[hidden]{
  display:none;
}

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

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

/* 記事カードの説明文 */
.first-last-pagination_card-text{
  margin:0; /* 説明文の外側余白を削除 */
  color:#475569; /* 説明文の文字色 */
  line-height:1.7; /* 説明文の行間。値を大きくすると行間が広がる */
}

/*
  ページネーション部分です。
  ここを変更すると「最初」・ページ番号・「最後」の配置が変わります。
*/
.first-last-pagination_nav{
  display:flex; /* ボタンを横方向へ並べる */
  flex-wrap:wrap; /* 画面幅が狭い場合はボタンを折り返す */
  justify-content:center; /* ボタン全体を中央へ配置する */
  align-items:center; /* ボタンの高さ位置を中央へ揃える */
  gap:10px; /* ボタン同士の間隔。値を大きくすると間隔が広がる */
  margin-top:28px; /* 記事カードとの間隔。値を大きくすると上側の余白が広がる */
}

/*
  ページ番号と「最初」「最後」ボタンの共通デザインです。
  サイズ・枠線・角丸などを変更するとページネーション全体の見た目が変わります。
*/
.first-last-pagination_button,
.first-last-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秒で色を切り替える。値を大きくすると遅く、小さくすると速くなる */
}

/* ボタンへマウスを重ねたとき・キーボードで選択したとき */
.first-last-pagination_button:hover,
.first-last-pagination_button:focus,
.first-last-pagination_move:hover:not(:disabled),
.first-last-pagination_move:focus:not(:disabled){
  border-color:#2563eb; /* 操作時の枠線色 */
  color:#2563eb; /* 操作時の文字色 */
}

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

/*
  移動できない「最初」「最後」ボタンです。
  1ページ目では「最初」、5ページ目では「最後」に適用されます。
*/
.first-last-pagination_move:disabled{
  border-color:#e2e8f0; /* 無効時の枠線色 */
  background:#f1f5f9; /* 無効時の背景色 */
  color:#94a3b8; /* 無効時の文字色 */
  cursor:not-allowed; /* 操作できないことを示すカーソル */
}

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

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

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

  /* ページネーション */
  .first-last-pagination_nav{
    gap:8px; /* スマートフォンではボタン同士の間隔を8pxへ狭くする */
  }

  /* ページ番号と「最初」「最後」ボタン */
  .first-last-pagination_button,
  .first-last-pagination_move{
    min-width:44px; /* スマートフォンでの最小横幅。値を大きくするとボタンが広がる */
    height:44px; /* スマートフォンでの高さ。値を大きくするとボタンが高くなる */
    padding:0 10px; /* 左右10pxの余白。値を大きくすると文字の左右が広がる */
  }

}

/* ページ切り替え対象となるすべての記事カードを取得 */
const firstLastPaginationCards = document.querySelectorAll(
  '[data-first-last-pagination-card]'
);

/* 1〜5のページ番号ボタンを取得 */
const firstLastPaginationButtons = document.querySelectorAll(
  '[data-first-last-pagination-page]'
);

/* 1ページ目へ移動する「最初」ボタンを取得 */
const firstLastPaginationFirst = document.querySelector(
  '[data-first-last-pagination-first]'
);

/* 最終ページへ移動する「最後」ボタンを取得 */
const firstLastPaginationLast = document.querySelector(
  '[data-first-last-pagination-last]'
);

/*
  1ページに表示する記事カードの件数です。
  2を変更すると、1ページに表示するカード数が変わります。
  件数を変更した場合は、必要なページ数に合わせて
  index.htmlのページ番号ボタンも変更してください。
*/
const firstLastPaginationItemsPerPage = 2;

/*
  index.htmlに配置されているページ番号ボタンの数を取得します。
  このサンプルでは1〜5の5個なので、最終ページは5ページ目です。
*/
const firstLastPaginationTotalPages =
  firstLastPaginationButtons.length;

/*
  現在表示しているページ番号です。
  初期状態では1ページ目を表示します。
*/
let firstLastPaginationCurrentPage = 1;

/*
  指定されたページの記事カードだけを表示する処理です。
  ページ番号を変更すると、そのページに該当するカードへ切り替わります。
*/
function firstLastPaginationShowPage(page){

  /* 現在のページ番号を更新 */
  firstLastPaginationCurrentPage = page;

  /*
    表示を開始するカード位置を計算します。
    1ページ2件の場合、1ページ目は0、2ページ目は2から開始します。
  */
  const start =
    (page - 1) * firstLastPaginationItemsPerPage;

  /*
    表示を終了するカード位置を計算します。
    1ページ2件の場合、1ページ目では0〜1番目のカードを表示します。
  */
  const end =
    start + firstLastPaginationItemsPerPage;

  /* 現在のページに含まれるカードだけを表示 */
  firstLastPaginationCards.forEach((card, index) => {

    card.hidden =
      index < start || index >= end;

  });

  /* 現在のページ番号ボタンの表示状態を更新 */
  firstLastPaginationButtons.forEach((button) => {

    /* ボタンに設定されているページ番号を取得 */
    const buttonPage =
      Number(button.dataset.firstLastPaginationPage);

    /* 現在表示中のページか確認 */
    const isCurrent =
      buttonPage === firstLastPaginationCurrentPage;

    /* 現在ページだけ専用デザインを適用 */
    button.classList.toggle(
      'is-current',
      isCurrent
    );

    /* 現在ページにはaria-currentを設定 */
    if(isCurrent){

      button.setAttribute(
        'aria-current',
        'page'
      );

    }else{

      button.removeAttribute(
        'aria-current'
      );

    }

  });

  /*
    1ページ目では、それより前へ移動できないため
    「最初」ボタンを使用できない状態にします。
  */
  firstLastPaginationFirst.disabled =
    firstLastPaginationCurrentPage === 1;

  /*
    最終ページでは、それより後ろへ移動できないため
    「最後」ボタンを使用できない状態にします。
  */
  firstLastPaginationLast.disabled =
    firstLastPaginationCurrentPage ===
    firstLastPaginationTotalPages;

}

/* 1〜5のページ番号をクリックしたときの処理 */
firstLastPaginationButtons.forEach((button) => {

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

    /* クリックした番号のページを表示 */
    firstLastPaginationShowPage(
      Number(
        button.dataset.firstLastPaginationPage
      )
    );

  });

});

/* 「最初」をクリックすると1ページ目へ移動 */
firstLastPaginationFirst.addEventListener(
  'click',
  () => {

    firstLastPaginationShowPage(1);

  }
);

/* 「最後」をクリックすると最終ページへ移動 */
firstLastPaginationLast.addEventListener(
  'click',
  () => {

    firstLastPaginationShowPage(
      firstLastPaginationTotalPages
    );

  }
);

/*
  ページを開いた直後に1ページ目を表示します。
  1を変更すると初期表示するページを変更できます。
*/
firstLastPaginationShowPage(1);

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはNo.1〜No.10までの10枚の記事カードと、「最初」、1〜5のページ番号、「最後」のボタンを配置します。CSSで記事カードとページネーションのデザインを整え、JavaScriptで選択されたページに対応する記事カードだけを表示します。

1ページに表示する記事カードは2枚で、10枚の記事カードを5ページに分けて表示します。ページ番号をクリックすると指定したページへ移動し、「最初」をクリックすると1ページ目、「最後」をクリックすると5ページ目へ直接移動します。1ページ目では「最初」、5ページ目では「最後」が使用できない状態になります。

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

各ファイルの役割
index.htmlは記事一覧とページネーションを構成するファイルです。No.1〜No.10の記事カード、「最初」「最後」の移動ボタン、1〜5のページ番号を配置しています。カード番号、記事タイトル、説明文は用途に合わせて自由に変更できます。記事カードを追加・削除する場合は、必要なページ数に合わせてページ番号ボタンも変更します。

style.cssは記事一覧、記事カード、ページ番号、「最初」「最後」ボタンのデザインを設定するファイルです。余白、枠線、背景色、文字色、角丸、ボタンサイズ、現在ページの色、使用できないボタンの表示などを変更できます。

script.jsはページネーションの動作を設定するファイルです。1ページに表示する記事カードの件数を指定し、ページ番号に合わせて表示するカードを切り替えます。また、「最初」をクリックしたときは1ページ目、「最後」をクリックしたときは最終ページを表示し、現在ページに応じて各移動ボタンの使用状態を切り替えます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3ファイルの名前や配置を変更しない場合は追加設定は必要ありません。

sample/index.htmlをブラウザで開くと、最初はNo.1とNo.2の記事カードが表示されます。ページ番号の「2」をクリックするとNo.3とNo.4、「3」をクリックするとNo.5とNo.6というように表示内容が切り替わります。「最後」をクリックすると5ページ目のNo.9とNo.10へ直接移動し、「最初」をクリックすると1ページ目のNo.1とNo.2へ戻ります。

カスタマイズできる内容
index.htmlでは「記事一覧」のタイトル、説明文、No.1〜No.10のカード番号、記事タイトル、記事説明文を変更できます。実際の記事一覧や商品一覧などで使用する場合は、それぞれのカード内容を用途に合わせて書き換えてください。カードを追加・削除する場合は、1ページに表示する件数に合わせて必要なページ番号ボタンも追加・削除します。

style.cssでは記事一覧全体の余白や背景色、記事カードの余白・枠線・角丸、ページネーションの間隔、ボタンサイズ、色、角丸などを変更できます。現在表示しているページにはis-currentが付与されるため、通常のページ番号とは異なる背景色と文字色で表示されます。

script.jsではfirstLastPaginationItemsPerPageを変更することで、1ページに表示する記事カードの件数を調整できます。表示件数やカード総数を変更した場合は、その組み合わせから必要になるページ数に合わせてindex.htmlのページ番号ボタンも変更してください。

数値調整
style.css
padding:40px 20px;
ページ全体の余白です。上下の40pxを大きくすると上下の間隔が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

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;
記事カード一覧とページネーションの間隔です。値を大きくすると上下の間隔が広がります。

min-width:48px;
ページ番号と「最初」「最後」ボタンの最小横幅です。値を大きくするとボタンが横に広がります。

height:48px;
ページ番号と「最初」「最後」ボタンの高さです。値を大きくするとボタンが高くなります。

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

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

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

firstLastPaginationShowPage(1);
ページを開いた直後に表示するページ番号です。このサンプルでは1ページ目から開始します。1を別のページ番号へ変更すると初期表示するページを変更できます。

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

画面幅640px以下では記事一覧全体の余白をpadding:24px 18px;、記事カードをpadding:20px 16px;へ変更します。ページネーションの間隔は8px、ボタンの最小横幅と高さは44pxへ調整されるため、スマートフォン・タブレット・PCで利用できます。