スッキリしたページネーションリンクを作る

· by · in

See the Pen DLCep by KaBuKi (@kabuki) on CodePen.


こちらのサンプル通り。

ページネーションリンクを作るたび枠線が重なる問題は前々からよくありましたが、そのたびほんの少し迷った上で、結局リンクをボーダーで区切らないデザインにすることが多かったのですが、もうちゃんと解決しとくかと思ったら簡単にできました。

正直「position: relative」だけでなぜ解決するのかは分からない。

余談：CodePenが楽しい

今回サンプル表示にCodePenを使いましたが、最近CodePenで色々実験するのが楽しいです。

仕事用アカウントで社内向けのtips的に使ったり、備忘録的に残したりと色々書いているのですが、ブログ用に私用アカウントも作ったりしました。　…というか身バレしても困ることも無いので公私でアカウント分けるのもそろそろ面倒だなーと思ったりしてますが。

みんなもっとCodePenを使えばいいと思います。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: