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

押し下がるのはボタンだけじゃない

ボタンはクリックすると押し下がりますね。 しかし、テキストリンクや画像リンクでは、ボタンのように押し下がったりしません。

では、この サンプルリンク の上にマウスを乗せてみて下さい。

どうでしょうか？
リンクになっているテキストがちょっとだけ押し下がりませんでしたか？
画像リンクでも同様です。下の画像リンクにマウスを乗せてみて下さい。

また、押し下がる量（距離）も自由自在です。

こちらの サンプルリンク の上にマウスを乗せてみて下さい。
先ほどのサンプルよりも深く押し下がるはずです。

今回は、上記のサンプルのように、テキストリンクや画像リンクも、ボタンなどのように押し下げられるようにする方法をご紹介致します。
スクリプトは不使用で、実現方法はとても簡単です。

たったこれだけのスタイルシート

実現するには、下記のように1行のスタイルシートを記述するだけで済みます。

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

「a:hover」は、リンクの上にマウスが乗ったときのスタイルを指定する記述です。
（※記述している内容の詳細は後述）

実際にHTML内に記述する際は、次のように記述します。

<style type="text/css">
  a:hover { position: relative; top: 1px; left: 1px; } </style>

さて、なぜ上記のスタイルでテキストリンクや画像リンクを押し下げることができるのでしょうか？
また、押し下げる量（距離）を調節するにはどうすればよいでしょうか？
その点を次のページでご紹介致します。

それでは、次のページへ！ →