Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

リンクボタンを押すときに出る点線について

リンクボタンを押すときに出る点線について

リンクボタンを押すときに出る点線について

リンクボタンを押すときに出てくる点線って少し気になりますよね。ましてや上のようになんだかずれているときなんて気になって仕方がない!そんなリンクボタンを押したときに出る点線についての対策法について書きたいと思います。

Windows XP、Windows Vistaの次はWindows 7って名前らしい。うーん微妙。

リンクボタンを押すときに出る点線について

IEでリンクボタンを押したら点線がずれる場合
通常画像にリンクを貼る際には、<a href="#"><img src="hogehoge.jpg" /></a>のように書きます。このように一行でソースを書くと問題なく、画像の周りだけに点線が現れますが、

<a href="#">
<img src="hogehoge.jpg" />
</a>

のように改行してソースを書いてしまっている場合は、上記のようにずれて点線が現れます。細かいことですが、少し注意したいですね。ただソースを改行していても、下記のように記載すれば、点線すら消すことが出来ます。

<a href="#" onFocus="this.blur()">
<img src="hogehoge.jpg" />
</a>

FireFoxでリンククリック時に表示される点線について
FireFoxでリンククリック時に表示されれる点線についてtext-indent:-9999px;などでテキストを画面外に見えないようにした時、Firefoxではリンクボタンをクリックすると点線が伸びて表示されてしまします。その解決方法として

a:focus{
outline:none;
}

でリンクの点線自体を表示させなくなります。その他の方法として、

a {
overflow:hidden;
}

で、画面外部分の点線は表示されません。

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

コメントを投稿

Name:
Mail:
URL:
この情報を登録しますか?

リンクボタンを押すときに出る点線についての前後の記事

前の記事は「面白いウェブサービスをまとめてみました vol.2

次の記事は「IE使用中@を押すと[になり、半角/全角キーを押すと‘になるの解決方法

関連する情報

              

楽してプロっぽいデザイン|Forty-n-FiveBlog ホームへ戻る

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

ポートフォリオサイト|Forty-N-Five

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

健康美人30代から始める美と健康は、MovableTypeを使用して制作した通販サイトです。

健康美人30代から始める美と健康 もてもてSHOP NOLOOKS 和彩

元気をくれた本

「夢をかなえるゾウ」この本に出会えて良かったとホントに良かった思います。Webには関係ないですが、これからの人生を楽しくしてくれる本です。ガネーシャどうもありがとう(笑)

Copyright Forty - N - Five. All rights reserved.