ハマログ

株式会社イーツー・インフォの社員ブログ

iPhoneでCSS疑似要素が効かない解決法

スマホにはCSSの擬似要素:hoverの概念はないですが、ボタンなどをタップした時にスタイルが一瞬変わると思ってましたが、iPhoneには適用されないことを先日知りました。

Androidユーザーなので、いつもMacのSafariの「レスポンシブ・デザイン・モードにする」で検証していますが、Safariで反映してるのでできたと思いましたが、実機で確認するとダメでした。

調べると簡単でした。

<body ontouchstart="">
...
</body>

これで全部の要素が効くようになります。
特定の要素もに効かせたい場合はその要素のみ付ければ大丈夫です。

ちなみにスマホで擬似要素の動作は
:hover → タップしたら適用される、別のところをタップしたら解除される
:active → タップしたら一瞬適用される
:focus → 適用されないようです

UI/UXは細かいところまでこだわるほど、ユーザーの使いやすさに繋がるので、今後もセンスを磨いていきたいと思います(^o^)/

  yt   2020年6月17日


関連記事

CSS Guidelinesを読んで参考にしたい習慣

以前社内のランチMTGで発表しましたが、まとめてブログでも掲載したいと思います。…

【EC-CUBE4】好きな場所にyoutube動画を埋め込む

やりたいこと 前回「【EC-CUBE4】カテゴリナビをサイドメニューにカスタマイ…

VSCodeプラグイン「Live Sass Compiler」のフォーマット設定が効かない時の解決法

とあるプロジェクトではモックを作った時にSass周りの設定をしました。 リリース…


← 前の投稿

次の投稿 →