- ベストアンサー
CSSでの背景画像の設定について
CSSでの背景画像の設定について質問です。 参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ 解決策を教えて頂ければ幸いです。よろしくお願い致します。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- abril
- ベストアンサー率69% (388/560)
No.2/4です。 No.4での修正点に関する補足説明です。長くなりますがご容赦下さい。 【HTML】 ＜オリジナル【A】＞ <div id="language"> <ul> <a href="#"><li>English</li></a> <a href="#"><li>Français</li></a> </ul> <!--end of language--></div> ＜修正点＞ 【A1】：ulの直接の子要素はliのみ、aは子要素に持てるのはインライン要素のみ、なので<li><a href="#">～</a></li>に構造変更。 【A2】：languageのコンテナの要素が現在のもの（言語のメニューリスト）だけなのであれば、divで入れ子にする必要はなく、ulに直接id属性でlanguageを指定して、CSSでスタイルを整える。 ＜オリジナル【B】＞ <div id="top-title" class="clearfix"> <h1>le village artisanal de Den den</h1> <!--end of top-title--></div> ＜修正点＞ 【B1】：CSS内にclearfixのclassの記述がないが、おそらくclearfixの使いどころを勘違いしている様に思われる。”le village artisanal de Den den”というタイトルがlanguageのリストの下に来るレイアウトで良いのであれば、ここでclearfixを使う必要はなく、clearプロパティを適用するのが適切。 【B2】：こちらも【A2】と同様の理屈で、h1自身にid属性で必要なスタイルを適用すれば良いので、divで入れ子にする必要がない。 ＜オリジナル【C】＞ <div id="top-navi"> <ul> <a href="#"><li>TOP</li></a> （省略） <div class="top-navi-last"><a href="#"><li>ACCESS</li></a></div> </ul> <!--end of top-navi--></div> ＜修正点＞ 【C1】：【A1】と同様。 【C2】：【A2】と同様。 【C3】：<div class="top-navi-last"><a href="#"><li>ACCESS</li></a></div>は構造が文法的に間違い。最後のリストアイテムだけ違うスタイルを与えたいなら、liに直接class属性（この場合、各ナビはユニークな存在なのでどちらかと言えばid属性の方が適切な様に思えますが、間違いではないのでとりあえずclass属性のままにしておきます）してスタイルを適用すればすむ。 ＜オリジナル【D】＞ <div id="contents-left"> <h4>New Information</h4> <!--end of conctents-left--></div> ＜修正点＞ 【D1】：【B2】と同様。 【D2】：h1の次にh2、h3がなくいきなりh4が来るのは文書構造が適切ではない。h2にしてスタイルを調整するのが望ましい。 ＜オリジナル【E】＞ <div id="contents-right"> <dt>15.07.2009</dt> <dd>Commercial period</dd> （省略） <!--end of conctents-right--></div> ＜修正点＞ 【E1】：dt、ddはdlの子要素なのでdivを直接の親には持てない。divをそのままdlに置き換えてスタイルを調整する。 ＜オリジナル【F】＞ <div id="footer-bg"> <div id="footer"> <ul> <a href="#"><li>TOP</li></a> （省略） </ul> <!--end of footer--></div> <!--end of footer-bg--></div> ＜修正点＞ 【F1】：【A1】【C1】と同様 【F2】：【A2】【C2】と同様 【CSS】 【1】 /*clearfix*/ （省略） 【1-1】：オリジナルのCSSに無かったので付け足しましたが、オリジナルの方のclearfixをそのまま適用してもかまいません。 【2】 /*background-layout*/ body { margin: 0;【2-1】 padding: 0;【2-2】 background: url(../img/background_01.jpg) repeat-x #f6f2eb;【2-3】 } 【2-1】：不要でしたら削除を。 【2-2】：同上 【2-3】：一括指定できるプロパティはまとめた方が記述がすっきりします。 【3】 ul#language {【3-1】 float: right;【3-2】 height: 25px;【3-3】 list-style: none;【3-3】 margin: 0;【3-3】 padding: 0;【3-3】 font-size: 14px;【3-3】 color: #F6F2EB;【3-3】 } ul#language li {【3-4】 float: left;【3-5】 width: 70px; margin: 0; padding: 0 0 0 15px;【3-6】 background: url(../img/arrow_15.jpg) left top no-repeat;【3-7】 } 【3-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。languageというidセレクタを他の要素（タグ）にも使用しないのであれば単に”#language”というセレクタでもかまいません。 【3-2】：リスト全体を右寄せにします。 【3-3】：リストのスタイルを指定（子要素が継承するプロパティは親要素の方にまとめて指定）。 【3-4】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。 【3-5】：オリジナルの"float: right;"だと、マークアップの順番（English→Français）とは逆に表示（Français→English）されますので、leftに変更。 【3-6】：余白が左のみ15px残りは0なら、まとめて指定（オリジナルでは"padding-left:"の指定が5px、15pxと重複してました）。 【3-7】：【2-3】と同様。 【4】 h1#top-title {【4-1】 margin: 0; clear: both;【4-2】 } 【4-1】：h1のスタイルが記述されていなかったので、とりあえず想像の範囲で追加しました。任意でスタイルを調整して下さい。 【4-2】：先行する要素ul#languageがfloatしているので、ここで解除します。 【5】 ul#top-navi {【5-1】 height: 44px;【5-2】 list-style: none;【5-2】 margin: 0; padding: 0; font-size: 14px;【5-2】 color: #3a3734;【5-2】 line-height: 3.1em;【5-2】 } ul#top-navi li {【5-3】 float: left; width: 155px; margin: 0;【5-4】 padding: 0;【5-4】 text-align:center; border-left: 1px solid #3A3734;【5-5】【5-6】 } ul#top-navi li.top-navi-last {【5-7】 width: 158px;【5-8】 border-right: 1px solid #3A3734;【5-9】 } 【5-1】：【3-1】と同様。 【5-2】：【3-3】と同様。 【5-3】：【3-4】と同様。 【5-4】：余白を0に初期化。 【5-5】：【2-3】と同様。 【5-6】：オリジナルではborder-leftの太さを"thin"という「キーワード」で値で設定していましたが、キーワード指定の場合、キーワードが対応する数値の解釈は、UA（ブラウザ）の設定に依存します。例えば、IEでは"thin"は2pxになっていますが、Firefox等では1pxと解釈されて表示される様です。ボーダーの太さは幅の計算に影響を及ぼすので、本件の様に、各リストアイテムの長さを決め打ちしないとレイアウトが崩れる様な箇所でのキーワードによる指定は（UAにより同一の結果が得られない為）不向きです。従って、ここではリストアイテム（li）の幅の指定が"width: 155px;"となっている事からborder-leftの太さは1pxでないとリスト全体の幅（親要素<div id="top-menu">～</div>に指定された"width: 940px;"）を超えてしまいますので、絶対値で指定しています。 ※リストアイテムのスタイル（ul#top-navi li {～}）に基づくアイテムの合計の幅の計算方法 アイテムの幅（"width: 155px;"）×6＋左ボーダーの太さ（"border-left: 1px;"）×7＝937px 【5-7】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。【5-3】で指定済みの共通のプロパティは継承されますので省略します。 【5-8】：【5-6】での計算では、リストアイテムの合計幅が937pxですから、親要素<div id="top-menu">～</div>の幅一杯になるにはあと3px足りません。その残りの分をこの最後のアイテムの幅に足して計算を合わせます。 【5-9】：【2-3】と同様。 【6】 #contens-wrapper {【6-1】 clear: both; background: url(../img/bg-graduant_03.jpg) left bottom repeat-x;【6-2】 } 【6-1】：widthとheightの初期値はautoですからこの場合は指定不要です。 【6-2】：【2-3】と同様。 【7】 #contents {【7-1】 width: 942px; margin: 0 auto; background: url(../img/content-frame_14.jpg) repeat-y;【7-2】 } 【7-1】：heightの初期値はautoですからこの場合は指定不要です。 【7-2】：【2-3】と同様。 【8】 #contents h2 {【8-1】 font-size: 18px; color: #3A3734; margin: 20px; padding-left: 10px; border-left: solid 7px #3A3734;【8-2】【8-3】 } 【8-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。 【8-2】：【2-3】と同様。 【8-3】：【5-6】と同様で、h2のレイアウト枠全体の幅が200pxでないとレイアウトが崩れますから、borderの太さも数値にする必要があります。見た目でだいたい7pxぐらいだったので置き換えました。 【9】 h2#contents-left {【9-1】 float: left; width: 173px;【9-2】 margin: 0;【9-3】 padding: 10px; } 【9-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。 【9-2】：【8-3】でborder-leftの太さを7pxとしたので、200px（h2のレイアウト枠全体の幅）－10px×2（左右padding）－7px（border-leftの太さ）＝173pxとなります。 【9-3】：【8-1】のスタイルが継承されているので異なる部分を上書きします。 【10】 dl#contents-right {【10-1】 float: right; width: 722px;【10-2】 margin: 0;【10-3】 padding: 10px; } 【10-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。 【10-2】：このコンテナブロックの幅の計算を合わせます。親要素<div id="contents">～</div>の幅が942px;、右カラムの<h2 id="contents-left">～</h2>のレイアウト枠全体の幅が200pxですので、このコンテナブロックのレイアウト枠全体の幅は942px－200px＝742pxでなければなりません。オリジナルでは742pxがそのままwidthプロパティの値になっていますが、"padding: 10px;"も同時に指定されているので、左右パディングの分（10px×2）を更に引いた値がwidthの値となります。 【10-3】：dlにはディフォルトで余白があるので0に初期化。 【11】 #footer-bg {【11-1】 width: 100%; background: url(../img/background_23.jpg) repeat-x;【11-2】 } 【11-1】：【7-1】と同様（オリジナルでは"height:"の指定が100%、autoと重複してました）。 【11-2】：【2-3】と同様。 【12】 ul#footer {【12-1】 width: 940px; list-style: none;【12-2】 margin: 0 auto; padding: 0; color: #333333;【12-2】 } ul#footer li {【12-3】 float: left; margin: 0 1em 0 0;【12-4】 padding: 0; } 【12-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。 【12-2】：【3-3】と同様 【12-3】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。 【12-4】：横並びになったリストアイテムどうしに余白を入れました。
お礼
詳しいご回答ありがとうございます。詳しく書いて頂いたので、非常に分かりやすかったです。今まで自分のHTML,CSSを人に見て頂いたことがなかったので、いろいろと勉強になりました。 最初にレイアウトが崩れていたのも、いろんな間違いの積み重ねだったのですね。正しい文法で書く大切さを痛感しました。これからいろいろと勉強していこうと思います。 本当に丁寧なご回答ありがとうございました。
とりあえずＣＳＳです。 #top-menu { background: #FFCC00; margin: 0px auto; padding: 0px; clear: both; width: 800px; } #top-menu #language { clear: both; float: right; width: 300px; } #top-menu #language li { float: right; margin-right: 20px; } #top-menu #top-title { background: #FF6600; clear: both; padding: 15px; } #top-menu #top-navi { margin: 0px; padding: 0px; clear: both; width: 800px; } #top-menu #top-navi li { margin: 0px; padding: 0px 10px; float: left; width: 105px; list-style: none; } #contens-wrapper { margin: 0px auto; padding: 10px; clear: both; width: 780px; background: #FFFFCC; } #footer-bg { margin: 0px auto; clear: both; width: 800px; background: #FFCC00; } #footer-bg #footer { margin: 0px; padding: 10px; } #footer-bg #footer li { float: left; margin-right: 20px; } HTMLチェックは、サーバーにＵＰしないとできませんが。。 http://validator.w3.org/ 間違いはリストの中だけのようです。
補足
CSSありがとうございます。 ご回答いただいたCSSで背景色がどうなるかを見てみたのですが、画面いっぱいに広がるような背景には見えませんでした。私の質問が説明不足だったと思います。例えば、top-menuのbackground color#FFCC00や、#top-menu #top-titleのbackground: #FF6600が画面左右いっぱいに広がるような表示にしたいのですが、そのためにはどうすればよろしいでしょうか？（説明が下手で申し訳ありません、分かりますでしょうか？） ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 先ほどの補足でHTML部分のみ補足し、CSS部分を補足できていなかったので、CSS分も補足させて頂きます。（おそらく間違いだらけで、見て頂くのも恐縮なのですが。。） /*background-layout*/ body{ background-image:url(../img/background_01.jpg); background-repeat:repeat-x; background-color:#f6f2eb; } /*top-menu layout*/ #top-menu{ width:940px; height:152px; margin:0 auto; } #language { width:940px; height:25px; } #top-menu #language li{ width:70px; height:25px; list-style:none; padding-left:5px; margin:0; float:right; font-size:14px; padding-left:15px; background-image: url(../img/arrow_15.jpg); background-repeat: no-repeat; background-position: left; color: #F6F2EB; } #top-navi li{ height:44px; list-style:none; width:155px; float:left; font-size:14px; text-align:center; color:#3a3734; border-left-width: thin; border-left-style: solid; border-left-color: #3A3734; line-height:3.1em; } .top-navi-last li{ height:44px; list-style:none; width:155px; float:left; font-size:14px; text-align:center; color:#3a3734; border-left-width: thin; border-left-style: solid; border-left-color: #3A3734; border-right-width: thin; border-right-style: solid; border-right-color: #3A3734; } #top-movie-bg{ background:#020900; } #top-movie{ width:940px; margin:0 auto; } #contens-wrapper{ clear:both; width:auto; height:auto; background-image:url(../img/bg-graduant_03.jpg); background-position:bottom; background-repeat:repeat-x; } #contents{ width:942px; height:auto; margin:0px auto; background-image:url(../img/content-frame_14.jpg); background-repeat:repeat-y; } #contents-left{ width:200px; padding:10px; float:left; } #contents-right{ width:742px; padding:10px; float:left; } #contents h4{ font-size:18px; color:#3A3734; border-left-style:solid; border-left-width:thick; border-left-color:#3A3734; margin:20px; padding-left:10px; } #footer-bg{ width:100%; height:100%; background-image:url(../img/background_23.jpg); background-repeat:repeat-x; height:auto; } #footer{ width:940px; margin:0 auto; } #footer li{ list-style:none; float:left; color:#333333; }
- abril
- ベストアンサー率69% (388/560)
補足のHTMLのソースがコピペのミスでないなら、マークアップに致命的な間違いが沢山ありますね… この状態で「思ったような表示が出来ていた」としても、それは間違いの重なった結果でたまたま質問者様の環境では上手くできている様に見えただけですので、環境が違ったり、レイアウトに変更を加えた時点でその状態は維持できなくなり、それで数々の不具合が発生している事も有り得ます。 なので、 > floatを使うまでは、思ったような表示が出来ていたのですが、 > floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 > clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ floatが引き金になって、「実は正しい構造になっていなかった」HTMLの表示結果が崩れ始めた、という事なのかも知れません。 依って、これらの不具合を解消するにはまずマークアップを正しい状態に修正する事から始めた方が宜しいです。 じゃないと、正しくない土台の上に、どんどん上塗りをして行く状態になりますので、収集がつかなくなります。 CSSを云々する前に、現在のコンテンツををHTMLの文法チェッカーにかけてみる事をお奨めします。 ぱっと見ただけでも、 <a href="#"><li>English</li></a> →aの子要素にliは持てない。 <ul> （省略） <div class="top-navi-last"><a href="#"><li>ACCESS</li></a></div> </ul> →ulの直接の子要素にできるのはliのみ、divがこの様な形で入ることは許されない。 <div id="contents-right"> <dt>15.07.2009</dt> <dd>Commercial period</dd> （省略） </div> →dt、ddはdl以外を直接の親要素には持てない。 …という有り得ないマークアップになっています。
お礼
ご回答ありがとうございます。 HTMLもCSSも初心者なもので、CSS以前に根本的な間違いがたくさんあるのですね、ご指摘ありがとうございます。HTMLからまず見直します。 どうもありがとうございました。
- reggaepunc
- ベストアンサー率59% (64/108)
htmlとcssソースをそのまま提示していただくのが、 解決の早道だと思います。 上記の指示だと、 問題がどこにあるのかがわかりません。。
補足
ご指摘ありがとうございます。 非常に長くなってしまうのですが、HTMLとCSSソースを載せさせて頂きます。よろしくお願い致します。 制限文字数を超えてしまうので、CSSは別途掲載します。 ***以下、HTML*** <body> <div id="top-menu"> <div id="language"> <ul> <a href="#"><li>English</li></a> <a href="#"><li>Français</li></a> </ul> <!--end of language--></div> <div id="top-title" class="clearfix"> <h1>le village artisanal de Den den</h1> <!--end of top-title--></div> <div id="top-navi"> <ul> <a href="#"><li>TOP</li></a> <a href="#"><li>CONCEPT</li></a> <a href="#"><li>ARTISANA INDEX</li></a> <a href="#"><li>STORE MAP</li></a> <a href="#"><li>NEW INFO</li></a> <div class="top-navi-last"><a href="#"><li>ACCESS</li></a></div> </ul> <!--end of top-navi--></div> <!--end of top-menu--></div> <div id="top-movie-bg"> <div id="top-movie"> <script type="text/javascript"> new fadeshow(fadeimages, 940, 460, 0, 940, 1, "R") </script> <!--end of top-movie--></div> <!--end of top-movie-bg--></div> <div id="contens-wrapper"> <div id="contents" class="clearfix"> <div id="contents-left"> <h4>New Information</h4> <!--end of conctents-left--></div> <div id="contents-right"> <dt>15.07.2009</dt> <dd>Commercial period</dd> <dt>15.07.2009</dt> <dd>Commercial period</dd> <!--end of conctents-right--></div> <!--end of conctents--></div> <!--end of conctents-wrapper--></div> <div id="footer-bg"> <div id="footer"> <ul> <a href="#"><li>TOP</li></a> <a href="#"><li>CONCEPT</li></a> <a href="#"><li>INDEX</li></a> <a href="#"><li>STORE MAP</li></a> <a href="#"><li>NEW INFO</li></a> </ul> <!--end of footer--></div> <!--end of footer-bg--></div> </body>
補足
ご回答ありがとうございます。 ご回答頂いたhtml,cssで確認してみました。意図した通りのレイアウトになっています！感動です！ 本当にありがとうございます。 どこがどう変わったことで、不具合が修正されたのか知りたいので、お時間のあるときで結構ですので、補足頂ければ幸いです。