iOSでリンク付きの画像をタップしたときにデフォルトで青くなってしまうのを解消

こんにちは、コーダーのオッコです。

直しちゃったので参考になる画像がないのですが、スマホ実機でリンクがついた画像をタップすると、タップした領域がデフォルトで青くなる現象に遭遇したので修正方法をメモがてら残します。

結論

こうする。

• -webkit-touch-callout: none;
• -webkit-tap-highlight-color: transparent;
• cursor: pointer;
• display: block;

これを、aタグに追加します。（※aタグの子要素にimgタグを入れている前提です。）

下記参考サイトたちの合わせ技です。

iOSでaタグタップ時にグレーにならない

スマホでリンクをタップした時の青い背景をなくす

CSSのtap-highlight-colorが効かない時の対処法

display:blockは、よくある、aタグの領域を要素全体に広げてあげるための措置です。

tap-highlight-colorが効かないところで悩んだのですが、全部つめこんだら解消しました。

※-tap-highlight-color：リンクがタップされている間に表示される強調色を設定するcss標準外のプロパティ。

標準外機能なので、mozillaでは推奨されてないことも留意してください。一応手元のiPhone/Androidでは問題なかったです。

関連記事紹介

あわせて読みたい

window.onloadがipad/iphoneで動かなかった話【javascript】 デザイナーのオッコです。 レスポンシブ対応のため、iPad proでテストを行ったところ、fullCalendarが出るはずの部分がまっさらでカレンダーが表示されていませんでした...

あわせて読みたい

【jquery】iOS用クリックイベント「touchend」で二重にイベントが発火していた件【iPad】 デザイナーのオッコです。 今から、私が悩んだiPadでの挙動についての解決策をお話ししようと思います。 iPadでプルダウンをタップするとすぐ閉じてしまう iPadでヘッダ...

あわせて読みたい

クリックで開閉するヘッダのプルダウンコード（任意の場所をクリックして閉じられる処理あり） コーダーのオッコです。 ヘッダのプルダウンの挙動ってタグ構造に左右されたりして地味に時間を取られるので、自分なりの書き方をまとめておきます。 ヘッダの右上にプ...

システム開発はアピステクノロジーへ

アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。

「IT TOOL」をご存じですか？

既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。

さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。

実績多数、低価格で本格的なサイトができると好評いただいております。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら↓

あわせて読みたい

アピステクノロジー｜実績紹介 | Apice Technology Site アピステクノロジーのシステム開発技術を紹介

ITツール紹介ページはこちら↓

あわせて読みたい

アピステクノロジー｜ITツール｜IT導入補助金　　アピス販売　美容院予約　家事代行システム | Apice Techn... アピステクノロジーは2021年度からIT導入支援事業者として採択された、信頼できるシステム開発事業者です。美容院予約システム、レッスン施術予約販売システムサイトなど様...