人間が見て次のようにレイアウトされている Web ページを作りたいときどうすればいいだろう。まずは絶対指定での課題を考える。幅 400px の親要素 (box) の中に、親要素の幅に対する幅 80% の子要素 (box) が含まれ、子要素の両側に等しいだけの幅 (親要素に対する幅 10% が両側に) が空いている、子要素の内容は子要素の縁から 40px だけ離れた位置にある。このとき正直に下のようなコードを書いてみた。これが思ったとおりに解釈されるかどうかはブラウザに依存する。
<div style="width:400px;background:yellow;">A <div style="width:320px;margin:0px auto;padding:0px 40px;background:green;">B C</div> D</div>
Microsoft Internet Explorer の場合
さてどのように見えただろうか。Microsoft Internet Explorer では、320px の緑色の帯、80px の黄色い帯、の順で表示された。左右の margin を auto、つまり両サイドを等しいだけ空ける、にしたのにもかかわらず。では子要素の両サイドのマージンを絶対指定するとどうだろうか。400px と 320px の差、80px の半分、40px が両側に空けばよいので次のように考えられる。
<div style="width:400px;background:yellow;">A <div style="width:320px;margin:0px 40px;background:green;">B C</div> D</div>
さてどのように見えただろうか。Microsoft Internet Explorer では、思ったように表示できたと思う。僕は、絶対指定は好きでない。なぜならブラウザのウィンドウの大きさを変えるとはみ出てしまうからだ。そこで幅やマージンを相対指定してみる。相対指定する際の問題点は何に対しての割合かということである。講釈を述べずに成功例を示し、どのように解釈しているかの結論を導こう。
<div style="width:400px;background:yellow;">A <div style="width:100%;margin:0px 10%;background:green;">B C</div> D</div>
Microsoft Internet Explorer では、思ったように表示できた。つまり絶対指定したときと全く同じ様に、40px の黄色の帯、320px の緑色の帯、40px の黄色の帯、の順番だ。つまり Microsoft Internet Explorer では、子要素の width を相対指定する場合の分母は (親要素の width) - (子要素の margin)、子要素の margin を相対指定する場合の分母は (親要素の width) だとわかる。
| cWWpx cMMpx |cWW% = ----------- X 100 , cMM% = ----- X 100 | pWWpx-cMMpx pWWpx
例えば、box 要素内の box 要素をセンタリングしたいという要望は多い。body 要素内の p 要素をセンタリングしたいとかである。センタリングするということは絶対指定した場合の (親要素の width) = (子要素の margin) + (子要素の width) が成り立っているということである。これと上の式により、親要素に対してセンタリングされる子要素の width は 100% でなければならない、ということがわかる。
| pWWpx-cMMpx |cWW% = ----------- X 100 = 100 | pWWpx-cMMpx
<div style="width:400px;background:yellow;">A <div style="width:100%;margin:0px 40%;background:green;">B C</div> D</div>
センタリングされる box 要素の width を 100% より小さくすると下のようになる。つまり親要素の width は指定したとおりの値で子要素の width が小さくなる、ということだ。
<div style="width:400px;background:yellow;">A <div style="width:50%;margin:0px 10%;background:green;">B C</div> D</div>
センタリングされる box 要素の width を 100% より大きくすると下のようになる。つまり親要素の width が大きくなり子要素の width は指定したとおりの値、ということだ。
<div style="width:400px;background:yellow;">A <div style="width:150%;margin:0px 10%;background:green;">B C</div> D</div>
草稿
上の絶対指定を相対指定にしてみるとこうなる
Firefox では上の 2 つは全く同じに見えた。InternetExplorer では上の 2 つは異なっていた。幅、マージン、パディングのパーセント指定が親要素の幅や高さに対する割合ならば、上の 2 つは全く同じに見えなければならない。
IEのことを考えないと。
Firefox では上の 2 つは異なっていた。InternetExplorer では上の 2 つは全く同じに見えた。幅、マージン、パディングのパーセント指定が親要素の幅や高さに対する割合ならば、上の 2 つが全く同じに見えるのはおかしい。
| IE 6 | Firefox 1.5 | |
|---|---|---|
| width:WW%; | 親要素 width 引く自身 margin の WW% | 親要素 width の WW% |
| padding:PP%; | 自身 width の PP% | 親要素 width の PP% |
| margin:MM%; | 親要素 width の MM% | 親要素 width の MM% |
ということは IE と Firefox で同じようなレイアウトをなすには margin だけ使って padding や width を使うのはご法度といううことになる? 少なくともいえることは、Firefox のほうが Web ページをレイアウトする方の人間にとってはわかりやすいシステムを採用しているということだ。