【CSS】スマホのリンクをタップしたときの背景色を設定する
スポンサーリンク

こんにちは!WEBデザイナーのこたです。

近年スマホファーストにより、PCよりもスマホのデザインに力を入れている Webサイトが増えていると思います。

今まではPCの設定でリンク設定(ホバー)などをしていたと思いますが、スマホも設定できるのをご存知ですか?

今回はスマートフォンのリンクをタップしたときの背景を消したり、色を変える方法を紹介します!

スマホでのhover"背景色"設定方法

スマートフォン(iPhone,Andoroid)では、リンクをタップしたときに:hoverセレクタや:activeの状態に遅れて切り替わるため、思った通りに動作しない場合があります。

その代わりに、スマートフォンではリオン句をタップした瞬間に、リンクのテキストがハイライトするにようになっています。

-webkit-tap-highlight-color: rgba(赤,緑,青,透明度);

「-webkit-tap-highlight-color」プロパティを使うと、この背景色を変えたり、非表示にすることができます。

このプロパティの値は「rgba(赤,緑,青,透明度)」で指定します。

今回は背景色を黄色に変更してみます。

なお、このプロパティは「:hover」セレクタではなく、通常の「a」や「a:link」セレクタのスタイルに組み込んでおく必要があります。

See the Pen
Untitled
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

スポンサーリンク
おすすめの記事