ホームページ作成

【ホームページ作成】箱形のページ移動リンクを作る

リンクの表示・装飾 (HTML,CSS,JavaScript)

更新日：2007年06月12日

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

西村文宏

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

カスタマイズいろいろ（後半）

■文字を加える

ページ番号群の左隣に文字を配置したい場合は、ul要素の直前で以下のように記述します。

<p class="linkhead">ページ番号：</p>

<ul class="pagelinks"> ～ </ul>

ここでは、「linkhead」というクラス名を付加したp要素を記述しています。これに対してスタイルシートで以下のように装飾します。

p.linkhead {

   float: left;    /* 横に並べる */

   margin: 0px;    /* 余白をなくす */

   font-size: 80%; /* 文字を小さく */

   padding-top: 0.4em; /* 上側の余白 */

}

すると、以下のように見えます。

ページ番号：

■文字サイズを大きくする

文字サイズを大きくするには、ul要素に対してfont-sizeプロパティを使って望みの大きさを指定します。

ul.pagelinks {

   font-size: 150%;

}

上記では値に「150%」を指定しているので、1.5倍の大きさで表示されます。

おわりに

今回は、ページ番号を枠で囲んだ「箱形のページ移動リンク」を作る方法をご紹介いたしました。複数のページから構成されるコンテンツに使ってみて下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！