【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか!
こんにちは、相変わらずドラクエ10三昧の橋本です。
最近はライノス道場に通っています。
さて、今日はハイブリッドアプリのCSSを書く際に毎回指定するようにしているプロパティを備忘録がてらいくつか書いていこうと思います(いつも忘れるので)。
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
iPhoneやAndroidでリンクなどの要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠がデフォルトで表示されます。
-webkit-tap-highlight-colorというプロパティに色を指定することで、この枠の色を変えることができます。
ハイブリッドアプリを作成する際には、この枠が出ると如何にもWebっぽくなってしまうため、透明色を-webkit-tap-hightlight-colorに指定して、枠が表示されないようにしています。
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
リストの項目など、敢えて選択時に色を付けたい場合には、個別にtap-hightlight-colorを指定するといいかと思います。
-webkit-touch-callout: none
iOSでリンクを長押しした際に表示されるポップアップメニューを消すためにこのプロパティを設定しています。
ポップアップメニューが出るとネイティブっぽくないですもんね
* {
-webkit-touch-callout: none;
}
-webkit-user-select: none
スマホのヘッダやフッター、またはボタンなどの要素の文字列や画像を選択してコピーできてしまうと、一気にネイティブっぽくなくなりますよね。
そんなときには、-webkit-user-selectにnoneを設定することで、要素を選択できなくすることができます。
* {
-webkit-user-select: none;
}
ただし、このままだと、input要素で文字入力ができなくなってしまったり、何かと不都合があるので、ユーザーからの選択を許可したい箇所には、以下のように-webkit-user-selectにautoを入れて選択できるようにする必要があります。
input[type=text] {
-webkit-user-select: auto;
}
もしくは、以下のように最初からinputは対象外にするのもいいかもです。
*:not(input){
-webkit-user-select: none;
}