BLOG

ブログ

  • WEB制作

スマホでタップした時にリンクの色を変える

こんにちは。

最近制作案件に追われていてなかなかブログが更新できずにいるので、構成とか雑になってますが更新していきます。

スマホ表示時における a:hover の設定について。

PC表示時にはリンクと分かりやすいようにマウスオンで文字色を変えたりする

a:hover

を使いますよね。

これってスマホ表示時にはどうなんでしょう?

そもそもスマホにはマウスオンという概念が存在しないので、リンクホバー設定を削除する事が多いのですが、タップしてページが切り替わるまでの時間にタップした事が分かるようにリンクの色を変えるなりした方がユーザービリティ的には良いのではないか。

という意見もあります。

確かにと思い、リンクホバーの設定をスマホ用cssにも残したのですが、タップしても上手く色が変わらないんですよね。

iPhone だと 2回タップしないと色が変わらない。

そこで該当の “a” 要素に “ontouchstart” 属性を追加してあげると、スマホでタップしたと同時に a:hover の設定が発生してくれます。

全ての a 要素に属性を追加するのは手間なので、下記のようにbody要素に追加するだけで OKです。

<body ontouchstart="">

ちなみに a:hover ではなく a:active を設定するとタップした瞬間のみスタイルが適用されます。

//タップしてページが変わるまでスタイルが適用される
a:hover{
color:#ff0000;
}

//タップした瞬間のみスタイルが適用される
a:active{
color:#ff0000;
}