2022年6月17日SHAREツイートシェアはてブLINEPocket今回は、ページネーション(ページャー、ページ送り)のデザインをHTMLとCSSのサンプルと共にご紹介します。汎用的なデザインを集めているのでページネーションのコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。本サンプルでは、リセットCSSにdestyle.css(https://github.com/nicolas-cusan/destyle.css)を使っています。HTMLとCSSをコピペする前に、事前に以下のCDNでデフォルトのブラウザスタイルをリセットしてからお試しください。href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.min.css">HTMLのテンプレート今回のテーブルは全て同じHTMLを使用して、CSSのみの変更でデザインを表現しています。</li></ul>丸いページネーション丸いページネーションのデザイン丸くてかわいいページネーションです。8px;}四角いページネーション四角いページネーションのデザイン四角いページネーションです。させたいときはこちらがおすすめです。12px;}丸いくっついたページネーション丸いくっついたページネーションのデザイン丸いページネーションのくっついたバージョンです。#fff;}四角いくっついたページネーション四角いくっついたページネーションのデザイン四角いページネーションのくっついたバージョンです。#fff;}ベーシックな青いテキストのページネーションベーシックなテキストのページネーションのデザインベーシックなテキストのページネーションです。0.5;}ベーシックな黒枠のページネーションベーシックな黒枠のページネーションのデザインベーシックな黒枠のページネーションです。