ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

マウスが乗ると押し下がるテキストリンクの作り方

ボタンはクリックすると押し下がりますね。でも、テキストリンクは押し下がったりしません。テキストリンクもボタンのように押し下げられるようにしてみませんか? 方法はとっても簡単。スクリプトは使いません。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

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

(画像リンクのサンプル)

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

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

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

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

実現するには、下記のように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>

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

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

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます