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

投稿日:2018年12月11日 更新日:

りょうま(@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;
 }
}

 

これでオッケーーーい!
バッチリ〜

皆さんもコーディング時にお試しください!

関連するおすすめ記事

Amazonチャージ


Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス5期目/大阪府北摂在住🏠長野県諏訪市出身🎣webデザインやフロントエンド技術の情報を中心に、人生をカスタマイズして楽しく過ごすための情報を発信中📢WPテーマはAFFINGER5です。

-HTML / CSS
-,

Copyright© ヤッテモータース , 2019 All Rights Reserved.