note

リンクをクリックした時に表示される点線がデザインを台無しにしてしまう事が多々あるので、点線を消す方法。

CSS2以降のプロパティーの

a {
outline: none;
}

これで消えるんだけど、フォーカスされた時にどこが選択されているのか分からないので、a:focus の定義済みクラスでスタイルが変わるようにしておくと良いです。
しかしコレ、IEが対応して無い。やっぱMSはこういう所が不親切だよなー。

IE以外ならこんな感じでいける。

a,a:link,a:visited {
color:#0000FF;
text-decoration:underline;
outline:none;
}

a:hover,a:active,a:focus {
color:#FF0000;
}

FirefoxやSafariはコレでバッチリでした。


どうしてもIEなら、aタグにJavascriptを入れる事で回避可能。

<a href="URL" onfocus="this.blur();">ほげほげ</a>

これで消える。
でもaタグ一つ一つにスクリプトを付けるのもメンドくさいから

window.onload=function(){
a=document.getElementsByTagName("a");
for(i=0;i<a.length;i++){
a[i].onfocus=function(){this.blur();}
}
area=document.getElementsByTagName("area");
for(i=0;i<area.length;i++){
area[i].onfocus=function(){this.blur();}
}
}

これで、aタグに一括で適用できます。
でも、this.blur()ってフォーカス禁止だから、キーボードで操作できなくなっちゃって、ユーザビリティーが最低なんだよね。

なので、IEはもうユーザビリティー重視するか、デザインを優先させるか割り切るしか無いみたい。