別ページから特定のタブが開いた状態へダイレクトリンク
2026.07.08
スマホでa:hoverを効かせてタップ時に色を変える方法【ontouchstart】
- 公開日
- 最終更新日
PC表示では、リンクだと分かりやすいようにa:hoverでマウスオン時の文字色を変えることがよくあります。ではスマホ表示ではどうでしょうか。タップしてページが切り替わるまでの一瞬、リンクの色が変わると「タップできた」ことが伝わり、使い勝手が良くなります。
ところが、スマホ用CSSにa:hoverを残しても、うまく色が変わってくれません。結論から言うと、<body>にontouchstart属性を付けると、スマホでタップした瞬間にa:hoverが反映されるようになります。この記事では、その理由と対処法、a:activeとの違いを解説します。
スマホでは a:hover が効きにくい
そもそもスマホには「マウスオン」という概念がないため、リンクのホバー設定を削除することも多いです。ただ、タップの手応えを見せたくてホバー設定を残しても、思ったように動きません。
特にiPhoneでは、1回目のタップでは色が変わらず、2回タップしないとa:hoverのスタイルが当たらないという挙動になりがちです。これは、タッチデバイスがホバー状態を擬似的に扱うためで、そのままではタップ時のフィードバックとして機能しません。
解決法：bodyに ontouchstart 属性を付ける
該当のa要素にontouchstart属性を付けると、スマホでタップすると同時にa:hoverのスタイルが適用されるようになります。ただ、すべてのa要素に属性を追加するのは手間です。そこで、次のように<body>に付けるだけでOKです。
<body ontouchstart="">
これだけで、ページ内すべてのリンクで、タップと同時にホバースタイルが反映されるようになります。属性の値は空でかまいません。
ontouchstartを付けると、その要素がタッチ操作に対応しているとブラウザが認識し、タップ時に:hover相当の状態が即座に適用されるようになります。値が空でも、属性が付いていること自体に意味がある、という少し変わったテクニックです。ややトリッキーな方法ではあるので、既存サイトへの手早い対処に向いています。
a:hover と a:active の違い
タップのフィードバックには、a:hoverのほかにa:activeも使えます。両者は「スタイルが適用されるタイミング」が異なります。
/* タップしてページが変わるまでスタイルが適用される */
a:hover {
color: #ff0000;
}
/* タップした瞬間のみスタイルが適用される */
a:active {
color: #ff0000;
}
a:hoverはタップしてページが切り替わるまでスタイルが残り、a:activeはタップした瞬間だけスタイルが当たります。「押している間だけ色を変えたい」ならa:activeのほうが自然な挙動になります。
補足：モダンな書き方
最近では、ホバーが使える環境かどうかを判定する@media (hover: hover)を使う方法もあります。マウスなど本当にホバーできる環境にだけ:hoverのスタイルを当て、タップ環境では:activeでフィードバックする、という書き分けです。
@media (hover: hover) {
a:hover {
color: #ff0000;
}
}
a:active {
color: #ff0000;
}
この書き方なら、タッチデバイスでホバースタイルが誤爆する心配がなく、ontouchstartに頼らずに済みます。既存サイトの手軽な対処にはontouchstart、新規実装なら@media (hover: hover)と:activeの使い分け、と覚えておくとよいでしょう。
まとめ
- スマホ（特にiPhone）では
a:hoverが1回のタップで効かないことがある <body ontouchstart="">を付けると、タップと同時にホバースタイルが反映される- タップした瞬間だけ変えたいなら
a:activeを使う - 新規実装なら
@media (hover: hover)と:activeの書き分けもおすすめ
タップのフィードバックは、ユーザーに「反応した」ことを伝える小さな配慮です。スマホでのリンクの押し心地が気になったら、今回の方法を試してみてください。
