読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

aタグをタップした時のハイライト表示の変更 - スマホ向けサイト作成でよくやること(その1)-

CSS JavaScript

f:id:takahironakamori:20160118130112j:plain

レスポンシブデザインなど、スマホ向けのサイトを作成するときに、よくやることの1つとして、aタグをタップしたときのハイライト表示の変更があります。

iOSやAndroidでは、aタグなどをタップしたときに、灰色やオレンジの枠線などのハイライト表示が標準で行われます。そのハイライト表示をやめたい、違うハイライト表示にしたい場合に下記のような処理を行っています。

※事前にjQueryを読み込んでいるという前提です。

0.全体の処理の流れ

1-1.JavaScriptで閲覧環境を取得します。
1-2.JavaScriptでaタグのタップ時にクラス「touchstart」をつけるよう指示する関数を作ります。
1-3.閲覧環境がスマホのときは、上記1-2の関数を実行する。
2-1.CSSでハイライト表示を無効にします。
2-2.CSSでa.touchstartに装飾を加えます。

1-1.閲覧環境を取得

レスポンシブデザインで作る場合は、閲覧環境がスマホの場合とPCの場合とで処理を分けるケースが多いため、スマホかPCなどの閲覧環境を判定を行います。

【JavaScript】

IEの判定はつかいませんが、昔のなごりです。

1-2.aタグのタップ時にクラスをつけるよう指示する関数

【JavaScript】

touchendの処理もあまり使いませんが、念のために加えています。

1-3.閲覧環境がスマホのときは、上記1-2の関数を実行

【JavaScript】

 

2-1.CSSでハイライト表示を無効にする

【CSS】

閲覧環境がスマホのときはbodyタグにspをクラス属性に加えておくと、CSSなどの指定で役に立つ場合があるので今後のことを考えて、加えておきます。

2-2.CSSでa.touchstartに装飾を加える。

【CSS】

今回はbody.spは必要ないので、a.touchstartのみでいいと思います。

上記2-1.で標準のハイライト表示を無効にしてしまうと、ユーザーがタップしたときにどこをタップしたのかがわからなくなるため、ハイライト表示を無効にしたら、なるべく独自のハイライト表示を指定したほうがいいと思います。