iOS・Androidのハイライト表示の指定について。

今回は

iOS・Androidのハイライト表示の設定について

紹介します。

(以下 iOS→iOSのMobile Safari、Android→Androidの標準ブラウザ)

リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。
その色が設定出来るんです。

今回はCSS3を使った方法とjsを使った方法を紹介したいと思います。

iOS・Androidのハイライト表示の設定について

まず初めに。

今回CSS3とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはjsを使用するもの、のみになります。
CSS3を使用する方法では、iOSとAndroid別々の方法を紹介しています。

それでは。

CSS3を使ったハイライト表示の指定

まず、CSS3でハイライト表示の設定をするにはこの記述をします。

-webkit-tap-highlight-color:色;

これで、リンクをタッチするとハイライトカラーが変わるんです。

(-webkit-はベンダープレフィックス。)

iOSの場合。

iOSでは、そのままです。
-webkit-tap-highlight-color:色;
を記述するだけ。

おまけで、
-webkit-touch-callout:none;
を付けちゃいます。
(iOSのMobileSafariで、リンクを長押しした際出てくるポップアップメニューを非表示にする記述)

書くならこんな感じです。

a{
	color:green;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:yellow;
}

そして、こうなります。


クリック


こんな感じになります。

ちなみに、今回は色をyellowに指定しましたが、色の設定は16進数やrgbaで設定も可能で、
-webkit-tap-highlight-color:rgba(0,0,0,0);
と指定すると、ハイライト表示をオフにします。

※iOSでは:hoverの設定は”指を離したとき”に適用されます。
ですので、:hoverはつかえません。
また、今回tap-highlight-colorを使ってハイライト表示のカラーを変更しましたが、デザインなどはカスタマイズできません。

Androidの場合。

Androidの場合でも、リンクをタッチするとハイライト表示は行われています。

しかし、Androidでは、tap-highlight-colorを使用したハイライト表示のカラーの指定は、
-webkit-tap-highlight-color:rgba(0,0,0,0);
を使用した、”ハイライト表示をオフにする”指定しか適用されません。
カラーの指定はできないのです。
ですがAndroidでは、:hoverの設定がリンクをタッチした時に適用されます。
なので、tap-highlight-colorでハイライト表示で表示される枠をオフ(非表示)にしつつ、
:hoverでタッチした時のデザイン(背景色とか)をカスタマイズすると
ハイライト表示のカラーが変更されたような表示になります。
(Androidのスクショがなくてすみません・・。)

こんな感じで、iPhoneだけ向け・Androidだけ向けの設定をしなければならないんです。
面倒くさいです。
ですが、jsを使えば共通の記述で、ハイライト表示の設定ができるんです。

jsを使ったハイライト表示の指定

iOSでは:hoverの設定がタッチした時ではなく、指を離したときに適用されます。
これを、Javascriptを利用して”タッチした時”に.touchstyle{~}の設定が、”タッチをやめた時”に
.notouchstyle{~}の設定がリンクに適用されるようにします。
Androidでも同じ動きをします。?
まず、準備としてaタグに、CSS3での方法で
iOSの部分で説明した
-webkit-touch-callout:none;
Androidの部分で説明した
-webkit-tap-highlight-color:rgba(0,0,0,0);
を設定します。
そして、CSSはこんな感じです。

a{
	background-color:transparent;←好きな色
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
	.touchstyle { background-color:yellow;}←好きな色
	.notouchstyle { background-color:transparent;}←好きな色

準備と、”タッチした時”、”タッチをやめた時”のCSSの設定です。
そして、Javascript、HTMLはこちら。

window.onload = function() {
	var target = document.getElementById("test");
	target.addEventListener("touchstart",function(){
		this.className="touchstyle";
	}, false);
	target.addEventListener("touchend",function(){
		this.className="notouchstyle";
	}, false);
}
	<a id="test" href="#">sprouthead.com</a>

これで、一つの方法でiOS・Androidどちらも同じ動きをします。

こんな感じで、ハイライト表示を設定できます。

***追記************************
jsを使ったハイライト表示の指定について、idではなくclassを使った方法を書いた記事を
新しく追加致しました。

よろしかったら、こちらも合わせて御覧ください。
iOS・Androidのハイライト表示の指定について。その2

Similar Posts:

3 Responses to “iOS・Androidのハイライト表示の指定について。”

  1. Yukiko.M says:

    はじめまして。質問です。
    JQuery Mobileでもハイライト表示、さっそく使用させていただこうと導入しましたが、
    1ページに複数のリンクアドレスを貼っているんですが、1つ目にしかハイライト表示されません。

    AA
    BB

    idではなくて、classのように複数のリンクでもハイライト表示させる方法がありましたら

    教えていただけないかと思うのですか、無理でしょうか。。。?

  2. […] 、スマートフォンのハイライト表示について記事を書きましたが、 →”iOS・Androidのハイライト表示の指定について。” その中の「jsを使ったハイライト表示の指定」について質門を頂 […]

  3. mizushima says:

    ご質問ありがとうございます。
    頂いたご質問を元に、記事を書かせて頂きましたので、
    こちらをご参考にして頂ければ、と思います。
    iOS・Androidのハイライト表示の指定について。その2

    宜しくお願い致します。

Leave a Reply