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

今回は

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

紹介します。

（以下　iOS→iOSのMobile　Safari、Android→Androidの標準ブラウザ）

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

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

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

まず初めに。

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

それでは。

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

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

-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に指定しましたが、色の設定は１６進数や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を使えば共通の記述で、ハイライト表示の設定ができるんです。

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

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どちらも同じ動きをします。

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

Similar Posts:

• ソースコードをハイライト表示できるWordPressのプラグイン SyntaxHighlighter
• WordPress2.7の導入(9) ウィジェットの設定
• Amazon Reloaded for WordPressのバージョンアップ
• Google Sitemapを自動で作成するWordPressのプラグイン Google XML Sitemaps
• WordPress2.7の導入(8) テーマwp.Vicuna Ext.の設定