省略記号（…）付きページネーションを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

省略記号（…）付きページネーションを作る方法

省略記号（…）付きページネーションを作る方法を紹介します。このサンプルでは、No.1〜No.20までの20枚の記事カードを用意し、1ページにつき2枚ずつ表示します。全10ページのページ番号をすべて並べるのではなく、現在のページや先頭・最後のページを残しながら、途中のページ番号を「…」で省略して表示します。ページ数が多い一覧でも、ページネーションが横に長くなりすぎるのを防げます。

1ページ目ではNo.1とNo.2、2ページ目ではNo.3とNo.4というように、20枚の記事カードを10ページに分けて表示します。現在のページに合わせて表示するページ番号と省略記号の位置が自動で変わるため、前半・中央・後半のどのページを表示しているか確認しながら移動できます。記事数が多いブログの記事一覧、ECサイトの商品一覧、管理画面のデータ一覧、会員サイトのコンテンツ一覧など、ページ数が増えやすい画面で利用できます。

HTMLでは20枚の記事カードとページ番号を表示する領域を配置し、CSSではカード、ページ番号、省略記号のデザインを整えます。JavaScriptでは1ページに表示する件数を2件に設定し、現在のページに該当するカードだけを表示するとともに、現在位置に合わせて必要なページ番号と「…」を生成します。記事カードの内容や枚数、1ページに表示する件数などを用途に合わせて変更でき、レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

記事一覧

20枚の記事カードを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件目のサンプル記事です。ここに記事の説明文を表示します。

No.11

サンプル記事 11

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

No.12

サンプル記事 12

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

No.13

サンプル記事 13

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

No.14

サンプル記事 14

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

No.15

サンプル記事 15

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

No.16

サンプル記事 16

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

No.17

サンプル記事 17

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

No.18

サンプル記事 18

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

No.19

サンプル記事 19

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

No.20

サンプル記事 20

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

ページ番号をクリックしてください。現在のページに合わせてページ番号の一部が「…」で省略され、記事カードが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="ellipsis-pagination_wrap">

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

    <!-- 一覧の説明文。表示する内容に合わせて変更できます -->
    <p class="ellipsis-pagination_text">
      20枚の記事カードを1ページにつき2枚ずつ表示します。
    </p>

    <!--
      ページ分割する記事一覧。
      この中のarticle要素が実際にページネーションで切り替わります。
      タイトルや説明文は自由に書き換えられます。
      article要素を追加・削除すると記事カードの総数を変更できます。
    -->
    <div class="ellipsis-pagination_list">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    </div>

    <!--
      ページ番号を表示する場所。
      ページ番号と省略記号（…）はscript.jsで自動生成されます。
    -->
    <nav
      class="ellipsis-pagination_nav"
      data-ellipsis-pagination-nav
      aria-label="ページネーション">
    </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; /* ページ全体で使用するフォント */
}

/*
  ページネーション全体。
  ここを変更すると記事一覧とページネーションを囲む部分の
  横幅・余白・枠線・角丸・背景色が変わる。
*/
.ellipsis-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を横幅へ含める */
}

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

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

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

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

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

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

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

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

/*
  ページネーション部分。
  ここを変更するとページ番号と省略記号の並び方や間隔が変わる。
*/
.ellipsis-pagination_nav{
  display:flex; /* ページ番号を横方向へ並べる */
  flex-wrap:wrap; /* 横幅が足りない場合は折り返す */
  justify-content:center; /* ページネーションを中央へ配置する */
  align-items:center; /* ページ番号と省略記号を上下中央へ揃える */
  gap:10px; /* 各項目の間隔。値を大きくするとページ番号同士が離れる */
  margin-top:28px; /* 記事カードとの間隔。値を大きくすると上側の余白が広がる */
}

/*
  ページ番号ボタン。
  ここを変更するとページ番号の大きさ・枠線・角丸・色が変わる。
*/
.ellipsis-pagination_button{
  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秒で色を切り替える。値を大きくするとゆっくり変化する */
}

/* ページ番号へマウスを重ねたとき・キーボードで選択したとき */
.ellipsis-pagination_button:hover,
.ellipsis-pagination_button:focus{
  border-color:#2563eb; /* 選択時の枠線色 */
  color:#2563eb; /* 選択時の文字色 */
}

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

/*
  省略記号（…）。
  ここを変更すると省略記号の表示幅・高さ・文字サイズが変わる。
*/
.ellipsis-pagination_dots{
  display:flex; /* 中の省略記号を中央へ配置する */
  align-items:center; /* 上下中央へ配置する */
  justify-content:center; /* 左右中央へ配置する */
  min-width:32px; /* 省略記号の最小横幅。値を大きくすると左右の空間が広がる */
  height:48px; /* ページ番号と揃える高さ。値を変更すると表示位置の高さが変わる */
  color:#64748b; /* 省略記号の文字色 */
  font-size:18px; /* 省略記号の文字サイズ。値を大きくすると「…」が大きくなる */
  font-weight:700; /* 省略記号を太字にする */
}

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

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

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

  /* ページネーション部分 */
  .ellipsis-pagination_nav{
    gap:8px; /* スマートフォンでは各項目の間隔を8pxへ狭くする */
  }

  /* ページ番号ボタン */
  .ellipsis-pagination_button{
    min-width:44px; /* スマートフォンでの最小横幅を44pxにする */
    height:44px; /* スマートフォンでのボタン高さを44pxにする */
    padding:0 10px; /* 左右10pxの余白。画面幅が狭いときの横幅を抑える */
  }

  /* 省略記号 */
  .ellipsis-pagination_dots{
    min-width:24px; /* スマートフォンでは省略記号の横幅を24pxへ狭くする */
    height:44px; /* ページ番号ボタンと同じ44pxの高さにする */
  }

}

/*
  ページ分割するすべての記事カードを取得する。
  index.htmlのdata-ellipsis-pagination-cardが付いた要素が対象になる。
*/
const ellipsisPaginationCards = document.querySelectorAll(
  '[data-ellipsis-pagination-card]'
);

/*
  ページ番号と省略記号（…）を表示する場所を取得する。
  この中身は現在のページに合わせて自動生成される。
*/
const ellipsisPaginationNav = document.querySelector(
  '[data-ellipsis-pagination-nav]'
);

/*
  1ページに表示する記事カードの件数。
  2を変更すると1ページに表示するカード枚数が変わる。
  例：4にすると1ページにつき4枚表示される。
*/
const ellipsisPaginationItemsPerPage = 2;

/*
  記事カードの総数と1ページの表示件数から総ページ数を計算する。
  20枚÷2件なので、このサンプルでは10ページになる。
*/
const ellipsisPaginationTotalPages = Math.ceil(
  ellipsisPaginationCards.length / ellipsisPaginationItemsPerPage
);

/*
  現在表示しているページ。
  初期値の1は、最初に1ページ目を表示することを表す。
*/
let ellipsisPaginationCurrentPage = 1;

/*
  ページ番号ボタンを1つ作成する処理。
  引数pageには表示するページ番号が入る。
*/
function ellipsisPaginationCreateButton(page){

  /* button要素を作成する */
  const button = document.createElement('button');

  /* ページ番号ボタンの基本設定 */
  button.type = 'button';
  button.className = 'ellipsis-pagination_button';
  button.textContent = page;

  /* 現在のページなら選択中のデザインとaria-currentを設定する */
  if(page === ellipsisPaginationCurrentPage){
    button.classList.add('is-current');
    button.setAttribute('aria-current', 'page');
  }

  /* ページ番号をクリックすると、そのページへ切り替える */
  button.addEventListener('click', () => {
    ellipsisPaginationShowPage(page);
  });

  /* 完成したページ番号ボタンを返す */
  return button;

}

/*
  省略記号（…）を作成する処理。
  省略記号はページ移動ボタンではないためspan要素で作成する。
*/
function ellipsisPaginationCreateDots(){

  /* span要素を作成する */
  const dots = document.createElement('span');

  /* 省略記号の基本設定 */
  dots.className = 'ellipsis-pagination_dots';
  dots.textContent = '…';
  dots.setAttribute('aria-hidden', 'true');

  /* 完成した省略記号を返す */
  return dots;

}

/*
  現在のページに合わせてページ番号と省略記号を作り直す処理。
  ページ数が7以下なら省略せず、すべてのページ番号を表示する。
*/
function ellipsisPaginationRender(){

  /* 前回表示したページ番号と省略記号をいったん削除する */
  ellipsisPaginationNav.innerHTML = '';

  /* 今回表示するページ番号と省略記号を保存する配列 */
  const pages = [];

  /*
    総ページ数が7以下の場合。
    省略記号を使用せず、1から最後までのページ番号を表示する。
  */
  if(ellipsisPaginationTotalPages <= 7){

    for(let page = 1; page <= ellipsisPaginationTotalPages; page++){
      pages.push(page);
    }

  /*
    現在ページが1〜4の場合。
    先頭側の1〜5を表示し、その後を「…」で省略して最後のページを表示する。
  */
  }else if(ellipsisPaginationCurrentPage <= 4){

    pages.push(
      1,
      2,
      3,
      4,
      5,
      'dots',
      ellipsisPaginationTotalPages
    );

  /*
    現在ページが最後から4ページ以内の場合。
    1ページ目を残し、途中を「…」で省略して最後の5ページを表示する。
  */
  }else if(
    ellipsisPaginationCurrentPage >= ellipsisPaginationTotalPages - 3
  ){

    pages.push(
      1,
      'dots',
      ellipsisPaginationTotalPages - 4,
      ellipsisPaginationTotalPages - 3,
      ellipsisPaginationTotalPages - 2,
      ellipsisPaginationTotalPages - 1,
      ellipsisPaginationTotalPages
    );

  /*
    現在ページが中央付近の場合。
    先頭と最後を残し、現在ページの前後1ページを表示する。
    その間は「…」で省略する。
  */
  }else{

    pages.push(
      1,
      'dots',
      ellipsisPaginationCurrentPage - 1,
      ellipsisPaginationCurrentPage,
      ellipsisPaginationCurrentPage + 1,
      'dots',
      ellipsisPaginationTotalPages
    );

  }

  /*
    配列の内容からページ番号または省略記号を生成する。
  */
  pages.forEach((page) => {

    /* dotsなら省略記号を追加する */
    if(page === 'dots'){
      ellipsisPaginationNav.appendChild(
        ellipsisPaginationCreateDots()
      );

    /* 数字ならクリックできるページ番号ボタンを追加する */
    }else{
      ellipsisPaginationNav.appendChild(
        ellipsisPaginationCreateButton(page)
      );
    }

  });

}

/*
  指定したページの記事カードを表示する処理。
  1ページにつきellipsisPaginationItemsPerPageで指定した件数だけ表示する。
*/
function ellipsisPaginationShowPage(page){

  /* 現在ページを更新する */
  ellipsisPaginationCurrentPage = page;

  /*
    表示を開始するカード位置を計算する。
    1ページ目なら0、2ページ目なら2から開始する。
  */
  const start =
    (page - 1) * ellipsisPaginationItemsPerPage;

  /*
    表示を終了する位置を計算する。
    1ページ2件の場合、1ページ目では0〜1のカードが表示対象になる。
  */
  const end =
    start + ellipsisPaginationItemsPerPage;

  /*
    現在ページに含まれる記事カードだけを表示する。
    対象外のカードにはhiddenを設定して非表示にする。
  */
  ellipsisPaginationCards.forEach((card, index) => {
    card.hidden = index < start || index >= end;
  });

  /*
    現在ページに合わせてページ番号と省略記号を作り直す。
  */
  ellipsisPaginationRender();

}

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

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはNo.1〜No.20までの20枚の記事カードと、ページネーションを表示する領域を配置します。CSSでは記事カード、ページ番号、省略記号（…）のデザインを設定し、JavaScriptでは記事カードを1ページにつき2枚ずつ表示して、現在のページに合わせてページ番号と省略記号を自動生成します。

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

各ファイルの役割
index.htmlは記事一覧とページネーションの基本構造を作るファイルです。サンプルでは20枚の記事カードを配置しています。No.1〜No.20の番号、記事タイトル、説明文は自由に書き換えられます。記事カードを追加・削除すると、JavaScriptがカード総数から必要なページ数を自動計算します。

style.cssは記事一覧とページネーションのデザインを設定するファイルです。全体の余白、記事カードの枠線や角丸、ページ番号の大きさ、選択中のページ番号、省略記号（…）などの表示を変更できます。

script.jsはページ切り替えを行うファイルです。記事カードの総数から総ページ数を計算し、現在のページに該当するカードだけを表示します。また、現在位置に応じて必要なページ番号を表示し、途中のページ番号を「…」へ置き換えます。

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

最初はNo.1とNo.2の記事カードが表示されます。ページ番号をクリックすると、選択したページに該当する2枚の記事カードへ切り替わります。全10ページを常に並べるのではなく、現在のページ位置に合わせて途中のページ番号が「…」へ変わります。

カスタマイズできる内容
index.htmlでは「記事一覧」のタイトル、説明文、No.1〜No.20の記事番号、記事タイトル、記事説明文を変更できます。記事カードのarticle要素を追加・削除すると、記事数に応じて総ページ数が自動計算されます。

style.cssでは全体の背景色や余白、記事カードの枠線、角丸、文字色、ページ番号の大きさ、ページ番号同士の間隔、選択中のページ番号の色、省略記号の文字サイズなどを変更できます。

script.jsではellipsisPaginationItemsPerPageを変更すると、1ページに表示する記事カードの件数を変更できます。例えば2を4へ変更すると、1ページにつき4枚の記事カードを表示します。記事カードの総数と表示件数から総ページ数を自動計算するため、HTMLへページ番号を手動で追加する必要はありません。

数値調整
style.css

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

padding:32px;
ページネーション全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくするとコンパクトになります。

border-radius:18px;
ページネーション全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
「記事一覧」のタイトル文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。

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

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

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

gap:10px;
ページ番号と省略記号の間隔です。値を大きくすると各項目の間隔が広がり、小さくすると狭くなります。

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

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

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

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

transition:0.3s;
ページ番号へマウスを重ねたときの色が切り替わる時間です。値を大きくするとゆっくり、小さくすると速く切り替わります。

min-width:32px;
省略記号（…）を表示する部分の最小横幅です。値を大きくすると省略記号の左右の空間が広がります。

font-size:18px;
省略記号（…）の文字サイズです。値を大きくすると省略記号が大きく表示されます。

script.js

const ellipsisPaginationItemsPerPage = 2;
1ページに表示する記事カードの件数です。2を4へ変更すると1ページにつき4枚表示するなど、用途に合わせて変更できます。

let ellipsisPaginationCurrentPage = 1;
現在ページを管理する初期値です。このサンプルでは1ページ目から開始します。

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

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

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