MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. Web開発
  3. スマホでリンクをタップした際のハイライトの表示を変更する

スマホでリンクをタップした際のハイライトの表示を変更する

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

リンクをタップした際、iOSのMobileSafariでは薄いグレー、
Androidではオレンジの枠でハイライトされます。

その色や表示を変更してみようというエントリーです。

iOSの場合

iOSの場合はハイライトの薄いグレーの色を変更したり、消したりできます。
ちなみにiOS4では使えなかった:hoverはiOS5でタップ時に適用されます。

まずはハイライトの色を変更する場合。a要素に下記のプロパティを適用するだけです。

a { -webkit-tap-highlight-color: red; }

ハイライトの色を消す(ハイライトさせない)場合は、値をrgbaで記述して消します。

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

デフォルトのハイライトを消して、:hoverでオリジナルのタップ時アクションが付与できます。

a {-webkit-tap-highlight-color: rgba(0,0,0,0);}
a:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#489900), to(#63d000));
}

Androidの場合

Androidの場合は、ハイライトの色指定ができません。よってtap-highlight-colorプロパティで指定できるのは、
タップ時、オレンジの枠をハイライトとして使用するか、消すか。です。

消す場合はiOSと同じく下記のように記述。

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

iOSと同じくハイライトを消して、:hoverでハイライトをオリジナルに変更できます。

a {-webkit-tap-highlight-color: rgba(0,0,0,0);}
a:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#489900), to(#63d000));
}

これまたサンプル作りました。
こちらからどうぞ。iOSかAndroidで試してみてくださいね。

もし、この記事が役に立ったらシェアしてくださいね!

ツイート
このエントリーをはてなブックマークに追加
タグ
,
カテゴリ

RECOMMEND BOOKS 筆者オススメ!! この記事に関連する書籍一覧

CSS3 スタンダード・デザインガイド

CSS3 スタンダード・デザインガイド

エ・ビスコム・テック・ラボ

タイトル通りCSS3についての本の中で「スタンダード」となりそうな本。定番から草案のプロパティ、ブラウザ独自プロパティ等、かなりの情報が網羅されてます。CSS3について知りたければこの本さえあれば正直いいかも。

¥2,940(税込)

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS3デザインブック 仕事で絶対に使うプロのテクニック

MdN編集部

実践的な内容がメインです。「こうしたい時はこう」みたいな応用方法が載ってます。実践ノウハウが盛り込まれているので「なるほど!」と思える部分がいっぱいです。

¥2,940(税込)

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

松田 直樹、宮山 純

当ブログ管理人の宮山が初めて執筆に参加した書籍。実際の制作の現場で培ったノウハウや、スマートフォンサイトの設計・デザインのポイント、サイトの軽量化など、充実した内容になったかなと思います。レビューを頂ける場合は甘口でお願いします。

¥2,625(税込)

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

谷拓樹

iOSに特化したスマホサイト制作ガイド。実際の内容はAndroidでも使える内容も豊富なので、スマホサイトを制作する上で読んでおいて損はなし。

¥2,310(税込)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

たにぐちまこと

スマートフォンサイト制作における入門本。スマホサイト制作において大事な設計から基本的なマークアップ、応用まで盛り込まれているので入門本として最適な本。

¥2,499(税込)