馬場です。
さまざまなサイトを観ていると、
背景（背景画像）が
横いっぱいに伸びているページを
良く目にすると思います。
背景を
横いっぱいに伸ばす場合は、
background-colorや
background-imageなどの
背景の設定をするセレクタの
widthを設定しない
（もしくはwidht:autoを設定）
ことで、問題なく
対応することが
できると思います。
しかしながら、
少し問題があります。
今回は、
ページの横いっぱいに
伸びる背景（背景画像）を
設定した際の問題点と、
その対応策をお話しします。
・問題点（背景が切れる？）
・widthを設定してみると？
・対応策（min-widthを設定）
▼問題点（背景が切れる？）
- （htmlコーディング）
-
<div id="header01">
<div class="inner">ヘッダ</div></div>
<div id="contents01">テストテストテストテストテストテストテストテストテスト<br /></div>
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
<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 /></div>
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
<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 /></div>
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
<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 /></div>
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
<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の力を借りることに
なってしまいます。
▼あるＳＥのつぶやき
http://fnya.cocolog-nifty.com/blog/2006/12/minmaxjs_iecssm_d111.html
HTML5＆CSS3の最新情報はこちら → HTML5GOGO
