スマホでリンクをタップした時の青いハイライト色を変更する

スマホートフォンでリンクをタップすると、（デフォルトで）青いハイライトが表示されますが、CSSから簡単にこの色を変更することができます。

ハイライト色を変更させたい対象要素の-webkit-tap-highlight-colorプロパティに色を指定するだけ！

例1：全アンカータグのハイライト色を黄色系（rgba(200, 164, 84, 0.4)）に変更

a{
  -webkit-tap-highlight-color: rgba(200, 164, 84, 0.4);
}

例2：ハイライト色を透明に変更する

a{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

このように、色を透明にするとハイライトは実質無効になりますね。

※ 古いAndroidやブラウザによっては効かないかもしれないので、実機で確認してみてください。（Andoroid7のChromeでは無事に反映されました。）

「洗練されたデザインを青色のハイライトで邪魔されたくない！」という時に是非使ってみてください！