目次
CSSの設定でhoverやactiveの設定をしたはずなのに、スマホだと効かない！！なんて時ありますよね。その時の
ために、hoverやactiveをいじらずにたった2分で対処できる方法をお教えします！スマホの需要によりレスポンシブ
デザインも主流になってきていますが、タッチデバイスでも少しでも凝ったデザインや動きが出るようにしたい！
そんな思いを実現できる方法です！
私もそうですが、よく忘れてしまいますのでメモするかブックマークでもしてください。
結論:ontouchstart属性を使う！
もう早速結論言っちゃいます！
『ontouchstart属性を使うだけ』！これだけです！
深く考える必要はありません。
むしろ、これを指定しないとタッチでは:activeと:hoverは反応しないんです。
<body>
<div id="wrapper">
<div class="box" ontouchstart=""></div>
</div>
</body>
ちなみに、定義内容を確認してみます。
ontouchstart 属性とは、スマホ等で当該要素が触れられた際に発生するイベント(割込)で実行するクライアント側スクリプトコード。
より正確に説明すると、当該要素に指先が触れた瞬間に発生するイベントになります。
では、PCでいうどんなイベントと同じなのか？
・マウス操作なら、マウスポタンが押下された際に発生するイベント＝onmousedown 属性
・キー操作なら、キーが押下された際に発生するイベント＝onkeydown 属性
と同じです。
ontouchstart 属性は、iOS やアンドロイド OS 上で動作するスマホやタブレット端末で実装されているそうです。
:active タッチ中のみ処理を行う
もう少し現実味のある話をしますと、
スマホをタッチすると言うより、タップする時だけ反応するのがactive属性。
スマホにタッチするときにずっと押してるわけじゃないけど、
押し続けている状態と同じ反応をしてくれるのが、hover属性。
先ずはこの前者のコードはこちら
.box:active{
background-color: red;
}
※ontouchstart属性のプロパティは空のままで大丈夫です。
:hover タッチ後、違う要素がタッチされるまで
続いて、後者のコードはこちら
.box:hover{
background-color: red;
}
全属性で:hoverと:active一気に適用させる方法
ここまでのおさらいをすると、スマホで反応させたい要素にだけ、
ontouchstart属性を毎回記述しないといけない感じですよね。
しかし、毎回記述しなくても一気にスマホに反応させる方法があるんです。
それは、body要素にontouchstart属性を書いてしまえばいいいんです！
<body ontouchstart="">
<div id="wrapper">
<div class="box"></div>
</div>
</body>
単純にこういうことです。
しかし、この場合だと表示領域のファーストビューしか反応しないという不具合？が発見されています。
この原因は、body要素にheight:100%を指定している場合に発生するようで、対応領域が全領域まで広がっていないように
判断されてしまうみたいです。
なので、一番のオススメは
『#wrapper』や『#contents』にontouchstart属性を適用させるのが良さそうですね！
<body>
<div id="wrapper" ontouchstart="">
<div class="box"></div>
</div>
</body>
補足(もう一つの方法)
ここまでontouchstart属性のお話をしてきましたが、これにこだわる必要はないんです。
どういうことかと言うと、ontouchend属性でもOKってだけの話です。
<body>
<div id="wrapper" ontouchend="">
<div class="box"></div>
</div>
</body>
まあ、好みとかも別に別れるわけでもないんで、とりあえずはontouchstart属性で大丈夫と言うことでした。
終わりに
いかがでしたでしょうか？
今回は「【CSS】スマホでhover・activeが効かない?わずか2分の対処法！」について記事を書きました。スマホユーザーも日々増えていく中で、ユーザビリティの観点からスマホでもボタンかどうかが
わかりやすいとか押しやすいという点は重要ですよね。
よくヒートマップの解析をすると画像のピンチアウトの操作やボタンだと思って何回もクリックされる
要素なども少なくありません。ですので、少しでもユーザーに伝わるものにするためにも
ontouch属性を使っていきましょう！
