アクセス数: | 今日: | 昨日:   記事数:996

HOMESITE MAPBOOKMARKTAG CLOUD

リンクをクリックした時に出る破線を消す方法

『リンクをクリックした時に出る破線を消す方法』をはてなブックマーク

リンクリンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
OperaSafariGoogle Chromeはデフォルトで出ません。
これが出るのは、IESleipnirFirefoxLunascape(WebKit時以外)です。

デザイン的にも、これを出させない為にCSSを使ってみましょう。

話しはそれますが、画像の枠線を消すのは簡単ですよね。
CSSに以下のコードを付けるだけです。

CSS

img {
  border: none;
}

これをどっかに書いておくだけで、サイト内の画像の枠線が全て消えます。

で、問題のリンク破線を消す方法です。
通常、以下の様に破線が出ます。(HOMEをクリックした時)
リンク

この破線を消すのは、CSSに以下のコードを書きます。

CSS
a:focus {
  outline: none;
}

はっはっはー、超簡単だぜー!
・・・と思ったのも束の間、このコードFirefoxには効いてもIEには全く効かないコード。
ちなみにSleipnirやLunascape(WebKit以外)にも効きません。
なん・・・だと・・・?

少々手間ですが、全てのブラウザで破線を消そうと思ったら、1つ1つのリンクに以下のJavaScriptのコードを足せば消せます。

HTML
<a href="URL" onFocus="if(this.blur)this.blur()">リンク</a>

一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。

Trackback URL

リンク先が18禁サイトの場合は削除しています。
当ブログにリンクが貼られていない場合は削除しています。

コメントを書く

必須です。

必須です。(公開されません)
GRAVATARに登録していると、アイコンが表示されます。

リンク先が18禁サイトの場合は削除しています。

以下のタグが利用出来ます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Additional comments powered by BackType