- ベストアンサー
CSSレイアウトでの中央寄せ
おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、 動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、 背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。 この解決方法はありますでしょうか。 ご教授のほど、よろしくお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css"> <!-- body { margin:0; padding:0; text-align:center; background: url(http://www.geocities.jp/ajax3210/bg.gif) center top repeat-y; } #wrapper { width:746px; height:100px; background-color: #CCCCCC; margin-left:auto; margin-right:auto; text-align:left; } p { margin:0; padding:0; } --> </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>
- moon333
- お礼率87% (28/32)
- HTML
- 回答数5
- ありがとう数7
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
> 背景画像をブラウザの最上部から最下部まで表示させたいと思っています。 > ですので、ご回答のソースですと、 > コンテンツのボリュームが少ない場合、 > ブラウザの最下部まで背景画像が届かない状態なのです。 #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ピクセルのずれといったものは生じ得ます。
その他の回答 (4)
- quads
- ベストアンサー率35% (90/257)
既に余談ですが、参考程度に。 というか、#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ページ作成術の幅が広がります。
お礼
ご回答ありがとうございます。 > #4でも述べましたがCSSの文法規則に反していない限り、UA側の致命的な問題さえなければハックがあることによる弊害は生じません。 なるほど、勉強になります。 これからは必要なハックは積極的に使用し、 技術的な引き出しを増やす事で自分の制作ガイドラインをより向上させたいと思います。 ご意見、誠にありがとうございました。
- quads
- ベストアンサー率35% (90/257)
> ハックが必要という点で避けておりました。 なぜ避けるのですか？ 各UAの実装差異を補完しクロスブラウザを実現させるには、pass-filter 或いは CSS-hack を用いることが現状では最適な対応です。 また、今回紹介したスターハックは CSS の文法的には適正です。 non-valid なコードに関しては利用を避ける必要がありますが、 妥当であり冗長でない今回のような例に関しては、それを避ける理由が見当たりません。 スターハックが妥当であるか否かという議論は参考URI先をご覧ください。
お礼
ご回答ありがとうございます。 今考えますと、ハックを避けていたのは私の技術的な問題ですね。 ハックしたものが今後のブラウザに影響するのか、 影響する際はメンテナンス（時間が必要）が必要だとへんに考えておりました。 要するにハックをきちんと理解していなかったからだと思います。 参考URLをしっかり読み、今後の技術として身につけたいと思います。
- CHI-512
- ベストアンサー率69% (63/91)
こんにちは。 考えられる原因としたら、 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; } で <div id="wrapper"><div class="wrapper-inner"> <p>テスト</p> </div></div> にする。 入れ子になりますが、これなら背景も一緒に動くので、背景だけずれるということはなくなるんじゃないかと思います。 お試し下さい。
お礼
ご回答ありがとうございます。 ご回答のdivの入れ子でうまく表示はできますね。 一点、言い忘れていたのですが、 背景画像をブラウザの最上部から最下部まで表示させたいと思っています。 ですので、ご回答のソースですと、 コンテンツのボリュームが少ない場合、 ブラウザの最下部まで背景画像が届かない状態なのです。 やはり、divの背景画像で対応するしかないのでしょうか。。
それはブラウザの描画による差違としか言いようがない気がする。 厳密配置をしたいならjavascriptも併用して位置合わせするしかないかも
お礼
ご回答ありがとうございます。 描画の差違ですか。 代替え案は、やはりレイアウトDIV内に背景を入れる事ですかね。。。
関連するQ&A
- CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう
DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。 そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。 分かる方いらっしゃったら教えて下さい。 ソースはこれです↓ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSレイアウトについて
cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～
- ベストアンサー
- CSS
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSSでの背景色の指定について
以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }
- ベストアンサー
- CSS
- 外部CSSと HEAD内のCSSの違い
現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。
- ベストアンサー
- Mac
- CSSレイアウト(2列型)に関して
お世話になります。2列の左列がメインで右列がサイドバーというCSSレイアウトに関してご質問します。 以下のような構造のCSSレイアウトを作成しました。 body | |-- #wrapper | | | |-- #content | | | | | |-- #main | | | | | |-- #sidebar body { background: yellow; } #wrapper { width:700px; background: white; } #content { width: 700px; background: white; } #main { float: left; width: 500px; background: white; } #sidebar { float: right; width: 200px; background: blue; } ※padding: 0;margin: 0;を実際には全てに追加してあります。 ----- 以下HTMLファイル ----- <body> <div id="wrapper"> <div id="content"> <div id="main"> <p> ・・・・・・ </p> </div> <div id="sidebar"> <p> ・・・・・・・ </p> </div> </div> </div> </body> 上記においてIE6ではメイン(#main)の高さがサイドバー(#sidebar)の高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。※Firefox1.07で試しています。 メイン(#main)やサイドバー(#sidebar)の高さを指定していないためと考えますが、メイン及びサイドバー共に高さを可変にするため固定値を設定したくない場合は、FirefoxでIEのように#contentの背景色(白)を反映するにはどうすればよいのでしょうか。 質問が長くなりましたが、手がかりでもつかめればと思っています。どうぞ宜しくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- css box ieだけ中央寄せ出来ない
サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css"> <!-- body { background-color: #EEEEEE; } .mainbox{ width:900px; height:1000px; padding:6px 6px 2px 2px; border:8px; margin-left: auto; margin-right: auto; text-align:left; background-color:#bde9ba;} body { overflow: hidden; } --> </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？ IE迷惑ですｗ
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 「表示最大幅の高さを確保する」は色々な書籍で拝見していたのですが、 ハックが必要という点で避けておりました。 ご回答の内容が丁寧でとても分かりやすく、質問の問題点もクリアになりそうです。 みなさんがおっしゃる「body(親要素) に対する background で center」の動作（ずれ）も頭に入り、 とても良い勉強になりました。