- ベストアンサー
画面を拡大すると横幅が切れる
- 画面を拡大すると、横幅が880ピクセルの所で右端が切れてしまいます。
- 縮小画像を添付いたしました。拡大すると一番外の背景に指定した赤い画像が表示されません。
- 拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
まず、わかりやすいようにDOMで考えて見ます。firefoxをお使いならデフォルトでインストールしていればDOM Inspectorが入っていますので、[ツール]→[Dom Inspector]を起動します。 すると body div section div header h1 #TEXT div section などと見えるはずです。幅やborderは継承されないプロパティですが、親となるブロックの内寸を基準にしますから、 div.sectionで880pxにしていると、その下位にあるdiv.headerは100%といわれると880pxのdiv.sectionのborder辺の内側いっぱいの幅を取ります。 しかし、 div.header{/* 詳細度11 */ background:url(img/black.gif) no-repeat top center; width:880px;margin:0 auto; } div.section{/* 詳細度1 */ background:url(img/red.gif) repeat-x 0 0; width:100%; } というCSSの場合、あなたの下の現象にはなりません。逆ではないですか？ ＞現在、上記コーディングでは、通常時・縮小時はウィンドウの幅いっぱいに 表示されるのですが、？？？？何が？？？？ ＞画面を拡大した時、sectionの背景画像が右端で切れて真っ白になってしまいます。 ということは起きないはずです。 div.section>div.sectionは880pxになりますけど・・ ＞その際、headerの背景に設定した「black.gif」は逆にウィンドウの幅いっぱいに表示されています。 これもおかしい。width800pxと指定しているので880pxより広くならない。 ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )でCSSをチェックすると記述間違いが指摘されるかも・・ 書かれているCSSとHTMLだと、あなたが言われる形にはならないはずです。もう一度HTMLとCSSを見直してください。 ちょっとだけテクニックを・・ HTMLが出来上がったら、CSSに div{border:solid 1px blue;} div.section{border-color:red;} div.section{border-color:green;} div.section div.section{border:color:purple;} とか指定して、配置を見てみると良いです。 ＞sectionにposition:fixを設定すると、拡大しても「red.gif」もウィンドウの ＞幅いっぱに表示されるようになるのですが、 fixやabsoluteは使いにくいので極力使わないほうが良いでしょう。 ★背景を前面黒 画像のみ中心に880px; 内容も中心部860px程度 ★ヘッダー部分も100%幅 でしたら 注意・・読みやすいようにタブを全角スペースに置換してあります(以下同様） <body> <div class="header"> <h1>見出し</h1> <p>文章</p> </div> <div class="section"> <h2>見出し</h2> <p>・・・・</p> </div> </body> だけでも良いのです。h1もpもブロックですから実質divと同じですよ!! ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ この場合、 body{ background:url(img/black.gif) no-repeat top center; } div.header{ background:url(img/red.gif) repeat-x 0 0;width:100%; padding-top:4px; /* 赤画像をh1と重ねたくない場合は画像高さ */ } div.header h1,div.header p,div.section{ width:860px;margin:0 auto; } で背景は黒、背景画像は中心に画像の幅 red.gifも画面いっぱい しかし、div.header h1とdiv.header p、div.sectionは860px幅で表示される。 ★不必要にdivを書く事はないように・・・
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
やりたいこと一つ一つについて質問してそれをコピーペーストしていたら完成するまでに何年もかかる。そして一つ変えようとしたら何をしたら良いかわからなくなる。 あなたの画像名からはどれが黒くて赤いのかわからないのです。できるだけファイル名から画像が推測できるものにしておくと良いです。 最初の質問の意味がまったく理解できてないのです。ご自身で width:880px; margin:0 auto; /* 上下が0で左右は自動 */ と指定しておきながら「画面を拡大すると横幅が880ピクセルの所で右端が切れてしまいます。」と書かれている。これは問題ないということですね。だとしたら次の「拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？」の答えは div.header div.nav{margin:0 auto;width:880px;}/* 詳細度22 */ とかになる。 第三者には「拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？」と言われてもあなたの指定したいことと指定されていることが聖子ヴうしているので？？？？？になる。 まず、HTMLの正しい文書構造をお示しください。 【例】 <body> <div class="header"><!-- ヘッダー部分 --> <h1>見出し</h1> <div class="nav">!-- ナビゲーション --> </div> <div class="section"> <h2>本文見出し</h2> <p>・・・段落・・・</p> </div> <div class="footer"> <h2>文書情報(フッター見出し)</h2> </div> </body> その上で、 ・本文は幅広のウィンドウでは両サイドを空けて最大幅1000pxで表示したい ・red_bar_880_10.gif(赤い880px×10pxの画像)を<h1>の背景としてウインドウの幅いっぱいに置きたい とか具体的に誰でもわかるように書いてください。 でないと、何度繰り返しても期待のものは得られません。 ただ、 ★HTMLは文書構造だけを記述すること--デザインは一切考えない--必要なら回答時に言います。 プレゼンテーションをHTMLから解き放つことがスタイルシートの目的ですから、プレゼンテーションのためにHTMLを書くと失敗する。
お礼
ORUKA1951さん ご返答ありがとうございます。 上記確認いたしました、 順序が悪く申し訳ありません。 一度話を整理いたします。 ------------------------------ ◆html <body> <div class="section"> <div class="header"> <h1>見出し</h1> </div> </div> </body> ◆css body,htm{margin:0;padding:0}/* 詳細度1 */ div.header{background:url(img/black.gif) no-repeat top center;width:880px;margin:0 auto;}/* 詳細度11 */ div.header h1{ color:#ffffff;margin:0;} div.section{background:url(img/red.gif) repeat-x 0 0;width:100%;}/* 詳細度1 */ sectionの背景に設定した「red.gif」をheaderの背景としてウィンドウの幅いっぱいに置きたいです。 現在、上記コーディングでは、通常時・縮小時はウィンドウの幅いっぱいに表示されるのですが、 画面を拡大した時、sectionの背景画像が右端で切れて真っ白になってしまいます。 その際、headerの背景に設定した「black.gif」は逆にウィンドウの幅いっぱいに表示されています。 headerにはwidth:880pxを設定しているのでそのせいだと思いますが。 sectionにposition:fixを設定すると、拡大しても「red.gif」もウィンドウの幅いっぱに表示されるようになるのですが、他の文字などと被さってしまう恐れがあるため得策ではありません。 または、sectionの背景をflashで表示させてしまい、headerの背景をpositionでその上に置くという方法もありますが、できればflashなしで解決したく思います。 以上、長々と申し訳ありませんでした。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞赤い画像ですが、デザイン上、bodyに設定できません。 ・・・【中略】・・・ ＞※理由はbodyには別の背景画像を設定するからです。 なら全体を<div class="section">で囲む。 <body> <div class="section"> <div class="header"> <h1>見出し</h1> <div class="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> </div> ・・・・ </div><!-- body>div.section//end --> body,htm{margin:0;padding:0}/* 詳細度1 */ body{ div.header{background:url(img/nav_bg.gif) no-repeat top center;}/* 詳細度11 */ div.header div.nav{margin:0 auto;width:880px;}/* 詳細度22 */ div.header div.nav ul li{display:block;list-style:none;・・・}/* 詳細度24 */ div.section{background:url(img/nav_area.gif) repeat-x 0 0;}/* 詳細度1 */ div.section div.section{margin:0;background-image:none;} ひとつのbody内に複数の同じsectionが登場しても継承される。 HTMLはプレゼンテーションと切り離すと、先でメンテナンスのときCSSを見るだけで修正できる。いちいち一意セレクタで指定していたらたまりません。 HTMLを書くときはプレゼンテーションは一切考えないこと。CSSを書く段になってどうしても必要ならそのときに、今回のようにHTMLをちょっと手を加える。 プレゼンテーションとHTMLを切り分けることこそ、スタイルシートの最大の目的なのですから、プレゼンテーションにHTMLのマークアップを縛られていたらスタイルシートを使う意味がないです。
お礼
ORUKA1951さん ご返事ありがとうございます。 画面を拡大すると、「nav_area.gif」が途中で途切れてしまいます。 ◆画面通常 ---------------------- （赤） ※画面いっぱい ---------------- （黒） ※画面いっぱい ◆画面縮小 ---------------------- （赤） ※画面いっぱい ---------- （黒） ※画面いっぱい ◆画面拡大 ----------- （赤） ※画面右側が途切れて残りは真っ白 ----------- （黒） ※画面右側が途切れて残りは真っ白 拡大時は画像の右側が途中で切れてしまい、残りが真っ白になってしまいます。 これを拡大しても途切れないよう、画面いっぱいに表示できるようになればと思います。
補足
失礼しました。 上記の、画面通常時と縮小時の（黒）はいっぱいではありません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
デザインのためにHTMLをマークアップしようとするからそうなる。 HTMLをプレゼンテーションの負担から開放するためにスタイルシートはある。・・これ忘れてませんか？もっと重要かつ忘れてならないこと それを忘れると不必要なリンク先でもないのに不必要なid--こうするとカスケーディングが使えなくてすべて指定しなくてはならない。 やったらめったら<div>ばっかりになってしまう。HTML5になったらどうするんでしょう。 *{margin:0;padding:0;color:#ffffff;}←こんなことするとブラウザデフォルトのすべてのmargin,paddingを指定しなおさなくてはならない。colorは継承されるプロパティなので全称セレクタではなく親要素に指定すべきです。たとえばbody{color:white;}とか。 <body> <div class="header"> <h1>見出し</h1> <div class="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> </div> ・・・・ とかになるはず・・・ body,htm{margin:0;padding:0}/* 詳細度1 */ body{background:url(img/nav_area.gif) repeat-x 0 0;}/* 詳細度1 */ div.header{background:url(img/nav_bg.gif) no-repeat top center;}/* 詳細度11 */ div.header div.nav{margin:0 auto;width:880px;}/* 詳細度22 */ div.header div.nav ul li{display:block;list-style:none;・・・}/* 詳細度24 */ とか、詳細度が高いと同じ要素であっても優先されますし、先で同じ要素が登場しても詳細度を上げればそこだけ上書きできる。id(一意セレクタ)のように詳細度を高くしすぎるとそれもままならず、いちいち設定しなきゃならない。
お礼
ORUKA1951さん ご教授ありがとうございます。 赤い画像ですが、デザイン上、bodyに設定できません。 上記に記したのは、全てコードの一部のサンプルです。 たしかにbodyに赤い画像を設定すると縮小しても画像が途中で切れることがなくなるのですが、 あくまでもbody以外に設定しなければなりません。 ※理由はbodyには別の背景画像を設定するからです。
お礼
ORUKA1951さん ご返事ありがとうございます。 >div.header{/* 詳細度11 */ > background:url(img/black.gif) no-repeat top center; > width:880px;margin:0 auto; >} >div.section{/* 詳細度1 */ > background:url(img/red.gif) repeat-x 0 0; > width:100%; >} >というCSSの場合、あなたの下の現象にはなりません。逆では>ないですか？ 逆ではなく上記の通りです。 W3C的にも問題ないようでした。 ただ、 >body{ > background:url(img/black.gif) no-repeat top center; >} >div.header{ > background:url(img/red.gif) repeat-x 0 0;width:100%; > padding-top:4px; /* 赤画像をh1と重ねたくない場合は画>像高さ */ >} >div.header h1,div.header p,div.section{ > width:860px;margin:0 auto; >} 上記でわかったことですが、 bodyの背景に置いた画像は画面をズームしても、縮小しても、 いつでもウィンドウの幅いっぱに表示されるということでした。 これらをふまえて、横幅いっぱいに表示したいものをbodyに置くことで解決しようと思います。 ためになることを教えていただきありがとうございました。