Androidでbox-sizingがきかなくて困ったのでメモ

CSS3の「box-sizing」。便利なので、スマホサイトをコーディングする際によく使うのですが、Androidできかないケースがあるので注意が必要です。

ベンダープレフィックスを付けなかったことで、Android2.○でスタイルが適用されなかったことが原因。なんてことはないのですが、同じことをやってしまいそうなので、メモ。

box-sizingとは

box-sizingはボックスサイズ、つまりボックスの幅や高さを計算する方法を指定する場合に使います。

簡単に言うと、paddingとborderの幅(高さ)を含めるか含めないかを指定するプロパティです。指定する値は以下の3つ。

box-sizingのプロパティ

  • content-box
    paddingとborderの幅(高さ)を含めない。
    ボックスの幅は「padding+width」、高さは「padding+height」
  • border-box
    paddingとborderの幅(高さ)を含める
    ボックスの幅は「width」、高さは「height」
  • inherit
    親要素の値を引き継ぐ

イメージとしてはこんな感じ。

box-sizingのイメージ

指定しない場合は、content-boxが適用されます。

スマートフォンサイトを作るのに便利

スマートフォンサイトの場合は、幅をパーセント(%)で指定することが多いです。

パーセントで指定する際に、面倒なのがpaddingの指定。paddingのサイズを考慮して、widthを何%にすれば良いか考えないといけないので。

それがbox-sizingでborder-boxを指定しておくと、widthは画面いっぱいだったら100%とか、単純に見た目の幅で指定して、その中での余白をpaddingで指定すれば良いので簡単です。

特に、バナーを、画像を使わずにCSSで装飾する場合は、便利なプロパティだと思います。

Android2.○ではbox-sizingがきかなかった……

私の場合、コーディングをおこなっている最中は、Android4.○で確認しながら作業しています。そして、Android4.○(端末による?)ではbox-sizingがきくので、2.0で検証するまで気づかなかったという……。

解決方法は簡単で、ベンダープレフィックスを付ける。Android2.○の時は、box-sizingが勧告候補前だったので、ブラウザがベンダープレフィックスで実装していたということなんでしょうね。

Androidの場合は、「-webkit-box-sizing」で指定します。PCのブラウザ含め、とりあえずすべてに対応するのであれば、以下のように記述する必要があります。

#sample {
	width: 300px;
	height: 150px;
	padding: 10px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

まとめ

box-sizingはスマホサイトを構築する際に、非常に使えるプロパティだと思います。
ただ、上記の点に注意しとかないと、表示が意図したものと違ったり、レイアウト崩れたり……という状況が発生します。

Androidの表示崩れの中では簡単な方法で対応できますが、知らないとハマりますよね。

PCの場合は、box-sizingを使わずにコーディングしたほうが良いと思います。ベンダープレフィックスの有無に関係なく、対応していないブラウザを検証範囲に含める可能性があるので。

box-sizingにかぎらない話ですが、ベンダープレフィックスを付けておきましょう。Androidのバージョン2.○を検証範囲に含めるケースは多いですからね。

追記(2016/6/17)

現在は、IE7以下対応するケースはほぼ無い(完全に無いとは言い切れないのが……)ので、PCでもbox-sizingを使って良いと思います。

Androidもバージョン2.○に対応するケースがだいぶ少なくなりましたが、box-sizingにかぎらずベンダープレフィックスを付けないと効かない可能性があることを頭に入れておきましょう。

公開:2013/06/07 | 更新:2016/06/17