掲載日： 2007年 06月 12日
箱形のページ移動リンクを作る
見やすくクリックしやすい箱形ページ番号
一部のニュース系サイトなどで見かける、箱形のページ移動リンクを作ってみましょう。
ただ数字を並べるだけよりも大きく見えるので、分かりやすくてクリックしやすいリンクになります。
例えば以下のようなものです。
上記では、画像は使っていません。ページ番号はすべてテキスト（文字）です。ですから、大きさの変更が可能です。 ブラウザの設定で文字サイズを変更すると、ページ番号の大きさも変化します。
上記は、ページが10まであって3ページ目が表示されている場合の例です。 「3」の部分だけ色が変わっていてクリックできないのはそのためです。
テキストですから、数字以外も使用可能です。例えば、A・B・C…なども使えます。使ってみた例は下記の通りです。
もちろん、日本語も使えます。上記の3つのサンプルでは文字サイズを指定していません。 大きめに表示したいなら、以下のように文字サイズを指定しておくこともできます。（font-sizeプロパティに値「140%」を指定した例）
これくらい大きいと、ずいぶんクリックしやすいでしょう。
今回は、このような箱形のページ移動リンクを作る方法をご紹介いたします。
