今回は、ページネーション(ページャー、ページ送り)のデザインをHTMLとCSSのサンプルと共にご紹介します。汎用的なデザインを集めているのでページネーションのコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。
事前準備
本サンプルでは、リセットCSSにdestyle.css(https://github.com/nicolas-cusan/destyle.css)を使っています。HTMLとCSSをコピペする前に、事前に以下のCDNでデフォルトのブラウザスタイルをリセットしてからお試しください。
HTMLのテンプレート
今回のテーブルは全て同じHTMLを使用して、CSSのみの変更でデザインを表現しています。
丸いページネーション

丸くてかわいいページネーションです。
四角いページネーション

四角いページネーションです。シュッとさせたいときはこちらがおすすめです。
丸いくっついたページネーション

丸いページネーションのくっついたバージョンです。
四角いくっついたページネーション

四角いページネーションのくっついたバージョンです。
ベーシックな青いテキストのページネーション

ベーシックなテキストのページネーションです。
ベーシックな黒枠のページネーション

ベーシックな黒枠のページネーションです。
関連記事
見出しのコピペ実装記事はこちら

カードのコピペ実装記事はこちら
