リンクの横に矢印を表示させる場合のソース
それでは、実際のソースをご紹介いたします。
■HTMLソース
HTMLでは、特に工夫する点はありません。ただ、リンクを書けば良いだけです。 以下は、ul要素とli要素を使ってリストにしています。 （特定の箇所のみを対象にして装飾を施すため、ul要素にはクラス名「sample」を付加しています。）
<ul class="sample">
<li><a href="a.html">リンク１</a></li>
<li><a href="b.html">リンク２</a></li>
<li><a href="c.html">リンク３</a></li>
<li><a href="d.html">リンク４</a></li>
<li><a href="e.html">リンク５</a></li>
</ul>
<li><a href="a.html">リンク１</a></li>
<li><a href="b.html">リンク２</a></li>
<li><a href="c.html">リンク３</a></li>
<li><a href="d.html">リンク４</a></li>
<li><a href="e.html">リンク５</a></li>
</ul>
■スタイルシートソース
リンクに対して内側の余白を設けておき、hover疑似クラスを使って、マウスポインタが載ったときの装飾を記述します。 ここでは、表示させる矢印画像のファイル名は「redallow.gif」としています。
ul.sample a {
padding-right: 21px; /* １ */
line-height: 1.4; /* ２ */
}
ul.sample a:hover {
background-image: url("redallow.gif"); /* ３ */
background-repeat: no-repeat; /* ４ */
background-position: center right; /* ５ */
color: red; /* ６ */
}
padding-right: 21px; /* １ */
line-height: 1.4; /* ２ */
}
ul.sample a:hover {
background-image: url("redallow.gif"); /* ３ */
background-repeat: no-repeat; /* ４ */
background-position: center right; /* ５ */
color: red; /* ６ */
}
１～２は、リンク（常時）に対しての装飾。３～６は、マウスが載った場合のリンクに対しての装飾です。詳しい説明は以下の通りです。
- 矢印画像の横幅が18ピクセルなので、3ピクセルほど余裕を持たせて21ピクセルの余白を指定しています。
- 行間を広めに取っています。これはリンクリストの見栄えの問題なので、必須ではありません。
- 矢印画像を背景画像として指定しています。
- 背景画像の繰り返しをなくし、1つだけ表示されるようにしています。
- 背景画像の表示位置を右端に設定しています。
- 文字色を赤色に変更する指定です。これは必須ではありませんから、省略しても構いません。
■表示例
上記のHTMLとスタイルシートを表示させると、以下のように見えます。
リンクにマウスポインタを載せると、右端に矢印（
）が表示されます。
■もっと短いスタイルシートの書き方
先ほどのスタイルシートでは、background-imageプロパティ、background-repeatプロパティ、background-positionプロパティの3つのプロパティを別々に記述しました。 これらのプロパティは、backgroundプロパティで一括指定ができます。 例えば、以下のように1行で記述しても、まったく同じ意味になります。
background: url("redallow.gif") no-repeat center right;
どちらでも、好きな方で記述すると良いでしょう。
慣れないうちは、面倒でも細かくプロパティを分けて記述しておく方が、後から見直したときに記述目的が分かりやすくて良いかもしれません。
さて、最後に、矢印を右端ではなく上部に表示させる場合のソースをご紹介いたします。
