基本のページネーションを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

基本のページネーションを作る方法

基本のページネーションを作る方法を紹介します。このサンプルでは、No.1〜No.10までの10枚の記事カードを用意し、1ページにつき2枚ずつ表示します。ページ下部には1〜5のページ番号を配置し、クリックしたページ番号に合わせてJavaScriptで表示するカードを切り替えます。

1ページ目ではNo.1とNo.2、2ページ目ではNo.3とNo.4というように、10枚の記事カードを5ページに分けて確認できます。一覧の件数が増えて縦に長くなる場合でも、一度に表示する件数を絞ることで内容を確認しやすくできます。記事一覧、商品一覧、管理画面のデータ一覧、会員サイトのコンテンツ一覧など、複数の項目を一定件数ずつ表示したい場面で利用できます。

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="basic-pagination_wrap">

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

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

    <!--
      記事カード一覧
      ここは実際にページネーションで切り替えて表示する内容です。
      各カードの番号・タイトル・説明文は自由に書き換えて使用できます。
      カードを追加・削除する場合は、ページ数も内容に合わせて調整してください。
    -->
    <div class="basic-pagination_list">

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

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

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

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

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

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

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

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

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

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

    </div>

    <!--
      ページネーション
      ここがページを切り替えるページ番号部分です。
      このサンプルでは10枚のカードを2枚ずつ表示するため、1〜5まで用意しています。
      ページ数を変更する場合は、カード数と1ページの表示件数に合わせてボタンを追加・削除してください。
    -->
    <nav class="basic-pagination_nav" aria-label="ページネーション">

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

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

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

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

      <!-- 5ページ目 -->
      <button
        class="basic-pagination_button"
        type="button"
        data-basic-pagination-page="5">
        5
      </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; /* ページ全体で使用するフォント */
}

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

/* 一覧タイトル。文字サイズや余白を変更できます。 */
.basic-pagination_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルの太さ */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 一覧の説明文 */
.basic-pagination_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとカードとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

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

/*
  記事カード
  ここを変更すると各記事カードの余白・枠線・角丸・背景色を変更できます。
*/
.basic-pagination_card{
  padding:24px; /* カード内側の余白。値を大きくすると内容の周囲が広くなる */
  border:1px solid #e5e7eb; /* カードを囲む1pxの枠線。数値を大きくすると太くなる */
  border-radius:12px; /* カードの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* カードの背景色 */
}

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

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

/* 記事の説明文 */
.basic-pagination_card-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#4b5563; /* 記事説明文の文字色 */
  line-height:1.8; /* 記事説明文の行間。値を大きくすると行間が広がる */
}

/*
  ページネーション
  ここを変更するとページ番号の配置・間隔を変更できます。
*/
.basic-pagination_nav{
  display:flex; /* ページ番号を横並びにする */
  justify-content:center; /* ページ番号全体を中央へ配置 */
  flex-wrap:wrap; /* 横幅が足りない場合は折り返す */
  gap:10px; /* ページ番号同士の間隔。値を大きくすると間隔が広がる */
  margin-top:28px; /* カードとページネーションの間隔。値を大きくすると離れる */
}

/*
  ページ番号
  ここを変更するとページネーションの大きさ・形・色・角丸を変更できます。
*/
.basic-pagination_button{
  display:flex; /* ボタン内の数字を中央へ配置するためflexを使用 */
  justify-content:center; /* 数字を横方向中央へ配置 */
  align-items:center; /* 数字を縦方向中央へ配置 */
  width:48px; /* ページ番号の横幅。値を大きくするとボタンが横に広がる */
  height:48px; /* ページ番号の高さ。値を大きくするとボタンが高くなる */
  padding:0; /* ボタン標準の内側余白を削除 */
  border:1px solid #d1d5db; /* 通常時の1pxの枠線。数値を大きくすると太くなる */
  border-radius:10px; /* ページ番号の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-weight:700; /* ページ番号を太字にする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
  box-sizing:border-box; /* borderをボタンサイズへ含める */
  transition:
    background-color .3s ease,
    border-color .3s ease,
    color .3s ease;
  /*
    0.3秒で背景色・枠線色・文字色を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* ページ番号へマウスを重ねたとき */
.basic-pagination_button:hover{
  border-color:#2563eb; /* ホバー時の枠線色 */
  background:#2563eb; /* ホバー時の背景色 */
  color:#ffffff; /* ホバー時の文字色 */
}

/*
  現在表示しているページ番号
  ここを変更すると選択中のページ番号の色を変更できます。
*/
.basic-pagination_button.is-current{
  border-color:#2563eb; /* 現在ページの枠線色 */
  background:#2563eb; /* 現在ページの背景色 */
  color:#ffffff; /* 現在ページの文字色 */
}

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

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

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

  /* ページ番号 */
  .basic-pagination_button{
    width:44px; /* スマートフォンでの横幅。値を変更するとボタンサイズが変わる */
    height:44px; /* スマートフォンでの高さ。値を変更するとボタンサイズが変わる */
  }

}

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

/* 1〜5のページ番号ボタンをすべて取得 */
const basicPaginationButtons =
  document.querySelectorAll(
    "[data-basic-pagination-page]"
  );

/*
  1ページに表示する記事カードの件数。
  2を3へ変更すると1ページ3件、4へ変更すると1ページ4件になります。
  件数を変更した場合は、HTMLのページ番号も必要なページ数に合わせて調整してください。
*/
const basicPaginationItemsPerPage = 2;

/*
  指定されたページの記事カードを表示する処理。
  クリックされたページ番号から、表示するカードの開始位置と終了位置を計算します。
*/
function basicPaginationShowPage(page){

  /* 表示を開始するカード番号を計算 */
  const startIndex =
    (page - 1) * basicPaginationItemsPerPage;

  /* 表示を終了する位置を計算 */
  const endIndex =
    startIndex + basicPaginationItemsPerPage;

  /* すべての記事カードを順番に確認 */
  basicPaginationCards.forEach(function(card,index){

    /*
      現在のページに含まれるカードだけを表示します。
      対象外のカードはhidden属性で非表示にします。
    */
    card.hidden =
      index < startIndex || index >= endIndex;

  });

  /* すべてのページ番号を順番に確認 */
  basicPaginationButtons.forEach(function(button){

    /* 現在表示しているページ番号かどうかを判定 */
    const isCurrent =
      Number(button.dataset.basicPaginationPage) === page;

    /*
      現在ページにはis-currentを付けます。
      style.cssの.is-currentを変更すると選択中のデザインを変更できます。
    */
    button.classList.toggle(
      "is-current",
      isCurrent
    );

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

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

    }else{

      button.removeAttribute(
        "aria-current"
      );

    }

  });

}

/* 各ページ番号をクリックしたときの処理 */
basicPaginationButtons.forEach(function(button){

  button.addEventListener("click",function(){

    /*
      クリックしたボタンのdata-basic-pagination-pageから
      ページ番号を取得して、そのページの記事を表示します。
    */
    basicPaginationShowPage(
      Number(button.dataset.basicPaginationPage)
    );

  });

});

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

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはNo.1〜No.10までの10枚の記事カードと、1〜5までのページ番号を配置します。CSSで記事カードとページネーションの見た目を整え、JavaScriptで選択したページに合わせて表示する記事カードを切り替えます。

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

各ファイルの役割
index.htmlは記事一覧とページネーションを構成するファイルです。サンプルでは10枚の記事カードを用意しています。各カードのNo.、タイトル、説明文は自由に書き換えられます。ページネーション部分には1〜5までのページ番号を配置しています。

style.cssは記事一覧とページネーションのデザインを設定するファイルです。記事カードの余白、背景色、枠線、角丸のほか、ページ番号の大きさ、間隔、色、角丸、現在表示しているページの色などを変更できます。

script.jsはページ番号をクリックしたときに表示する記事カードを切り替えるファイルです。サンプルでは1ページにつき2枚を表示し、10枚の記事カードを5ページに分けています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込むため、追加のライブラリやサーバーは必要ありません。

最初はNo.1とNo.2の記事カードが表示されます。ページ番号の「2」をクリックするとNo.3とNo.4、「3」をクリックするとNo.5とNo.6というように、選択したページに合わせて表示内容が2枚ずつ切り替わります。

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

style.cssでは記事一覧全体の余白、背景色、枠線、角丸、記事カードのデザイン、ページ番号の大きさや間隔、通常時・ホバー時・現在ページの色などを変更できます。ページネーションの形を変更したい場合は、.basic-pagination_buttonの横幅、高さ、枠線、角丸などを調整します。

script.jsではbasicPaginationItemsPerPageを変更すると、1ページに表示する記事カードの件数を変更できます。初期値は2のため、10枚の記事カードを2枚ずつ5ページに分けて表示します。

数値調整
style.css
margin:40px auto;
記事一覧全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
記事一覧全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がります。

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

gap:16px;
記事カード同士の間隔です。値を大きくするとカード同士が離れ、小さくすると近くなります。

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

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

gap:10px;
ページ番号同士の間隔です。値を大きくするとページ番号同士が離れ、小さくすると近くなります。

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

width:48px;・height:48px;
ページ番号の横幅と高さです。値を大きくするとページ番号のボタンが大きくなり、小さくするとコンパクトになります。

border-radius:10px;
ページ番号の角丸です。値を大きくすると丸みが強くなります。横幅と高さの半分程度まで大きくすると、より丸い形にできます。

.3s
ページ番号へマウスを重ねたときの色の切り替え時間です。値を大きくするとゆっくり、小さくすると速く変化します。

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

basicPaginationShowPage(1);
ページを開いたときに最初に表示するページ番号です。初期値の1では1ページ目を表示します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%によって記事一覧全体が利用できる横幅に合わせて表示され、ページ番号はflex-wrap:wrap;によって横幅が足りない場合に折り返します。また、画面幅640px以下では記事一覧全体をpadding:24px 18px;、記事カードをpadding:20px 16px;、ページ番号を44px四方へ変更しているため、スマートフォン・タブレット・PCで利用できます。