半透明のアイツ。iPhone用CSS"-webkit-tap-highlight-color"

珍しくコーディングの話でも書いてみる。

おひさしぶりです。たすくです。




注：今回の記事は、iPhoneやiPadで見ないと何の意味もないです。笑




最近、ひょんなことから、iPad向けのコーディングをする機会ができまして。



CSS3がガッツリ使えるので、ニヤニヤしながら作ってるんですが、

どうもボタンがキレイに見えない。



例えば、こんなボタンがあったとするじゃないですか。


テストボタン1
（CSSだけで書いています）



でもね、
iPhone/iPadでクリックする瞬間、一瞬半透明の黒いのが出てくるんですよ。



おいあんた、そりゃねーぜ。

せっかくキレイにボタン作ったって、そんなんじゃちょっとイヤですよワタシ。

こんな見た目じゃJSで色々やらせたりできないっすよ。



そこで色々調べた結果、iPhone/iPad用にこんなCSSが用意されてるらしいことを発見。


-webkit-tap-highlight-color:


半信半疑でこんな感じに追加してみたところ・・・。

display:block;
width:200px;
height:24px;
padding:10px 0;
background: #5A040D;
background: -webkit-gradient(linear, left top, left bottom, from(#790417),to(#410505));
background: -moz-linear-gradient(#790417,#410505);
text-decoration:none;
text-align:center;
font-size:13.5pt;
text-shadow: 0px 1px 1px #BBB;
font-weight:bold;
color:#FFF;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius:6px;
-webkit-tap-highlight-color:transparent;

テストボタン2


半透明のアイツが消えた！！！！


今は透明にしたけど、当然他の色にすることだって可能。


テストボタン3

テストボタン4



これのおかげでなんとかなりそうです。



ってか・・・

これ、常識だった？苦笑