2009年01月23日

横いっぱいに伸びる背景について

こんにちは
馬場です。


さまざまなサイトを観ていると、
背景(背景画像)が
横いっぱいに伸びているページを
良く目にすると思います。


背景を
横いっぱいに伸ばす場合は、
background-colorや
background-imageなどの
背景の設定をするセレクタの
widthを設定しない
(もしくはwidht:autoを設定)
ことで、問題なく
対応することが
できると思います。


しかしながら、
少し問題があります。


今回は、
ページの横いっぱいに
伸びる背景(背景画像)を
設定した際の問題点と、
その対応策をお話しします。


問題点(背景が切れる?)
widthを設定してみると?
対応策(min-widthを設定)



▼問題点(背景が切れる?)


(htmlコーディング)
<div id="header01">
<div class="inner">ヘッダ</div>
</div>
<div id="contents01">
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
</div>
<div id="footer01">
<div class="inner">フッタ</div>
</div>
(cssサンプル)
#header01 {
background-color:#71BED9;
}
#header01 .inner {
width:700px;
margin:auto;
padding:20px;
}
#contents01 {
width:700px;
margin:auto;
padding:20px;
background-color:#FFCCCC;
}
#footer01 {
background-color:#71BED9;
}
#footer01 .inner {
width:700px;
margin:auto;
padding:20px;
}
上記サンプルの
ブラウザのウィンドウの横幅を
横のスクロールバーが
表示されるまで狭めてみてください。

そして、
横へスクロールさせると、
背景が表示されていないことが
確認できると思います。



↓横へスクロールすると



これは、
おそらくbodyタグ内の横幅が
ブラウザのウィンドウサイズに
依存しているためだと
思われます。

(bodyタグに背景を設定した場合は、
問題ありません。)



▼widthを設定してみると?


上記の現象を
回避するためには、
背景を表示させたいタグの
横幅を設定する
必要がありますが、

仮にwidth:1280pxを設定すると
横が1280pxより低い
画面解像度のPCでは、

常に横スクロールバーが
表示されることに
なってしまいます。

(htmlコーディング)
<div id="header02">
<div class="inner">ヘッダ</div>
</div>
<div id="contents02">
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
</div>
<div id="footer02">
<div class="inner">フッタ</div>
</div>
(cssサンプル)
#header02 {
width:1024px;
background-color:#71BED9;
}
#header02 .inner {
width:700px;
margin:auto;
padding:20px;
}
#contents02 {
width:700px;
margin:auto;
padding:20px;
background-color:#FFCCCC;
}
#footer02 {
width:1024px;
background-color:#71BED9;
}
#footer02 .inner {
width:700px;
margin:auto;
padding:20px;
}

widht:1024pxを
設定すると
今度は逆に1280pxの
画面解像度では

背景が途中で
切れて表示されてしまいます。

(htmlコーディング)
<div id="header03">
<div class="inner">ヘッダ</div>
</div>
<div id="contents03">
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
</div>
<div id="footer03">
<div class="inner">フッタ</div>
</div>
(cssサンプル)
#header03 {
width:1280px;
background-color:#71BED9;
}
#header03 .inner {
width:700px;
margin:auto;
padding:20px;
}
#contents03 {
width:700px;
margin:auto;
padding:20px;
background-color:#FFCCCC;
}
#footer03 {
width:1280px;
background-color:#71BED9;
}
#footer03 .inner {
width:700px;
margin:auto;
padding:20px;
}



▼対応策(min-widthを設定)


横スクロールバーがでるのは、
ブラウザのウィンドウの
横幅よりも

表示する内容の
横幅の方が
大きい場合

(ブラウザのウィンドウの
横幅より大きいwidthを
設定したタグがある場合)



なので、背景を設定したタグの
widthに、このwidthと同じ値が
設定されていれば、
問題なく、背景が
表示されることになります。


ブラウザの横幅を狭めた際に
問題があるので、
min-widthをコンテンツの
横幅に設定すれば、
ブラウザのウィンドウに合わせて、
横幅が広がり、
ブラウザのウィンドウが狭まり、
横スクロールが出た際にも
背景を途切れることなく
表示することができます。

(htmlコーディング)
<div id="header04">
<div class="inner">ヘッダ</div>
</div>
<div id="contents04">
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
</div>
<div id="footer04">
<div class="inner">フッタ</div>
</div>
(cssサンプル)
#header04 {
min-width:700px;
background-color:#71BED9;
}
#header04 .inner {
width:700px;
margin:auto;
padding:20px;
}
#contents04 {
width:700px;
margin:auto;
padding:20px;
background-color:#FFCCCC;
}
#footer04 {
min-width:700px;
background-color:#71BED9;
}
#footer04 .inner {
width:700px;
margin:auto;
padding:20px;
}

ただし、IE6は、
min-widthに対応していないため、
「minmax.js」という
JavaScriptの力を借りることに
なってしまいます。


▼あるSEのつぶやき
http://fnya.cocolog-nifty.com/blog/2006/12/minmaxjs_iecssm_d111.html

posted by baba at 20:37 | Comment(0) | TrackBack(0) | テクニック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。