結構前に、ここの名刺印刷が良かった！的な記事を書いたんですけど、結構な方に紹介者コードを利用して登録してもらったようで嬉しい限り！
名刺印刷をどこに頼むかお悩みの方はぜひ！
さて、適切なタイトルが浮かばなくて何だかよく分からない感じのタイトルですが、iPhoneやiPod TouchのMobile Safariですが、通常a要素を display: block; な感じにしてタップできる範囲を広げた場合、その部分全体がハイライト表示されるかと思います。
その辺りに関してちょこちょこと。
↓実際の画面だとこんな感じです。
で、コレ自体は何の問題も無い訳ですけど、この画像部分をタップするとa要素の範囲じゃなくて、その画像のとこだけハイライトされます。
キャプチャが上手く撮れなかったからキャプチャは有りません＞＜
ハイライトされるだけで別に問題は無いんですけど、デザインに寄っては、もしかしたらユーザーは別のページにリンクしているのでは？と思ってしまうかも知れない。
もしかしたら、画像が拡大すると思うかも知れない。
そんな可能性も有るわけです。
どーでも良いってば良いけど、気になりだすと確かに気になるこの問題。
お客さんから突っ込まれても「仕様です！」と言い切っても良いかも知れませんが、対応できるかなーと思って適当にやったら出来たので、ご紹介です。
1. img要素をやめる
これが手っ取り早いかも知れませんが、背景にすれば問題無いので、特にimg要素として配置する意味が無いなら一番良いかと思います。
2. CSSで頑張る
で、ここからが本題です。
最初に:after疑似要素で取り敢えず解決しました的な内容を書いてたんですけど、他の方法をご存じの方教えて下さい的な事を書いたら、Twitterにて@GeckoTangさんに、早々に教えてもらいました。
方法は、pointer-eventsプロパティで簡単に出来ます。
img要素に pointer-events: none; と指定すればOK。
ul.sampleList li a img {
pointer-events: none;
}
プレフィックス無しでもiOS5は大丈夫だったけど、古いとダメかも？
pointer-eventsはリンクを切るのに使えるなー程度の認識だったから、img要素に指定して切るって感覚が無かった...
あと、JSのイベントも発生しなくなるみたいなんで、その辺りはご留意下さい。
にしても、こんなどこに需要が有るかも分からないニッチな感じのネタしか書いてないなんて、、、
最近ちょっと話題になってた、フリーランスネタでも書けば良いかな！
ボクは、仕事の大半が「コーディングのみ」なので、他のフリーランスとはちょっと違うかもって辺りとか。
人に寄ってはコーディングだけで生きていけるとか信じられないみたいな話も聞くのでネタには良いのかなーとか思いつつ、それこそニッチで需要がない（気がする）し、そもそもあまり面白い内容が無かった＞＜