ページングの文字を拡大して選択しやすくする

ページングというのは以下のようなものです。

1 2 3 4 5 6 7 8 9 10 

アマゾンやグーグルなどでおなじみではないでしょうか。ページがたくさんある場合などでよく使われます。
ただ、数字番号同士が近すぎると間違って選んでしまったりして、ちょっとイライラするので改良して見ました。
こんな感じ
zoompaging1.gif

サンプルはこちら。
文字サイズを小さめにしていますが、マウスオーバーで拡大するので選びやすくなったと思います。
CSSだけで実装しているのでサンプルのソースを参考ください。
参考:ソシオメディア | ページング

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中