立体的なページネーションを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

立体的なページネーションを作る方法

立体的なページネーションを作る方法を紹介します。このサンプルでは、10枚の記事カードを1ページにつき2枚ずつ表示し、1〜5のページ番号をクリックすると対応する記事カードへ切り替わるページネーションを作成します。ページ番号には下方向へ影を付け、通常の平面的なボタンよりも厚みを感じられる立体的なデザインにしています。

ページ番号をクリックすると、JavaScriptによって表示する記事カードが切り替わり、現在選択しているページ番号は青色で表示されます。また、ボタンを押している間は下方向へ移動すると同時に影が小さくなるため、実際のボタンを押し込んだような動きを確認できます。ブログの記事一覧、商品一覧、検索結果、管理画面など、複数のコンテンツを一定件数ごとに分けて表示したい場面で利用できます。

HTMLでは記事カードやページ番号の内容、CSSではボタンのサイズ、色、角丸、影、押し込む距離などを変更できます。JavaScriptでは1ページに表示する記事カードの件数を調整できます。画面幅640px以下では全体の余白、記事カードの余白、ページ番号のサイズを小さくするレスポンシブ対応も行っているため、スマートフォン・タブレット・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="three-dimensional-pagination_wrap">

    <!-- タイトル -->
    <div class="three-dimensional-pagination_title">
      記事一覧
    </div>

    <!-- 説明文 -->
    <p class="three-dimensional-pagination_text">
      10枚の記事カードを1ページにつき2枚ずつ表示します。
    </p>

    <!-- 記事カード一覧 -->
    <div class="three-dimensional-pagination_list">

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

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

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

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

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

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

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

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

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

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

    </div>

    <!-- ページ番号 -->
    <nav class="three-dimensional-pagination_nav" aria-label="ページネーション">

      <button class="three-dimensional-pagination_button is-current" type="button" data-three-dimensional-pagination-page="1" aria-current="page">
        1
      </button>

      <button class="three-dimensional-pagination_button" type="button" data-three-dimensional-pagination-page="2">
        2
      </button>

      <button class="three-dimensional-pagination_button" type="button" data-three-dimensional-pagination-page="3">
        3
      </button>

      <button class="three-dimensional-pagination_button" type="button" data-three-dimensional-pagination-page="4">
        4
      </button>

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

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

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

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

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

/* 記事カード */
.three-dimensional-pagination_card{
  padding:24px; /* カード内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* カードの枠線 */
  border-radius:12px; /* カードの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* カードの背景色 */
}

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

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

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

/* ページ番号全体 */
.three-dimensional-pagination_nav{
  display:flex; /* ページ番号を横方向へ配置 */
  justify-content:center; /* ページ番号を中央へ配置 */
  flex-wrap:wrap; /* 横幅が足りない場合は折り返す */
  gap:10px; /* ページ番号同士の間隔。値を大きくすると間隔が広がる */
  margin-top:28px; /* 上側28pxの余白。値を大きくすると記事一覧との間隔が広がる */
}

/* ページ番号ボタン */
.three-dimensional-pagination_button{
  display:flex; /* 数字を中央へ配置するためflexを使用 */
  justify-content:center; /* 数字を左右中央へ配置 */
  align-items:center; /* 数字を上下中央へ配置 */
  width:48px; /* ボタンの横幅。値を大きくすると横に広がる */
  height:48px; /* ボタンの高さ。値を大きくすると高くなる */
  padding:0; /* ボタン内側の余白を削除 */
  border:1px solid #d1d5db; /* 通常時の枠線 */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-weight:700; /* ページ番号を太字にする */
  cursor:pointer; /* マウスを重ねたときポインターを表示 */
  box-sizing:border-box; /* paddingとborderを横幅・高さへ含める */
  box-shadow:0 5px 0 #cbd5e1; /* 下側5pxの影で厚みを付ける。値を大きくすると立体感が強くなる */
  transform:translateY(0); /* 通常時は上下へ移動しない */
  transition:
    background-color .3s ease,
    border-color .3s ease,
    color .3s ease,
    box-shadow .15s ease,
    transform .15s ease;
  /*
    色は0.3秒、影と移動は0.15秒で切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* ページ番号へマウスを重ねたとき */
.three-dimensional-pagination_button:hover{
  border-color:#2563eb; /* 枠線を青色へ変更 */
  background:#2563eb; /* 背景を青色へ変更 */
  color:#ffffff; /* 文字を白色へ変更 */
  box-shadow:0 5px 0 #1d4ed8; /* 影を濃い青色へ変更 */
}

/* ページ番号を押している間 */
.three-dimensional-pagination_button:active{
  box-shadow:0 1px 0 #1d4ed8; /* 影を1pxまで小さくして押し込んだ状態を表現 */
  transform:translateY(4px); /* 4px下へ移動。値を大きくすると押し込み量が増える */
}

/* 現在選択しているページ番号 */
.three-dimensional-pagination_button.is-current{
  border-color:#2563eb; /* 選択中の枠線色 */
  background:#2563eb; /* 選択中の背景色 */
  color:#ffffff; /* 選択中の文字色 */
  box-shadow:0 5px 0 #1d4ed8; /* 選択中のボタンにも下側5pxの影を付ける */
}

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

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

  /* 記事カード */
  .three-dimensional-pagination_card{
    padding:20px 16px; /* スマートフォンではカード内側の余白を小さくする */
  }

  /* ページ番号ボタン */
  .three-dimensional-pagination_button{
    width:44px; /* スマートフォンでは横幅を44pxにする */
    height:44px; /* スマートフォンでは高さを44pxにする */
  }

}

// すべての記事カードを取得
const threeDimensionalPaginationCards =
  document.querySelectorAll(
    "[data-three-dimensional-pagination-card]"
  );

// すべてのページ番号ボタンを取得
const threeDimensionalPaginationButtons =
  document.querySelectorAll(
    "[data-three-dimensional-pagination-page]"
  );

// 1ページに表示する記事カードの件数
// 2を変更すると1ページあたりの表示件数を変更できる
const threeDimensionalPaginationItemsPerPage = 2;

// 指定したページの記事カードを表示する関数
function threeDimensionalPaginationShowPage(page){

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

  // 表示を終了する記事カードの位置を計算
  const endIndex =
    startIndex + threeDimensionalPaginationItemsPerPage;

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

    // 指定したページに含まれない記事カードを非表示にする
    card.hidden =
      index < startIndex || index >= endIndex;

  });

  // すべてのページ番号ボタンを順番に確認
  threeDimensionalPaginationButtons.forEach(function(button){

    // 現在表示しているページ番号か確認
    const isCurrent =
      Number(button.dataset.threeDimensionalPaginationPage) === page;

    // 現在のページ番号だけis-currentを付ける
    button.classList.toggle(
      "is-current",
      isCurrent
    );

    // 現在のページ番号へaria-currentを設定
    if(isCurrent){

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

    }else{

      // 現在のページ以外はaria-currentを削除
      button.removeAttribute(
        "aria-current"
      );

    }

  });

}

// 各ページ番号へクリック処理を設定
threeDimensionalPaginationButtons.forEach(function(button){

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

    // クリックしたページ番号の記事カードを表示
    threeDimensionalPaginationShowPage(
      Number(button.dataset.threeDimensionalPaginationPage)
    );

  });

});

// 最初は1ページ目を表示
threeDimensionalPaginationShowPage(1);

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML、CSS、JavaScriptの3ファイルで構成されています。HTMLでは10枚の記事カードと1〜5のページ番号を作成し、CSSでは記事一覧のデザインとページ番号の立体的な影、押したときの動きを設定します。JavaScriptではページ番号のクリックに合わせて記事カードを1ページにつき2枚ずつ切り替えます。

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

各ファイルの役割
index.htmlはページネーション全体を構成するファイルです。「記事一覧」のタイトル、説明文、10枚の記事カード、1〜5のページ番号を変更できます。記事カードを増減する場合は、ページ番号の数や1ページに表示する件数との組み合わせも確認してください。

style.cssはページネーション全体のデザインを設定するファイルです。全体の余白、記事カードのデザイン、ページ番号のサイズ、色、角丸、間隔、影などを変更できます。ページ番号には下方向の影を付け、押している間はボタンを下へ移動して影を小さくすることで立体的な動きを表現しています。

script.jsはページ番号をクリックしたときの記事カード切り替えを行うファイルです。1ページに表示する記事カードの件数を設定し、選択したページに対応する記事カードだけを表示します。また、現在選択しているページ番号へis-currentとaria-current="page"を設定します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、追加のライブラリは必要ありません。表示された1〜5のページ番号をクリックすると、選択したページに合わせて10枚の記事カードが2枚ずつ切り替わります。

カスタマイズできる内容
index.htmlでは「記事一覧」のタイトル、説明文、各記事カードの番号・タイトル・説明文、ページ番号を変更できます。実際の記事一覧や商品一覧などへ利用する場合は、各カードの内容を用途に合わせて変更してください。

style.cssではページネーション全体の余白や背景色、記事カードの余白・枠線・角丸、ページ番号のサイズ・色・角丸・間隔・影を変更できます。box-shadowの下方向の値とtransform:translateY()を調整すると、ページ番号の厚みや押し込んだときの移動量を変更できます。

script.jsではthreeDimensionalPaginationItemsPerPageの値を変更することで、1ページに表示する記事カードの件数を調整できます。

数値調整
style.css
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;
記事カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

margin-top:28px;
記事カードとページ番号の間隔です。28pxを大きくすると間隔が広がり、小さくすると狭くなります。

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

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

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

box-shadow:0 5px 0 #cbd5e1;
通常時のページ番号ボタンの影です。5pxを大きくすると下方向の影が広がり、ボタンの厚みが強く見えるようになります。

box-shadow:0 1px 0 #1d4ed8;
ページ番号を押している間の影です。通常時の5pxから1pxへ小さくすることで、ボタンを押し込んだように見せています。

transform:translateY(4px);
ページ番号を押している間に下方向へ移動する距離です。4pxを大きくすると押し込み量が増え、小さくすると動きが控えめになります。

transition:.3s・transition:.15s
色、影、位置が切り替わる時間です。.3sや.15sの値を大きくするとゆっくり、小さくすると速く変化します。

script.js
const threeDimensionalPaginationItemsPerPage = 2;
1ページに表示する記事カードの件数です。2を3へ変更すると、1ページにつき3枚の記事カードを表示する設定になります。記事カードの総数に合わせてページ番号も調整してください。

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