テキストリンクの場合にも「押し下がる効果」を出したい

テキストリンクの場合でも、視覚的に押し下がる効果が出るように装飾すると「どの範囲のリンクを押そうとしているのか」が明示できて分かりやすいかもしれません。

例えば、以下のボックス内にはリンクが1つあります。このリンクテキストの上にマウスポインタを載せると、テキストが押し下がったように見えるはずです。

上記の例では、リンクの上にマウスポインタを載せると、右側に2ピクセル・下側に2ピクセルずれて表示されるため、リンクが「押し込まれた」ように見えます。

リンクテキストが押し込まれたように見えるスタイルシート

上記のような装飾を作るには、以下のようにCSSソースを記述します。ここでは、a要素のhover疑似クラスに対して指定しているので、a要素(リンク)の上にマウスが載った際にこの装飾が適用されます。

a:hover {
   position: relative;
   top: 2px;
   left: 2px;
}

まず、positionプロパティに値「relative」を指定すると、本来表示される位置から相対的に表示位置をずらすことができます。ずらす距離は、top・bottom・left・right各プロパティの中から2個を使って指定します。
上記の場合は、topプロパティとleftプロパティに2pxを指定しているため、

• 本来表示される位置の上端から（下方向へ）2ピクセル移動
• 本来表示される位置の左端から（右方向へ）2ピクセル移動

のように表示(＝右下方向にずれて表示)されることになります。
その結果、テキストリンクが押し下がったように見えるわけです。
どれくらいの距離を移動させるかは、top・left各プロパティの値を調節すれば自由に決定できます。

※右へずらしたいからといってrightプロパティを使ってしまうと逆方向(左)へ移動してしまうので注意して下さい。「右へ3pxずらしたい」場合は、「左端から3pxの距離へ動かす」ことになるので「left: 3px;」と書く必要があります。

(更新日：2016年02月16日)