スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リンクにマウスオーバーした時に文字を揺らさないように枠線を表示させる方法

自分が知っている事は他人も知っていると思ってしまう事が多々ある(良い意味で)。例えば自分にはHTMLやCSSについて経験から学んだ知識が多少あります。しかし自分如きが理解できたのだから、それを記事にする必要は無いと思ってしまいます。自分が学んだという事は既出なのです。そしてそれを解説を読んで学んだのではなく、ソースを見て学んだのだとしたら尚更の事、解説する必要は感じなくなります。それがサイトで使用しているものの場合、知りたければソースを見れば良い訳ですし。今日はそんな風に思っている技術を紹介しようと思っています。

その技術はこのサイトでも使われている、リンクにマウスオーバーした時に枠線を表示させる方法です。もちろんそれ自体は簡単な事で a:hover{border:1px solid #00f;} とでもすれば良いのですが、これだと何も無かった所に急に枠線が表示されるのでその枠線の太さの分だけ文字が動きます。だとすれば a:link{border:1px solid transparent;} として置けば良いのですが、残念な事にIEはこれを認識しません。それなら a:link{border:1px solid 背景と同じ色;} にすれば解決するのですが、リンクが登場する場所の背景色がいつも同じ色だとは限りませんし、その場所毎に指定するのは面倒です。更に背景に画像を使用している場合も考えなければなりません。そこで登場するのが padding です。以下に記載するソースを見て頂ければ直ぐに理解できると思いますが、簡単に説明すると a:hover とその他の場合で padding の値を変更してやれば良いのです。

a { 
	padding:1px 1px 0px 1px;
	border-bottom:1px solid #00f;
	text-decoration: none;
}
a:hover {
	padding:0px;
	border:1px solid #f00;
}

基本はこれだけです。要するに通常の状態で枠線の分だけpaddingをとっておいて、hover になったらそれを消せば良いのです。上下や左右だけにしたい場合などはpaddingの値とborderの部分を書き換えれば良いでしょう。既読リンクの下線の色を変更したい場合は普通に指定を加えれば可能です。これでもう背景色が変わる度に指定をし直さなくても良いですし、文字が揺れる事もありません。もちろん文字が揺れた方が良いという事もありますが、知っておいても損はない気がします。ちなみにデメリットは幾つかありますが、工夫すればどうにでもなる些細な事なので説明はしません。個人的にはアクセス解析の広告(img)にも下線が表示されてしまい a img{border:0px none;} では消えないのが面倒に感じましたが、スクリプトを置く場所にだけ新たに指定し直してやれば良いでしょう。

スポンサーサイト

コメント一覧

コメントの投稿欄

Copyright © 2005 rara All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。