ホームページ作成/リンクの表示・装飾 (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. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます