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

マウスが乗ると押し下がるテキストリンクの作り方(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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あたりが限度でしょう。

おわりに

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

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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