Corredor

ウェブ、プログラミングの勉強メモ。

iOS や Android でリンクをタップした時に灰色の背景色が付くのをなくす CSS

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像

  • 作者: こもりまさあき,栄前田勝太郎,坂上北斗,塚口祐司,前川昌幸,松田直樹
  • 出版社/メーカー: エムディエヌコーポレーション
  • 発売日: 2017/09/20
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

iOS や Android で Web ページのリンクをタップし続けた時に、灰色の背景色 (ハイライトカラー) が付く。どこをタップしたのかユーザが分かりやすくなるので普段は見えていてもいいと思うが、気になるようであれば以下のような CSS でハイライトを消すことができる。

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

Android の場合はハイライトカラーの変更ができないので上述のコードのみ有効だが、iOS であれば色を変更することもできる。

a {
  /* カラーコードを指定したり */
  -webkit-tap-highlight-color: #ff0000;
  /* rgba で指定したり */
  -webkit-tap-highlight-color: rgba(0, 0, 255, .5);
}