Amazonサイバーマンデー開催中!12/9まで!

コピペで簡単!ページ送りのデザインCSS 35選まとめ【ページャー・ページネーション】

ブログや更新コンテンツを埋め込む際に必要になってくるのがページ送り(ページャー・ページネイション)。

最近はシンプルなデザインが流行っている傾向にありますが、シンプル故にページ送りのような部分はどうしても毎回同じようなデザインになってしまいがち。

そこで今回は30種類以上のページ送り(ページャー・ページネイション)のデザインCSSをご紹介します。

コピペで簡単に導入も出来るのでぜひデザインの参考にしてみてください。

目次

パックマンがページャーを食べるアニメーションページャー(ページネーション)

See the Pen
Pac-Man CSS Pagination
by Paraskevas Dinakis (@perry_nt)
on CodePen.


クリックでコンテンツごと動くアニメーションページャー(ページネーション)

See the Pen
Pagination Pure CSS
by Henrique Rodrigues (@hjdesigner)
on CodePen.


クリックで円が移動するアニメーションページャー(ページネーション)

See the Pen
Pacman pagination
by Mikael Ainalem (@ainalem)
on CodePen.


クリックで円が移動するアニメーションページャー(ページネーション)2

See the Pen
Pagination
by JP Nothard (@Funsella)
on CodePen.


クリックで円が移動するアニメーションページャー(ページネーション)3

See the Pen
Infinite Pagination
by Mariusz Dabrowski (@MarioD)
on CodePen.

クリックで円が移動するアニメーションページャー(ページネーション)4

See the Pen
SVG Page Hopper
by Chris Gannon (@chrisgannon)
on CodePen.

クリックで円が移動するアニメーションページャー(ページネーション)5

See the Pen
Dot Hopper – Pagination
by Elliot Geno (@pyrografix)
on CodePen.

クリックでボタンサイズが変わるページャー(ページネーション)

See the Pen
Pagination Buttons (Pure CSS)
by MARK (@defaultclass)
on CodePen.

インジケータ風ページャー(ページネーション)

See the Pen
pagination indicators
by Moses Holmström (@thykka)
on CodePen.

ウィンドウサイズに合わせて表示数が変わるページャー(ページネーション)

See the Pen
Pagination, pager
by Elmira Mukhamedjanova (@ElmiraMukhamedjanova)
on CodePen.

ウィンドウサイズに合わせて表示数が変わるページャー(ページネーション)2

See the Pen
responsive pagination
by Milica (@micadev)
on CodePen.

クリックで文字が表示されるページャー(ページネーション)

See the Pen
Roman Pagination
by Michael Sveistrup (@faffelkugel)
on CodePen.

ホバーで下線が動くアニメーションページャー(ページネーション)

See the Pen
Line Pagination with Hover (PureCSS)
by MARK (@defaultclass)
on CodePen.

ホバーで遷移リンクが浮かび上がるアニメーションページャー(ページネーション)

See the Pen
pagination hover animation
by Elena Nazarova (@nazarelen)
on CodePen.

縦向きアニメーションページャー(ページネーション)

See the Pen
CSS Line Follow Pagination
by MARK (@defaultclass)
on CodePen.

動く矢印を使ったアニメーションページャー(ページネーション)

See the Pen
Flexing pagination arrows
by Hakim El Hattab (@hakimel)
on CodePen.

6種のページャーデザイン

See the Pen
Pagination with CSS Custom Properties
by Stas Melnikov (@melnik909)
on CodePen.

12種のシンプルなページャーデザイン

See the Pen
Pagination
by Rosa (@RRoberts)
on CodePen.

シンプルなページャー(ページネーション)

See the Pen
Pagination
by Robert (@robertcooper_rc)
on CodePen.

円形ページャー(ページネーション)

See the Pen
Roundie Pagination
by ahmed beheiry (@ahmedbeheiry)
on CodePen.