新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

【CSS】ページ内リンクに有効活用!フォーカス時のブラウザ特有のフォーカス枠を表示しない方法

2019.1.10 2019.1.15

【CSS】ページ内リンクに有効活用!フォーカス時のブラウザ特有のフォーカス枠を表示しない方法
Web制作 0 0

こちらの記事は、このような方におすすめです。

HTMLのaタグやinputタグを使用した要素にフォーカスを当てたとき表示される「ブラウザ特有の枠線」を消したい方

HTML+CSSでコーディングをしていると、要素にフォーカス当たっている時にブラウザ特有の枠線が表示されることがありませんか?

例えば、下記のように「テキストリンク」に枠線が表示されたり。

要素にフォーカスした時の枠線をCSSで消す方法

あるいは、ページ内リンクで見出しなどに移動した場合、移動先の「見出し」にも枠線が表示されたり。

「それでもOKだよ」という場合は問題ありませんが、デザインにこだわりたい場合は、そういった枠線も気になってしまうものです。

そのような場合には、CSSを使って枠線を消してしまうのが効果的です。

この記事の目次

【結論】要素にフォーカスした時の枠線をCSSで消す方法

まずは結論から。

要素にフォーカスした時の枠線をCSSで消すCSSのコードはこちらです。

elementName:focus {
outline: none;
}

「elementName」の部分は「aタグ」や「inputタグ」など、自由に置き換えてみてください。

ページの先頭へ戻る

【詳細】明示的に「フォーカス時のみ」としたい場合は[:focus]をつける

私が調べた限りでは、「focus」をつけない下記のような記述でも変わりない効果が得られます。

elementName {
outline: none;
}

ただし、こちらの記述の場合はフォーカス時以外でも枠線を消す設定になります。

そのため、もしもフォーカス以外の場面でoutline属性を自由に設定したい場合には、思うような表示にならない可能性もあります。

なので、その場合は明示的に「elementName:focus」として、フォーカス時のみとした方が良いでしょう。

ページの先頭へ戻る

参考サイト

こちらの記事を作成するにあたり、下記のページを参考にさせていただきました。

ありがとうございました。

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

メールマガジンでWeb制作の情報を購読!

妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。

次回配信予定のテーマは、こちらです!

「ホームページ・ブログ・SNSって、どんな内容を投稿すれば良いの!?」

気になる方は、下記のボタンからメルマガ購読をお申し込みください。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ