ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

箱形のページ移動リンクを作る

ニュースサイトなどでたまに見かける箱形のページ移動リンクを作ってみましょう。ただ数字を並べるよりも幅が広くて見やすく、クリックしやすいメリットがあります。画像ではなく文字なので、サイズ変更も可能です。

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

見やすくクリックしやすい箱形ページ番号

一部のニュース系サイトなどで見かける、箱形のページ移動リンクを作ってみましょう。 ただ数字を並べるだけよりも大きく見えるので、分かりやすくてクリックしやすいリンクになります。
例えば以下のようなものです。

Page:

 

上記では、画像は使っていません。ページ番号はすべてテキスト(文字)です。ですから、大きさの変更が可能です。 ブラウザの設定で文字サイズを変更すると、ページ番号の大きさも変化します。

上記は、ページが10まであって3ページ目が表示されている場合の例です。 「3」の部分だけ色が変わっていてクリックできないのはそのためです。

テキストですから、数字以外も使用可能です。例えば、A・B・C…なども使えます。使ってみた例は下記の通りです。

Page:

 
もちろん、日本語も使えます。

ページ:

 

上記の3つのサンプルでは文字サイズを指定していません。 大きめに表示したいなら、以下のように文字サイズを指定しておくこともできます。(font-sizeプロパティに値「140%」を指定した例)

 

これくらい大きいと、ずいぶんクリックしやすいでしょう。

今回は、このような箱形のページ移動リンクを作る方法をご紹介いたします。

箱形ページ移動リンクの作成方法へ >>

  • 1
  • 2
  • 3
  • 9
  • 次のページへ

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます