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

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

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

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

• STEP.1 リスト全体の装飾
• STEP.2 各項目を箱形に見えるよう装飾
• STEP.3 リンクに対する装飾
• STEP.4 マウスが載ったときの装飾
• STEP.5 現在位置を示す項目の装飾

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

STEP.1 リスト全体の装飾

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

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

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

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

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

各項目を箱形に装飾する方法へ >>