
HTML・CSSでつくるページネーションのデザインサンプル3選
ブログやWebアプリケーションで必要となることの多い「ページネーション(ページ番号)」のデザインサンプルをまとめました。シンプルなものからオシャレなものまで、どれもコピペで取り入れることが可能です。ユーザビリティを重視するのはもちろんのこと、ご自身のサイトと親和性の高いデザインのものを選んでみてください。
単色のページネーション
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;
}
灰色背景のページネーション
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;
}
下線付きのページネーション
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;
}
文字色・枠線の色を統一したページネーション。テーマカラーが黒寄りの色のサイトの場合におすすめのデザインです。