- 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;
}
名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。
