【コピペでOK】スマホボタンのタップ時の疑似スタイルは:hoverじゃなくて:activeな！

りょうま(@ytq_ryoma)です。

cssのコーディングをしていて、意外と多くの方が見落としがちなところがいくつかあります。

そのひとつがボタンの擬似クラスの付け方。
擬似クラスとはhoverやfirst-childやlast-childあたりをよく使われると思います。

その中でも代表的なhover！

この正しい使い方をご紹介します。

hoverとはあくまでPC上での概念

hoverアクションは主にPC上でカーソルが要素に上に重なったときに起こるアクションのことです。

スマホやタブレットでは、カーソルというものがそもそもないので、hoverアクションをスタイルで設定することが間違いです。

hoverの擬似クラスを当てていてもスマホ上で、ボタンをタップしたとき一応変化は起きています。（一応・・・）

ですが、本来はPC上でのカーソルアクションの変化をさせるための擬似クラスなので、レスポンシブ時はhoverのままではよろしくありません。

レスポンシブではactionを使う

前項ではhoverをレスポンシブで使うのが間違いといいました。

しかし動作しないわけではありません。

例えばスマホでボタンをタップして指を離した後、またはページバックで戻ってきた後、よくみるとさっきタップしたときのhoverアクションがそのまま残っていたりするのですね。

こうなるとボタンカラーなども変わってしまっていて、非常に不格好な見た目になってしまうので、タップ時だけに反応するように、:action擬似クラスを使います。

こうすることで、リンクやボタンをタップ時だけスタイルをあてることができるのです。

サンプルコード


/*media Queries PCの場合*/
.btn:hover {
  color:white;
  background-color: blue;
}

/*media Queries スマートフォンとタブレットサイズ（786px以下）*/
@media only screen and (max-width: 768px) {
 .btn:active {
   color:white;
   background-color: red;
 }
}