HTML・CSSでつくるページネーションのデザインサンプル3選

ブログやWebアプリケーションで必要となることの多い「ページネーション(ページ番号)」のデザインサンプルをまとめました。シンプルなものからオシャレなものまで、どれもコピペで取り入れることが可能です。ユーザビリティを重視するのはもちろんのこと、ご自身のサイトと親和性の高いデザインのものを選んでみてください。

単色のページネーション

単色のページネーション

step1
デザインを調整する
  • 形状
  • 「前へ・次へ」ボタン
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

文字色・枠線の色を統一したページネーション。テーマカラーが黒寄りの色のサイトの場合におすすめのデザインです。

step2
HTMLをコピペする
HTML
<ol class="pagination-001">
    <li class="prev"><a href="#"><</a></li>
    <li><a href="#">1</a></li>
    <li class="current"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">></a></li>
</ol>
step3
CSSをコピペする
CSS
.pagination-001 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
}

.pagination-001 a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border: 1px solid #2589d0;
    border-radius: 1px;
    color: #2589d0;
}

.pagination-001 a:not(:hover) {
    text-decoration: none;
}

.pagination-001 .current a {
    background-color: #2589d0;
    color: #fff;
    pointer-events: none;
}
灰色背景のページネーション

灰色背景のページネーション

step1
デザインを調整する
  • 形状
  • 「前へ・次へ」ボタン
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

どんな色とも親和性の高い灰色を背景としたページネーション。マテリアルデザインが好きな方にもおすすめです。

step2
HTMLをコピペする
HTML
<ol class="pagination-002">
    <li class="prev"><a href="#"><</a></li>
    <li><a href="#">1</a></li>
    <li class="current"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">></a></li>
</ol>
step3
CSSをコピペする
CSS
.pagination-002 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
}

.pagination-002 a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border-radius: 1px;
    background-color: #f2f2f2;
    color: #2589d0;
}

.pagination-002 a:not(:hover) {
    text-decoration: none;
}

.pagination-002 .current a {
    background-color: #2589d0;
    color: #fff;
    pointer-events: none;
}
下線付きのページネーション

下線付きのページネーション

step1
デザインを調整する
  • 「前へ・次へ」ボタン
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

下線のみを付けた、コンパクトなページネーション。スッキリしつつも現在のページを視認しやすいデザインでもあります。

step2
HTMLをコピペする
HTML
<ol class="pagination-003">
    <li class="prev"><a href="#"><</a></li>
    <li><a href="#">1</a></li>
    <li class="current"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">></a></li>
</ol>
step3
CSSをコピペする
CSS
.pagination-003 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
}

.pagination-003 a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border-bottom: 2px solid #e2e2e2;
    color: #333;
    text-decoration: none;
}

.pagination-003 .current a {
    border-bottom: 2px solid #2589d0;
    pointer-events: none;
}