• RSS

[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


Warning: Use of undefined constant php - assumed 'php' (this will throw an Error in a future version of PHP) in /home/users/2/imadesiadmin/web/webantena/wp-content/themes/webantena/inc/content-single.php on line 79

スマホサイトでリンクをタップすると、iPhone(iOS)ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。

このグレーの影やオレンジの枠(ハイライト表示)をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。

iPhone(iOS)

ハイライトカラーを無効化

まずはiPhone 向けにハイライトカラーを「無効」にする場合、CSS で以下のように記述します。



ハイライトカラーを変更

ハイライトカラーを「変更」する場合、CSS で以下のように記述します。


CSS3 の RGBa を利用することもできます。



Android

ハイライトカラーを無効化

さてAndroid ですが、ハイライトカラーを「無効」にする場合はiPhone(iOS)と同じ処理です。



ハイライトカラーを変更

Android の場合はハイライトカラーを変更することが出来ないので、OS・Androidのハイライト表示の指定について。その2 の記事で紹介されているように、jQuery を使って「指で画面を触れた時と指を離した時とで、色を変更する」などの別処理を入れるコトになります。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください