2012年01月23日

スマートフォン用ページでリンク色の指定をする

最近、スマートフォン用サイトを作成していて、リンク色でいろいろ悩んだので備忘録的に。

一般的にHTMLでリンク色を指定するときはCSSで
a:link
a:visited
a:hover
a:active
で指定します。それぞれの意味とか、某ブラウザでは順番間違えるとうまく効かないとかありますが、それはまた別なハナシ。

スマホの場合、リンクというよりもタップしたときの反応色を指定します。
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
*CSS3
RGBとalpha値を、それぞれ0〜255、0〜100で指定するわけです。
alphaが0ですので、上記の指定方法は色を見せない、タップしても色が変化しない記述です。
このあたりの仕様も他のサイトに任せるとして、現在のスマホの2大勢力、AndroidとiPhoneの挙動が異なります。
iPhoneというかiOSの場合は、上記のCSSの記述で問題ありませんが、Androidではこの指定は効きません。
ただし、Androidでは上記の「表示させない」記述だけは効くようです。意味がわかりません。
そのため、jQueryMobile1.0では、アプリっぽさを出す演出かどうか不明ですが
jquery.mobile-1.0.cssの中の
.ui-mobile-viewport 部分で上記の指定をしています。
#関連記事
http://www.interactivebynature.net/blog/wordpress/2011.07.13.jquery-mobile-enable-tap-highlight-color

では、この指定をはずすとどうなるのか?
デバイスに依存したリンク色が表示されます。
iOSではalphaがかかった薄いグレーの背景がつきます。
Androidでは背景の色はつきませんが、緑やオレンジといった派手な枠の色がつきます。
押した感が出るのでいいと言えばいいんですが、ちっと格好悪いです。


ちなみに上記に載せた一般的なaタグのリンク指定ですが、これは
iOSの場合はa:active
Androidの場合はa:hoverの色がタップしたときに表示されるようです。

どちらにしても一瞬の表示で、すぐに次のページに移りますので重要なのか?と思われるかもしれませんが、どこをタップしたかわかりやすいので、結構重要です。

では、どのデバイスでも同じリンクの表現をできないのか?
という答えは、実際に試していないのでわかりませんが、

iOS・Androidのハイライト表示の指定について。(最下部のjs)
http://www.sprouthead.com/blog/css/highlight.html

iPhoneでa:hoverを実装する(クラスを作成し、個別のリンクに適用)
http://xirasaya.com/?m=detail&hid=232

あたりを参照すると幸せになれるかもしれません。


1/25追記
aタグでの色を指定すると、特にリスト表示とかで動作がもっさりすることがありますので、やはりつけないほうがいいかもしれないです。
posted by BigMoonEz at 14:20 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック