[CSS]フォーカス／リンクや要素を選択した時 枠を消したりデザインする方法

この記事ではフォーカスの基礎知識とリンクや要素をフォーカスしたときのデザインをカスタマイズするCSSなどを紹介します。ウェブサイトのビジュアルやアクセシビリティの向上に役立てます。

フォーカスとは

フォーカスとは、ユーザーが特定の要素（リンク、ボタン、テキストボックスなど）を選択している状態のことを指します。フォーカスが当たっている要素は、キーボードの入力やクリックなどのイベントを受け取ることができます。

例えば、テキストボックスにフォーカスが当たっている場合、ユーザーはキーボードから文字入力することができます。また、リンクにフォーカスが当たっている場合、ユーザーはエンターキーを押してそのリンクに移動することができます。

このようにクリックではなくキーボードだけで要素を選択したり操作することができます。

フォーカスは、一般的にはブラウザのデフォルトのスタイルで示されます。例えば、フォーカスが当たっているリンクは下線がつき、フォーカスが当たっているテキストボックスは周囲にアウトラインが表示されます。

フォーカス可能な要素

一般的にフォーカスが可能な要素は以下のものがあります。

• a
• input
• textarea
• select
• button
• iframe
• area（img要素で使用するためのもの）
• object
• embed
• video
• audio
• summary（details要素で使用するためのもの）
• label（for属性を持つ場合）
• menuitem（menu要素で使用するためのもの）
• fieldset
• legend

ただし、フォーカス可能な要素はこれだけでなく他にも様々な要素あります。またJavaScriptを使用して要素にフォーカスを当てることもできます。

フォーカス可能な要素をカスタマイズに関する記事をまとめています。>> select プルダウンメニューの見た目をよくするCSSカスタマイズ

要素をフォーカスさせない方法

tabindex属性を設定する

tabindex属性に-1を設定することで、その要素がフォーカス可能であることを示しながらも、タブキーでのフォーカスの対象から外すことができます。

<button tabindex="-1">フォーカスされないボタン</button>

tabindex属性とは

tabindex属性は、HTML要素にキーボードでのフォーカスを与えるための属性です。この属性を使うことで、通常のフォーカス移動の順序とは異なる順序でフォーカスを移動させたい場合や、フォーカスの移動を無効にする場合などが実現できます。

tabindex属性を使いすぎると次にフォーカスがどこに移動するのか、予測するのが難しくなりアクセシビリティが悪くなる場合があるため注意が必要です。

JavaScriptで制御する

JavaScriptをで要素がクリックされた場合のみフォーカスを当てるようにすることが可能です。

<button onclick="this.blur()">フォーカスされないボタン</button>

この方法は、クリックのみを想定している場合には有効ですが、キーボード操作でフォーカスを当てることができなくなるため、アクセシビリティの観点からは注意が必要です。

またこれらの要素をフォーカスさせない方法は、フォーカスを当てたくない要素がある場合に限り使用するべきであり、通常はアクセシビリティに配慮して適切なフォーカスのスタイルを与えることが適切と言えるでしょう。

要素をフォーカスさせる方法

html要素に意図的にフォーカスさせたい方法も見ていきます。

<input type="text" autofocus>

autofocus属性を使用すると、ページが読み込まれた時点で自動的にフォーカスが当たるように設定することができます。

document.getElementById("myInput").focus();

JavaScriptのfocus()メソッドを使って要素にフォーカスを当てる方法です。フォーカスを当てたい要素のIDを指定しています。

フォーカスされたときの枠や色を消す

リンクをクリックしたときにでるまわりの枠やフォームの入力項目inputを選択したときの枠など、デザイン上消したいと思うことがあります。

これを表示させたくない場合は

a{ outline:none; }

とすると枠を消すことができます。

JavaScriptを使う方法もあります。

<a href="#" onfocus="this.blur()">

onfocus="this.blur()"は、HTMLの<a>要素や<button>要素に対して使用されるJavaScript属性で、フォーカスが当たった時に自動的にアウトラインを非表示にします。

リンクの枠を消す問題点

上記のようにリンクの点線を消すことはできますが、tabキーを使ってリンクを移動している人たちにとっては、その点線が見えないとどこを移動しているかわからないのでとても不便だそうです。

Webアクセシビリティの観点からは、どんな環境、どんな人でもアクセスしやすいウェブサイトということが重要です。なのでリンクであることがわかるこの点線は消さないほうが良いということになります。

このようにデザイン上の理由でフォーカスのスタイルを変更することは、アクセシビリティに問題が起きる可能性があるので、アクセシビリティを確保するためには、代替えの視覚的効果を与えるなどの配慮が必要です。

アクセシビリティを保ちつつ、リンク枠（境界線）を消すには

リンクの境界線を非表示にする代わりに、ユーザーがフォーカスしたときに境界線を表示することができます。

a{
	text-decoration:none;
	outline:none;
}
a:hover,
a:focus{
	text-decoration: underline;
}

aタグのfocus属性にリンクであるとわかるstyleを適用します。このサンプルはaタグのアンダーラインとアウトラインを消し、hoverとfocusされた際にアンダーラインを適用しました。

フォーカスしたときのデザイン、背景色や影をつけたりするCSS

CSSでフォーカスをデザインするためのいくつかの方法を紹介します。

See the Pen focus design/outline by mixtaro (@mixtaro) on CodePen.

a:focus {
  outline: 2px solid blue;
}

a:focus {
  box-shadow: 0 0 3px 2px #ccc;
}

a:focus {
  background-color: yellow;
}

a:focus {
  text-decoration: none;
}