こんにちは、相変わらずドラクエ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;
}
-webkit-overflow-scrolling: touch
スマホのネイティブアプリの特徴の1つに、コンテンツの慣性スクロールがあると思います。
-webkit-overflow-scrollingプロパティにtouchを指定することで、オーバーフローしたコンテンツに対して慣性スクロールを適用することができます。
div.contents-ga-overflow-suruyo {
-webkit-overflow-scrolling: touch;
}
ただ、慣性スクロールは非常に重い処理になるので、端末とコンテンツによっては動きがガクガクになる場合があります(iPhone3GS、iPhone4など)。
そういう場合には、コンテンツにGPUアクセラレーションを効かせるために、以下の指定を入れます。
div.contents-ga-overflow-suruyo > * {
-webkit-transform: translateZ(0px);
}
今回は-webkit-transform: translateZ(0px)を指定していますが、GPUアクセラレーションを効かせることが出来る指定なら、なんでもいいかと思います。
ただ、iOS6からは、「-webkit-transform: preserve-3d」ではGPUアクセラレーションが効かなくなっているので、それだけは要注意です。
box-sizing: border-box
これはハイブリッドアプリに限ったものではないのですが、ハイブリッドアプリを作成する際には、必ずこの指定を全ての要素に対して入れるようにしています。
* {
box-sizing: border-box;
}
box-sizingとは、ボックスの大きさの算出方法を指定するためのプロパティです。
box-sizingには、「content-box」と「border-box」の二種類の値を指定することができます。
content-boxを指定すると、ボックスの幅と高さには、罫線とpaddingの値は含みません。
box-sizingを指定しない場合と同じ扱いになります。
border-boxを指定すると、ボックスの幅と高さに、罫線とpaddingの値を含みます。
わかりにくいので、例として、以下の要素で説明します。
div {
width: 100px;
height: 100px;
border: 1px solid #000;
padding: 10px;
}
box-sizingにcontent-boxを指定した場合、divの幅と高さは122pxになります。
box-sizingにborder-boxを指定した場合、divの幅と高さは100pxになります。
CSSでwidthやheightを指定する際に、paddingとborderの幅を考慮しなくてよくなるため、非常に快適です。
いかがでしたでしょうか。参考にしてもらえるとありがたいです。