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

2022/1/12022/1/2

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

単色のページネーション

基調色：#2589d0
形状正方形円
「前へ・次へ」ボタンなしあり

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

<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>

.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;
}

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

基調色：#2589d0
形状正方形円
「前へ・次へ」ボタンなしあり

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

<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>

.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;
}

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

下線の色：#e2e2e2
下線(アクティブ)の色：#2589d0
「前へ・次へ」ボタンなしあり

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

<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>

.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;
}