レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い

更新日 2017年11月23日

デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。

たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。

まずはパーセント指定の基本から

まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。
CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。

たとえば100pxの親要素の中にある子要素に30%の幅を指定すると、30pxになります。以下のような感じですね。これだと、サブピクセル（小数点以下のピクセル値）が出ないので、各ブラウザの挙動は同じになります。

<div style="width:100px;background:#ddd;height:100px;margin:0 0 30px;">
  <div style="width:30%;background:blue;height:100%;"> </div>
</div>

では、子要素に33.33%や33.5%を指定するとどうでしょう？

小数点以下のpx値の扱いはブラウザによって異なるため、以下のようにそれぞれ違った計算がされます。

WebkitとOpera

小数点以下は切り捨て

100px x 33.5% = 33.5px → 33px
100px x 33.33% = 33.33px → 33px

[追記: 2012/6/2]
はてブで「Chrome 21 から Firefox, IE9, IE8 と同じになるみたいですよ。」というコメントをいただきました。Mac Chrome 21.0.1155.2 devでデモページを見たら、たしかにFirefox、IE9、IE8と同じになっていました。これは嬉しいですね。コメントを入れていただいたcheesesouffleさんに感謝です。

Firefox、IE9、IE8

自動でピクセル値を計算、調整する

100px x 33.5% = 33.5px → 33pxまたは34px
100px x 33.33% = 33.33px → 33pxまたは34px

IE7、IE6

0.5以上を繰り上げ

33.33% x 100px = 33.33px → 33px
33.5% x 100px = 33.5px → 34px

たとえば、この記事の例にあるように、49pxと50pxの親要素のなかに25%の子要素を4ついれた場合、以下のような結果になります。

計算上は各カラムの幅は以下のようになりますが、ブラウザの共同差により実際の表示は異なります。

49px x 25% = 12.25px
50px x 25% = 12.5px

WebkitとOpera

どちらも小数点以下が切り捨てられるため、以下のようにピクセルが余ってしまいます：

[追記: 2012/6/2]
はてぶで「Chrome 21 から Firefox, IE9, IE8 と同じになるみたいですよ。」というコメントをいただきました。Mac Chrome 21.0.1155.2 devでデモページを見たら、たしかにFirefox、IE9、IE8と同じになっていました。これは嬉しいですね。コメントを入れていただいたcheesesouffleさんに感謝です。

Firefox、IE9、IE8

自動で調整してくれるため、親要素に子要素がぴったりはまります：

IE7、IE6

小数点以下が0.5以下の場合、ピクセルが余ってしまいます。逆に小数点以下が0.5以上の場合、繰り上げになり一番右のカラムが落ちてしまいます。：

デモページはこちらからどうぞ。

グリッドレイアウトでの2つの問題点

グリッドレイアウトを構築する際、これらブラウザの挙動による問題点が2つあります。

WebkitとOperaで、ピクセルが余る
IE6、IE7で、カラムが落ちる

上記2つの問題点に対して、完璧ではないですが、対処法として以下が考えられます。

WebkitとOperaで、ピクセルが余る

レスポンシブWebデザインのフレームワーク「Foundation」で採用しているように、最後のカラムを右寄せにする。こうすることで、全体幅を統一して見せることができ、ある程度デザインの統一感は保てます。

下図のように、一番右のカラムの左の空きが大きくなってしまいます。

IE6、IE7でのカラム落ち

IE向けのCSSでは、繰り上げが起こらないように、0.5px分を幅から引きます。たとえば100pxの親要素に入った要素の場合、0.5 ÷ 100 = 0.5%を幅の指定値から引きます。

これで、IE6、IE7でもWebkitやOperaと同じ挙動になるので、扱いが楽になります。ちなみに、親要素も%指定の場合、最小幅で上記の計算をすればカラム落ちの心配は無くなります。一つ一つ計算していくのは大変なので、Tateさんが紹介しているようにLESS.jsやSaSSのようなCSSフレームワークを使えたら、ある程度のコーディングの効率化はできそうです。

まとめ

レスポンシブWebデザインでウェブサイトを構築する際、リキッドレイアウトは必須の条件だと考えています。そして、リキッドレイアウトを実装するにはCSSでのパーセントの幅指定は必須になります。予期せぬレイアウト崩れを極力避けるために、こういった細かいブラウザの挙動は必須の知識になりそうですね。（地道な作業だな〜。。。）

参考リンク

【宣伝】レスポンシブWebデザインについての本を書きました

[追記: 2013/1/4]

レスポンシブWebデザインに関する本「レスポンシブWebデザイン制作の実践的ワークフローとテクニック」を書きました。1年以上レスポンシブWebデザインで作ったウェブサイトを運営した経験から試行錯誤したことを1冊の本にまとめました。良かったら立ち読みしてみてください。こちらで第1章の一部を公開しています。あと、本書の見どころ・読みどころをまとめたスライドを作ったので、良かったらあわせてご覧ください。

2012年5月30日に公開され、2017年11月23日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする