はじめに
以下のようにスマホでリンクをタップすると 青い背景(ハイライト？)が表示されてました。
※ Android/IOS Chrome
なくす方法を調べて、修正内容をメモとして残しておきたいと思います！
なくす方法
CSS の -webkit-tap-highlight-color というプロパティを指定してあげる必要があります。
-webkit-tap-highlight-color は CSS の標準外のプロパティで、リンクがタップされている間に表示される強調色を設定します。強調は、ユーザーがタップしたことが正常に認識されていることを示し、またどの要素がタップされているかを示します。
↑ の説明どおり、タップされている間に表示される強調色らしいです 🤔
対策としては、以下のように強調をなくすスタイルを指定してあげるだけです！
a {
-webkit-tap-highlight-color: transparent; /* 強調をなくす */}逆に色を変更したい場合は、↓ のように色を直接指定するだけ
a {
-webkit-tap-highlight-color: red; -webkit-tap-highlight-color: rgba(200, 164, 84, 0.4);}まとめ
よく知らない、使わない CSS プロパティがあったり、意外と解決するのに時間かかったりするので、覚えておくと良いかもです！