リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
Opera、Safari、Google Chromeはデフォルトで出ません。
これが出るのは、IE、Sleipnir、Firefox、Lunascape(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>
一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。