【ホームページ作成】どのリンクが選択中なのかを際立たせる装飾

メニューやリンクリストに活用するとおもしろいかも？

リンクの上にマウスポインタを載せると装飾が変化するデザインは、よく使われていますね。 では、リンクの上にマウスを載せたときに、リンクの横や上などに矢印を表示させる装飾はいかがでしょうか。

以下のリンクにマウスポインタを重ねてみてください。

リンクにポインタを重ねると、リンク文字の右側に赤色の矢印（）が現れるはずです。 リンクからマウスを放すと、矢印は消えます。 動的に矢印画像が表示されたり消えたりしますが、ここではスクリプトは一切使っていません。スタイルシートだけで実現しています。

ここで表示しているリンクは、通常のテキストリンク（文字で書いたリンク）です。 どんな文字を何文字表示させているリンクの横でも実現可能です。

矢印でなくても表示可能

もちろん、表示させるのは矢印である必要はありません。以下のような装飾も可能です。 リンクにマウスポインタを重ねてみてください。

今度は、「」のような画像が表示されたはずです。
同時に文字色も変化させていることから気づかれたかもしれませんが、 これらの装飾はスタイルシートの「hover疑似クラス」を使うことで実現しています。 何も特別な方法は使っていません。
※「hover疑似クラス」は、リンクにマウスが載ったときに文字色や背景色を変化させるためによく使われるスタイルシートの記述方法です。

横でなくても表示可能

もちろん、表示場所は横に限りません。以下の例では、横方向に並んだリンクの上側に矢印（）を表示させています。 似たような装飾でリンクが並んでいる「メニュー」項目用の装飾などとして活用するとおもしろそうです。

これらの装飾は、スタイルシートのみで実現できます。 画像の表示・非表示の切り替えにスクリプトを用いたりはしていません。 非常にシンプルなスタイルシートで実現できますから、既存のページに適用することもとても簡単です。

今回は、このようなリンクの装飾方法をご紹介いたします。

それでは、作成方法へ >>