2012/08/15更新

[CSS] iPhoneのSafariでタップした際に表示される暗めな影を消すCSS

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
iPhoneのSafariでリンクとかボタンとかをタップした際に、一瞬だけ半透明の黒い背景が出る現象。 この黒半透明を出させないCSSの設定を学んだので、ブログで紹介したいと思います。

Disable Tap Highlight Color



タップした際にでる黒い半透明な背景とは

具体的には、以下のようなモノです。

画像

これってタップした感覚が出るので嬉しい反面、タップ時のスタイル(:activeとかで指定)がある場合には、 出てこないで欲しい場合もあります。



黒い半透明な背景を変更するCSS

以下のCSSを用いることで、リンクやボタンのタップ時の色を変更することが出来ます。
-webkit-tap-highlight-color:rgba(0,0,0,0);
上記の例だと、完全透明にして、タップ時に黒い半透明な背景を表示しないようになります。
rgbaの値を変更することで、他の色を設定する事も可能です。

なおAndroidでは、タップハイライトカラーを透明は出来るようですが、別の色に指定する事は難しいようです。



参考資料

以下の資料に正式な説明が掲載されています(内容はスゴく少ないですが)。ご参考ください。
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/articles/standardcssproperties.html



最後に

最近のスマホ用ページのマークアップ関連のお仕事をしていて、今回の内容を知りました。
マークアップを生業にしている人は、こーゆう知識を一杯持っていてスゴいなぁと思う今日この頃。自分も少しずつ 良い知識を学んではブログに書いていけたらと思っています。

最後までご覧頂きましてありがとうございました(*´∇`*)





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。