3/9 箱形のページ移動リンクを作る [ホームページ作成] All About

箱形のページ移動リンクを作る(3ページ目)

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

箱形のページ移動リンクに見えるよう装飾

先ほどのリスト項目1つ1つを「箱形」に装飾します。
記述するスタイルシートソースが多いので、順番に少しずつ説明していきます。

【スタイルシートソース解説の目次】

スタイルシートソースをすべて解説した後、すべてのソースのまとめと、いくつかのカスタマイズ方法をご紹介いたします。

まずは、リスト全体の余白を消すため、以下のようにスタイルを記述します。

/* リスト全体 */

ul.pagelinks {

   margin: 0px;

   padding: 0px;

}

代表的なブラウザでは、リストにあらかじめ余白が指定されています。とりあえず、その余白を消してしまいましょう。 marginプロパティとpaddingプロパティに値「0px」を指定することで余白を消せます。

上記のスタイルシートだけを適用すると、以下のように見えます。

上下左右の余白が消えて、ぴったり端に寄って見えます。
※この記事内では、All About側のCSSも適用されているため、実際の見え方とは少々異なる場合があります。

次に、リストの各項目を箱形に見えるよう装飾します。