こんにちは、コーダーのオッコです。
直しちゃったので参考になる画像がないのですが、スマホ実機でリンクがついた画像をタップすると、タップした領域がデフォルトで青くなる現象に遭遇したので修正方法をメモがてら残します。
目次
結論
こうする。
- -webkit-touch-callout: none;
- -webkit-tap-highlight-color: transparent;
- cursor: pointer;
- display: block;
これを、aタグに追加します。（※aタグの子要素にimgタグを入れている前提です。）
下記参考サイトたちの合わせ技です。
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での挙動についての解決策をお話ししようと思います。 TECN NEWS 自動表示枠 iPadでプルダウンをタップするとすぐ閉じ...
あわせて読みたい
クリックで開閉するヘッダのプルダウンコード（任意の場所をクリックして閉じられる処理あり）
コーダーのオッコです。 ヘッダのプルダウンの挙動ってタグ構造に左右されたりして地味に時間を取られるので、自分なりの書き方をまとめておきます。 ヘッダの右上にプ...
システム開発はアピステクノロジーへ
アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。
「IT TOOL」をご存じですか？
既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。
さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。
実績多数、低価格で本格的なサイトができると好評いただいております。
詳しくは弊社HPをご覧ください。
アピステクノロジーの実績紹介はこちら↓
アピステクノロジー公式サイト
ITツール紹介ページはこちら↓
アピステクノロジー公式サイト
コメント