リンクの上部に矢印を出す場合のソース
矢印をリンクの上部に表示させる場合は、以下のように記述します。 右端に表示させる場合と、ほとんど同じです。
■HTMLソース
HTMLでは、先ほどと同様に特に工夫する点はありません。ただ、リンクを書くだけです。 （装飾範囲を限定するために、リンク全体を囲むdiv要素に「sample」というクラス名を付加しています。）
[ <a href="a.html">リンク１</a> ]
[ <a href="b.html">リンク２</a> ]
[ <a href="c.html">リンク３</a> ]
[ <a href="d.html">リンク４</a> ]
[ <a href="e.html">リンク５</a> ]
</div>
■スタイルシートソース
先ほどのソースと異なるのは、余白を設ける位置が上部（top）になっている点と、 背景画像の表示位置が上端の中央（top center）になっている点だけです。 （ここでは、表示させる矢印画像のファイル名は「greenallow.gif」としています。）
padding-top: 12px; /* １ */
line-height: 1.4;
}
div.sample a:hover {
background-image: url("greenallow.gif");
background-repeat: no-repeat;
background-position: top center; /* ２ */
}
ほとんど、先ほどのソースと同じなので、異なる部分のみ説明しておきます。
- 矢印画像の高さは15pxですが、少し文字と重ねて表示させるため、余白は12pxだけにしています。つまり、画像と文字が3ピクセルだけ重なります。画像の方が下側（背景）に表示されるので、文字が読めなくなることはありません。
- 背景画像の表示位置を「（上下方向の）上端・（左右方向の）中央」になるよう指定しています。
なお、必須ではありませんが、「メニューバー」のように見せるべくdiv要素に以下のようなスタイルを適用します。
background-color: #ccffcc;
color: green;
border:green solid 1px;
padding: 0.3em;
margin: 1em;
}
背景色を淡い緑色(#ccffcc)にし、文字色を緑色(green)にし、枠線を緑色で1ピクセルの実線(green solid 1px)、内側の余白を0.3文字分設け、外側の余白を1文字分設ける装飾です。
■表示例
上記のHTMLとスタイルシートを表示させると、以下のように見えます。
リンクにマウスポインタを載せると、上部に矢印（
）が表示されるはずです。
おわりに
今回は、スタイルシートを使ってリンクの横や上に矢印画像を表示させる方法をご紹介いたしました。 簡単にできて目立つ装飾ですから、ぜひ活用してみて下さい。 使っているのは「hover疑似クラス」と「背景画像の指定」だけでスクリプトは使っていませんから、多くのブラウザで実現可能です。
なお、本記事中で使用した矢印画像（
・）は、ご自由にダウンロードしてご活用下さって構いません。 大した出来ではないので、使いたいと思う人が居るかどうかは分かりませんが、サンプルをそのまま試す際などにご活用下さい。 画像を右クリックして「画像を保存」などのメニューから保存可能です。）
【関連記事】
