リンク内画像をタップするとハイライトが表示される

スマホ実機でリンク内にある画像（ボタンの矢印など）をタップすると、画像にハイライトが表示されることがある。見た目の美しさの観点からも、このハイライトは不要であるため、非表示にしたい。

ハイライトを消すためには

まずはハイライトを設定するプロパティの存在を知っておく必要がある。

-webkit-tap-highlight-colorプロパティ

-webkit-tap-highlight-colorは、リンクがタップされている間に表示される強調色（ハイライト）を設定するプロパティである。
このハイライトは、ユーザーがタップしたことが正常に認識されていることを示し、またどの要素がタップされているかを示すものである。

bodyタグに指定

-webkit-tap-highlight-colorプロパティはbodyタグに指定する。
プロパティの値にtransparentを指定することで、リンク内画像をタップしたときにハイライトが表示されなくなる。

body {
  -webkit-tap-highlight-color: transparent;
}