スマホでリンクをタップした時のハイライトを解消してチラつきのない動作へ

ハイライト表示の解消方法

まずはハイライト表示がどんなものか実際に表示してみますのでご確認ください。ちなみにこの現象はパソコンでは起こらないのでスマホで見ながら下のボタンをタップしてみてください。

こういう現象ですね。これは文字だけじゃなく画像などにも起こってしまいます。原因はaタグ（リンク）なのでそこに含まれる要素にハイライト表示が起こってしまいます。

はじめの頃は「ちょっと気になるなぁ」というカンジでしたが、色んなサイトでこの症状が起きるので「チラつかないサイトはどうしてるんやろう？」と思い、調べてみました。

            

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

ハイライト表示の無効設定はスゴく簡単！CSSでaタグに「tap-highlight-color」の値を「rgba(0,0,0,0)」としてやるだけでOKです。

透明度の調整もできる色設定をおこなう場合には「rgba(0,0,0,0)」を使うんですが、これの意味をおさらいしておきましょう。

まず「()」の丸括弧の前には「rgba」と記述します。これが意味するのは「r」が「red（赤）」、「g」が「green（緑）」、「b」が「blue（青）」、そして「a」が「alpha（透明度）」です。

そして丸括弧の中の数値はrgbaの値を並び順で指定しています。ひとつ目が「r」、ふたつ目が「g」、みっつ目が「b」、よっつ目が「a」で、rgbに関しては「0～255」の数値で指定し、aに関しては小数点を使用した「0～1」の数値で指定します。

今回のハイライト表示の対策で重要なのはaの値を「0」にする事です。ここさえ「0」にしておけばrgbの値はなんでも構いません。

でも逆にハイライト表示をしたいと考える方もいるかと思います。その場合はaの値を「0」以外に設定すればOKです。さらにrgbの値を変更する事によって好みの色でハイライト表示する事も可能です。

参考のために赤色のハイライト表示も作ってみました。これに指定しているカラーは「rgba(255, 0, 0, 0.6)」です。ハイライト表示を設定される場合はrgbを調整してお好きなカラーをお使いください。

基本的にはハイライト表示を無効にする設定をおこなうと思いますが、その逆もできるという事を知っておいてください。