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

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

シンプルなページネーション

単色

単色

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
  • 「前へ・次へ」ボタン
灰色背景

灰色背景

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
  • 「前へ・次へ」ボタン
下線付き

下線付き

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 「前へ・次へ」ボタン