【ホームページ作成】マウスが乗ると押し下がるテキストリンクの作り方

なぜテキストや画像が押し下がるのか？

さて、次のスタイルシートでなぜリンクが押し下がるように見えるのでしょうか？

position:relative;
top:1px;
left:1px;

ここでは、プロパティが3つ指定されていることがお分かり頂けると思います。 positionプロパティ、 topプロパティ、 leftプロパティ の3つです。

◆positionプロパティ：
positionプロパティは、表示位置を指定するプロパティです。
値に「relative」を指定すると、『本来表示される位置から、指定された距離だけ相対的に移動した位置に表示』させることができるようになります。

※ちなみに、positionプロパティの値は、デフォルトでは static を指定したことになります。この指定では本来の位置に表示されるだけで、相対的にも絶対的にも移動しません。
値に fixed を指定すると、ウインドウの端を基準にして絶対的に位置を指定できるようになります。 また、値に absolute を指定すると、その要素から最も近い階層にあるボックスの端を基準にして絶対的に位置を指定できるようになります。

◆topプロパティ、leftプロパティ：
topプロパティ・leftプロパティは、基準になるボックスの端からの距離を指定するプロパティです。
※positionプロパティの値が relative・fixed・absolute のどれかである場合にのみ有効なプロパティです。

topは上からの距離、leftは左からの距離です。 他にも、bottom（下からの距離）・right（右からの距離）というプロパティもあります。

◆position:relative; top:1px; left:1px;：
さて、ここでは、positionプロパティの値がrelative、 topプロパティの値が1px、leftプロパティの値が1px となっています。

従って、『 本来表示される位置から、上端から1ピクセル・左端から1ピクセル相対的に移動した位置に表示する 』という意味になります。

それが、人の目には「押し下がっている」ように見えるわけです。

もっと深く押し下げるには？

もっと深く押し下がるように見せるには、 topプロパティとleftプロパティの値を、1pxよりも大きな値にします。 あまり大きな値を指定すると離れすぎますから、3pxあたりが限度でしょう。

おわりに

今回は、テキストリンクもボタンのように押し下げられるようにする方法をご紹介致しました。
ぜひ、みなさんのページでもお試し下さい。

【関連記事】

• スクロールバーに色を付けたい！
• リストの先頭記号を画像にしたい
• フォームの大きさを揃えたい