ページ全体の中央寄せ

締切済

質問者：maiconcon
質問日時：2011/08/09 02:44
回答数：4件

サイト制作にて、ページ全体を中央寄せにしたいのですが、
firefox 3.0～5(5はwindowsのみ)で、ページがほとんど左寄せになってしまい困っています。
(それ以外のブラウザでは中央寄せになります)
DreamweaverCS5のBrowserLabで確認しています。

背景をブラウザの幅いっぱいに表示させる部分があるため、
ページ全体を囲んでいるdivには幅を指定せず、ヘッダーやコンテンツなどブロックごとのdivに幅を設定し、それぞれ左右のmarginをautoに設定していました。が、それだと中央寄せになりません。

他に下記のような方法も試しましたが、うまくいきませんでした。

・ページ全体のdivにdisplay:inline-blockを設定する。
→全てのブラウザで中央寄せになりましたが、端まで表示させたい背景画像が途中で切れてしまう（inline-blockで自動的に幅が設定されたからでしょうか）

・ページ全体のdivにinline-blockを設定し、さらにwidth:100%を設定する。
→Mac版firefoxの5.0.1やSafari、IEでは背景画像が端まで表示されるが、文頭にあげたfirefox3～5(win)では左のほうへ寄ってしまいました。

htmlの確認などもしたものの、単純ミスなどかもしれないのですが。。
初心者のため、どんな基本的なことでも、ヒントをいただけたら嬉しいです。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： ORUKA1951
回答日時：2011/08/09 14:09

忘れてた、中央寄せなら

div>div{width:80%;min-width:450px;max-width:1000px;margin:0 auto;}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　^^^^^^^^^^^^^^^^^^^
だけでよい。(CSS2.1の書き方、古いIEなどに対応させ場合は、違う書き方になる。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2011/08/09 14:07

＞ページ全体を囲んでいるdivには幅を指定せず、ヘッダーやコンテンツなどブロックごとのdivに幅を設定し、

　その時点で、とんでもない誤りを犯しています。

　「HTMLをデザインのためのもの」と誤解しています。HTML(Hyper Text Markup Lunguage)は文書の構造をマークアップするものです。そしてCSSでデザインしていきますが、デザインをそのようにしたいということは、必ず文書構造に由来するもののはずですね。

具体的な例で説明すると
<body>
　<div class="header">
　　<h1>タイトル</p>
　　<p>ここにページ全体のヘッダ情報が入る</p>
　</div>
　<div class="section">
　　<h2>記事のタイトル。</h2>
　　<p>本文の記事</p>
　　<p>記事</p>
　　<div class="nav content_Index">
　　　<ol>目次</ol>
　　</div>
　　<div class="aside">
　　　<p>脚注とか</p>
　　</div>
　</div>
　<div class="footer">
　　<p>文書情報とか</p>
　　<div class="nav siteMap">
　　</div>
　</div>
</body>
　というHTMLを書きます。ここで、header,section,aside,nav,footerはHTML5では、そのまま要素名となる予定です。そのため、
<body>
　<header>
　　<h1>タイトル</p>
　　<p>ここにページ全体のヘッダ情報が入る</p>
　</header>
　<section>
　　<h2>記事のタイトル。</h2>
　　<p>本文の記事</p>
　　<p>記事</p>
　　<nav class="content_Index">
　　　<ol>目次</ol>
　　</nav>
・・・
とかになることが、よい参考になるでしょう。

　その上で、背景画像を全体に、内容を中心にディスプレイの80%で、かつ最小で450px;最大で1000pxにしたければ
html,body{margin:0;padding:0;}
body{background:*******;}
div>div{width:80%;min-width:450px;max-width:1000px;}
だけでよい。(CSS2.1の書き方、古いIEなどに対応させ場合は、違う書き方になる。

　さらに、目次を右に書きたければ
div.section{position:relative;}
div.section div.index{width:20%;position:absolute:left:0;top:0;}
とするとか。
　いや３分割だ。いや分割しないで目次はトップに横にしよう。脚注は左にとか、サイトマップだけは一番上にとか、フレームのように右側に固定しようとか・・好きなようにデザインすればよい。
　自由に出津印できるためには、HTMLが特定のデザインにこだわらず、文書構造にしたがって正しくマークアップされていなければならない。

　一度、まったくデザインなしで、HTMLを文書構造にしたがって正しくマークアップすることを復習してください。デザインによって必要に応じて要素を追加する必要がある場合もありますが、そのときも何らかの正統な文書構造があるはずです。

- 0
- 件

通報する

この回答へのお礼

ご回答とソースありがとうございました。
色々確認した結果、中央寄せになっていないのではなく、
ブラウザを縮めた際に横スクロールすると背景が切れてしまっており、それが原因だったようです。解決しました。
ブロックごとのdivは意味付けの為にグルーピングしたつもりでしたが、不要なdivも作ってしまっているかもしれないです。見直そうと思います。
ありがとうございました。

通報する

お礼日時：2011/08/10 10:58

No.2

回答者： DrFell
回答日時：2011/08/09 07:47

＞背景をブラウザの幅いっぱいに表示させる部分があるため、

ページ全体を囲んでいるdivには幅を指定せず、ヘッダーやコンテンツなどブロックごとのdivに幅を設定し、それぞれ左右のmarginをautoに設定していました。が、それだと中央寄せになりません。

bodyに背景を指定してはいかがですか？ブロック要素は幅を指定しないと「親要素いっぱいに幅をとります」。100％の表示域に100％のブロックが入れば、中央に既になっています。marginの余地はありません。今の場合、親要素はbodyですので、どちらかによる余地がありません。

初心者がまずつまづくのは、
1.ｈｔｍｌとｃｓｓの関係
2.インライン要素とブロックレベル要素の挙動の未把握
3.なんにでもdivをつけてしまう過重包装（div病）

1.はｈｔｍｌが構造がきちっと文章構造を正しく記述できていれば、ｃｓｓはそれにデザインを加えるだけ。改めてdivを付け加える必要はない。
2.幅や高さを持てないなど、いろいろ制約があるインライン要素と、箱になっているブロックレベル要素の挙動の違いを把握していない。
3.1.と重なりますが、デザインの為に、divをつけてしまう。1プロパティごとにdivをたしていく人もおられます。

デザインはおまけ、htmlが主。デザインをきり変えたいなら、理由がある筈。それは文章構造（html）に含まれるはずのものです。その構造を利用しながらｃｓｓをつけて行きましょう。ｃｓｓのためにhtmlをいじるのはよくありません。ここのところの概念はすごく大切です。

教科書を一から学ばれることをお勧めします。最初にチップス的なものを学び、できたつもりになっていると、早晩破綻します。というか、もう既に破綻しています。概念でデザインは出来ませんが、概念の把握が肝心です。そういう概念がしっかり記述されている教科書をまずは、選んでください。