どうも7noteです。開発していると、意図していない場所に黒い太枠線がでてくるようになって、なんだこれって思ってました。こいつを消します。

フォームやマウスカーソルで要素を触ると出てくる・・・

どうやらクロームの初期値として、:focusがある時に出るようです。

消し方

消したい要素にoutline: none;だけ。とっても簡単。

input {
  outline: none;
}

まとめ

以前まではあまり気にしていなかったのですが、前回のクロームのアップデートの影響ですごく悪目立ちすることがあったので、必要ない場面では消すようにしています。

※タブキーを使って移動していると、どこにフォーカスしているかわからなくなるので注意！！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

プログラミング勉強日記

2020年9月22日
CSSで+を見かけたが、意味がわからなかったので調べてみた。

CSSの隣接セレクタ+(プラス)

　+は隣接セレクタと呼ばれる。そのあとすぐに来る要素を表す。

HTMLファイル

<h1>こんにちは</h1>
<p>私の名前は田中太郎です</p>

CSSファイル

h1 + p {
  color: blue;
}

参考文献

CSSで「+（プラス）」というセレクタの意味は何？