iPhoneのaタグの中にimgが複数あってタップハイライトが邪魔！でもこれで解決☆～img要素のタップハイライトを消す！～

こんばんは！

インターネットって素敵ですね。何でも解決してくれますね。

ワタクシ、スマホのマークアップのお仕事をしていまして、３日ほどずっと悩んでたことがありました。

それは・・iPhone。そう、iPhone。

iPhoneとアンドロイドのwebサイトをコーディンクしていまして、よくあるリストタイプのパーツを作っていたのですが、いざiPhoneで確認した時に、なんて煩わしいのか、画像が１個１個タップするとハイライトしてしまうんですね。。要素を全部aタグで囲ってるのに！！！

と、いうわけでめちゃくちゃ調べました。検索検索・・・。

基本的に『タップ　ハイライト』とか『画像　タップ　アイフォン』とかで調べてたのですが、殆どが、webkit-tap-highlight-colorでハイライトの色を変えれるよ、という記事でした。色を変えたいわけじゃない。ハイライトを消したいわけじゃない。アンドロイドみたいに全体的にハイライトしてほしいだけ！！

さらに探しまくってありました！こちら

iPhoneのa要素内にimg要素がある場合のタップハイライトの件 - CSS HappyLife

・・・。

・・・・・。

出来た！！！※↓全体的にタップハイライトのイメージ画像

かいつまみますと、cssで解決することができまして、img要素に pointer-events: none; と指定すれば万事解決です＾＾

これでaタグでｶﾞﾊﾞｯと囲んだimg画像たちもピクリともハイライトせず、il要素やdiv要素で大きくハイライトしてくれます。

や～よかったよかった＾＾

ではまた！