画面を拡大すると横幅が切れる

Question

aaa
aaaa
aaa

画面を縮小してもきちんと指定通り表示されるのですが、画面を拡大すると横幅が880ピクセルの所で右端が切れてしまいます。縮小画像を添付いたしました。拡大すると一番外の背景に指定した赤い画像が表示されません。　[注意点] 　・#navのwidthは外しません。　・背景は画像です。拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？ご教授願います。

ORUKA1951 · Accepted Answer

まず、わかりやすいように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%幅　でしたら注意・・読みやすいようにタブを全角スペースに置換してあります(以下同様）　　

見出し

・・・・

だけでも良いのです。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を書く事はないように・・・

ORUKA1951 · Answer

デザインのためにHTMLをマークアップしようとするからそうなる。 HTMLをプレゼンテーションの負担から開放するためにスタイルシートはある。・・これ忘れてませんか？もっと重要かつ忘れてならないこと　それを忘れると不必要なリンク先でもないのに不必要なid--こうするとカスケーディングが使えなくてすべて指定しなくてはならない。　やったらめったら

ばっかりになってしまう。HTML5になったらどうするんでしょう。　*{margin:0;padding:0;color:#ffffff;}←こんなことするとブラウザデフォルトのすべてのmargin,paddingを指定しなおさなくてはならない。colorは継承されるプロパティなので全称セレクタではなく親要素に指定すべきです。たとえばbody{color:white;}とか。　・・・・　とかになるはず・・・　　 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 · Answer

＞赤い画像ですが、デザイン上、bodyに設定できません。・・・【中略】・・・＞※理由はbodyには別の背景画像を設定するからです。なら全体を

で囲む。　

　　・・・・　

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 · Answer

やりたいこと一つ一つについて質問してそれをコピーペーストしていたら完成するまでに何年もかかる。そして一つ変えようとしたら何をしたら良いかわからなくなる。　あなたの画像名からはどれが黒くて赤いのかわからないのです。できるだけファイル名から画像が推測できるものにしておくと良いです。　最初の質問の意味がまったく理解できてないのです。ご自身で width:880px; margin:0 auto; /* 上下が0で左右は自動 */ 　と指定しておきながら「画面を拡大すると横幅が880ピクセルの所で右端が切れてしまいます。」と書かれている。これは問題ないということですね。だとしたら次の「拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？」の答えは div.header div.nav{margin:0 auto;width:880px;}/* 詳細度22 */ とかになる。　第三者には「拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？」と言われてもあなたの指定したいことと指定されていることが聖子ヴうしているので？？？？？になる。まず、HTMLの正しい文書構造をお示しください。【例】　

見出し

!-- ナビゲーション --> 　

本文見出し

・・・段落・・・

　その上で、・本文は幅広のウィンドウでは両サイドを空けて最大幅1000pxで表示したい・red_bar_880_10.gif(赤い880px×10pxの画像)を

の背景としてウインドウの幅いっぱいに置きたいとか具体的に誰でもわかるように書いてください。でないと、何度繰り返しても期待のものは得られません。ただ、 ★HTMLは文書構造だけを記述すること--デザインは一切考えない--必要なら回答時に言います。　プレゼンテーションをHTMLから解き放つことがスタイルシートの目的ですから、プレゼンテーションのためにHTMLを書くと失敗する。

画面を拡大すると横幅が切れる

デザインのためにHTMLをマークアップしようとするからそうなる。

＞赤い画像ですが、デザイン上、bodyに設定できません。

この回答への補足

やりたいこと一つ一つについて質問してそれをコピーペーストしていたら完成するまでに何年もかかる。

まず、わかりやすいようにDOMで考えて見ます。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング