CSSレイアウトでの中央寄せ

Question

　おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。この解決方法はありますでしょうか。ご教授のほど、よろしくお願いいたします。 ▼HTML テスト

テスト

quads · Accepted Answer

> 背景画像をブラウザの最上部から最下部まで表示させたいと思っています。
> ですので、ご回答のソースですと、
> コンテンツのボリュームが少ない場合、
> ブラウザの最下部まで背景画像が届かない状態なのです。

#2 の内容を引き継ぐ。
wrapper-inner ボックスに関しては id として命名したほうがよいかもしれません。
class として考えるのであれば、class="inner" のように命名し、
#wrapper .inner {}
のように書いたほうが賢明かもしれません。

「ボリュームが少ない場合」は、表示最大幅の高さを確保する
html, body { height: 100% }
#wrapper-inner { min-height: 100% }

IE7 standard mode を除いて、IE では min-height プロパティに対応していません。
IE7 quirks mode 及び IE6 以前の IE では、内容が親要素の表示領域を超えた場合、勝手に拡張します。
つまり、IE7 quirks mode 及び IE6 以前の IE に関しては、height プロパティが min-height プロパティと同等になります。

IE7 quirks mode 及び IE6 以前の IE に適用される hack を用いて height プロパティを指定します。
* html #wrapper-inner { height: 100% }

#2 で提示されているソースに追記するとすれば、次のようになります。

html {
height:100%;
}
body {
margin:0;
padding:0;
text-align:center;
background:★;（背景色のみ）
height:100%;
}
#wrapper {
background: url(​​http://www.geocities.jp/ajax3210/bg.gif)​​ left top repeat-y;
width:★px;（bg.gifのwidthと同じ幅）
margin-left:auto;
margin-right:auto;
}
.wrapper-inner {
width: 746px;
margin-left:auto;
margin-right:auto;
text-align:left;
min-height:100%;
}
* html .wrapper-inner {
height:100%;
}


> やはり、divの背景画像で対応するしかないのでしょうか。。
本来であれば、質問で書かれたように body(親要素) に対する background で center を指定すべきです。
ただ、center や パーセンテージなどは表示領域に対する相対位置であるため 1ピクセルのずれといったものは生じ得ます。

quads · Answer

既に余談ですが、参考程度に。

というか、#4で示した参考URIは覗く程度で結構です。
技術的なことはあまり説明されていません。
教養を深めるのは大いに結構ですが。


> ハックしたものが今後のブラウザに影響するのか、

どんなハックがどのUAで適用され得るのかということでしょうか。
#4でも述べましたがCSSの文法規則に反していない限り、UA側の致命的な問題さえなければハックがあることによる弊害は生じません。
CSS-hack はあくまで、適用される形でパースされるUAに対して有効なスタイルシート指定です。
CSS-hack や pass-filter の対応については以下が参考になるかもしれません。
http://dithered.chadlindstrom.ca/css_filters/
http://www.lucky-bag.com/archives/2006/06/css-hacks.html

Webページをひとつ作るにしても、CSSを書くにしても、ガイドラインはあるものの結局は製作者の自由です。
自身で、何がどう（広い意味で）影響するのかといったことが判断できるまで理解できるとWebページ作成術の幅が広がります。

quads · Answer

> ハックが必要という点で避けておりました。

なぜ避けるのですか？
各UAの実装差異を補完しクロスブラウザを実現させるには、pass-filter 或いは CSS-hack を用いることが現状では最適な対応です。
また、今回紹介したスターハックは CSS の文法的には適正です。

non-valid なコードに関しては利用を避ける必要がありますが、
妥当であり冗長でない今回のような例に関しては、それを避ける理由が見当たりません。

スターハックが妥当であるか否かという議論は参考URI先をご覧ください。

参考URL：http://www.hamashun.com/blog/2007/02/css_5.html

CHI-512 · Answer

こんにちは。考えられる原因としたら、 body { background: url(http://www.geocities.jp/ajax3210/bg.gif) center top repeat-y; } の“center”の部分だと思います。掲載されたソースを見る限り、wrapperの背景として画像をrepeat-Yで表示させたいんですよね？でしたら・・ body { margin:0; padding:0; text-align:center; background:★;（背景色のみ） } #wrapper { background: url(http://www.geocities.jp/ajax3210/bg.gif) left top repeat-y; width:★px;（bg.gifのwidthと同じ幅） margin-left:auto; margin-right:auto; } .wrapper-inner { width: 746px; margin-left:auto; margin-right:auto; text-align:left; } で

テスト

にする。入れ子になりますが、これなら背景も一緒に動くので、背景だけずれるということはなくなるんじゃないかと思います。お試し下さい。

noname#39970 · Answer

それはブラウザの描画による差違としか言いようがない気がする。
厳密配置をしたいならjavascriptも併用して位置合わせするしかないかも

CSSレイアウトでの中央寄せ

> 背景画像をブラウザの最上部から最下部まで表示させたいと思っています。

既に余談ですが、参考程度に。

> ハックが必要という点で避けておりました。

こんにちは。

それはブラウザの描画による差違としか言いようがない気がする。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング