XHTML/CSS 画面中央からちょっと左の指定

ちょっと珍しいケースのコーディング備忘録です。

コーディングしているときに「画面中央に配置 or 真ん中寄せ」というのはよくある話ですが、真ん中ではなく真ん中よりちょっと左の位置にしたい時にどうするか。

例としてこういうデザインのサイト。よくあるレイアウトです。

 

ただしこういう条件がつく。画面上部全体がFlashなわけです。上半分がFlash、そこから下がHTML。

 

よくある真ん中寄せ指定のmargin:0 auto; にするとど真ん中にきてしまう！
Flashとずれてしまう！

 

メイン部分と右メニュー部分を別のブロックとして用意し、左右に配置するという手がまず浮かびます。だけど右メニューは空のブロックを置いてしまう。コーディング上美しくない・・・

 

なので以下のように書きます。

【１】画面横幅の半分の値にブロック全体を移動させる。（画面の中心線を確定。）
【２】ブロック全体の横幅の半分のサイズをマイナスのマージン指定
という風にするとすっきりといきます。

.block{
position:absolute;
top:600px;
left:50%; ・・・【１】
width:500px;
margin-left:-350px; ・・・【２】　//ブロック全体の横幅50%
}

 

ただし。この方法でコーディングした場合、【１】のleft:50%が曲者です。left:50%は画面（ウインドウサイズ）の横幅全体の50％な訳ですが、では、横幅1024pxのPCと1025pxのPCとではどうなるか？

1024÷2=517px

1025÷2=517.5px

ブラウザ内部でこの計算結果を処理して画面のレンダリングに反映します。この計算結果が割り切れる場合、割り切れない場合の小数点以下の扱い方がブラウザによって異なるようです。少なくとも、Firefox2とFirefox3.5.3(現時点での最新版)では結果が異なりました。

結果として517pxと解釈するブラウザと四捨五入して518pxとして解釈するブラウザがあり、1pxのずれが起こります。
画面サイズ、ブラウザによって変わってくるわけです。例の場合、上のFlash部分と下のHTMLは画像が背景指定してあるため、継ぎ目なくつながらなくてはなりません。1pxのずれは許されないのです。

ではこのブラウザ間の違いをどうやって吸収するかですが、CSSのハック(ブラウザの処理の違い・バグを利用して、ブラウザごとの結果を最適化していくこと)が考えられます。ですがCSSハックは極力控えるべきであり、今回のような場合、経験上CSSハックでも対応できるのか？という懸念があります。なのでうまくいった方法としてjavascriptによる対応策を次回に書きます。

【次回につづく。】

追記：

ということは、横幅が割り切れない値の場合、%指定など計算させる書き方はしない方が無難。
うーん。わかる人にはわかってくれるかも記事だなぁ・・　まぁ備忘録ということで。