ベストアンサー

センターに表示をしたいのですが

2009/04/02 16:45

ホームページビルダーでサイトを作成しています。最近スタイルシートを勉強しています。以前ページをセンターにするときは <div align="center"> コンテンツ </div> このようにしていました。できればスタイルシーと使いたいのですがセンターに来てくれません。いまは <head> #content{ width : 760px; margin-left : auto; margin-right : auto; </head> <body> <div id="content"> コンテンツ </div> このようなソースを試したのですが、どこか間違っているのでしょうか。アドバイスをよろしくお願いします。

y-w-
お礼率79% (59/74)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

hamue
ベストアンサー率33% (2/6)

2009/04/03 11:09 回答No.3

hamueです。 >bodyのtext-alignをcenterに、div#content側でtext-alignをleftにすること（センタリングされたテキストを左寄せにする）をオススメし>ます。 >この方法を試すと、うまくいったのですが、idをいくつか埋め込んでいるので正直テキストをすべて左寄せにするのは面倒ではあります。 ------------------ 確かHTML 4.01 Transitionalで文書型宣言をした場合、IEではmarginを使用した中央揃えができません。そのため、body要素でtext-alignをcenterにしてボックスを中央に揃えることでどちらの環境にも対応できる、といったものです。しかし、コレだけではtext-align:centerがbody以下の全てのテキストにも反映されてしまいます。一般的に使われる手法としては、body以下の全ての要素を<div>で囲み、containerなどのIDを付ける、というものです。つまり ■html側 <body> <div id="container"> <div id="content"> コンテンツ </div> </div> </body> ■CSS側 body { text-align: center; //IE用中央揃え margin: 0; //window周りにできる余白を消す padding: 0; } div#container { //全てを囲む width: 760px; text-align: left; margin: 0 auto; } div#content { // 任意のスタイル } ------------------ これでボックスを中央揃えにしつつ、div#container配下のテキストは左寄せになります。その他デフォルトの設定（フォントサイズ、行間、カラーなど）は全てここで設定しておけば無駄なスタイルを省略できます。参考になりましたでしょうか？

質問者

お礼 2009/04/07 17:55

返事が遅くなりました。スミマセンいろいろ試してみたのですが、この方法が確実のようです。アドバイスありがとうございました。

その他の回答 (2)

tokoro10_2004
ベストアンサー率22% (10/45)

2009/04/03 08:06 回答No.2

HPBのデフォルト設定で吐き出されるDOCTYPE宣言ではIEが互換モードで動作し、margin:autoではセンタリングされません。 DOCTYPE宣言の設定を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> にするとIEが標準モードで動作します。確か、オプション設定の中にあったと思います。ただし、IE5.5以前ではだめです。また、互換モードと標準モードのIEの挙動はかなり違うので、シビアなレイアウトをされているなら全部チェックしなおさないといけないかもしれません。

質問者

お礼 2009/04/07 17:54

返事が遅くなりました。 IE5.5以前の関連でDOCTYPEの宣言を考慮しなければいけませんね。勉強勉強の日々です。ありがとうございました。

hamue
ベストアンサー率33% (2/6)

2009/04/02 17:51 回答No.1

<head>タグ内に記述するには<style>タグで囲まないと定義されません。それと記述漏れかもしれませんが#contentの{}が閉じられていません。 ---------------------------------------------- <style type="text/css">  </style> </head> <body> <div id="content"> コンテンツ </div> ------------------------------- これでどうでしょか？あとブラウザによってはmarginを利用したセンタリングができないものがあるので、bodyのtext-alignをcenterに、div#content側でtext-alignをleftにすること（センタリングされたテキストを左寄せにする）をオススメします。

質問者

お礼 2009/04/02 23:27

hamueさま、早々のアドバイスありがとうございます。 >{}が閉じられていません。 ><style type="text/css"> こちらは私の記入漏れでした。正直うまくはいっていないのですが、 >あとブラウザによってはmarginを利用したセンタリングができないものがあるので、こちらの記述が気になりました。それで >bodyのtext-alignをcenterに、div#content側でtext-alignをleftにすること（センタリングされたテキストを左寄せにする）をオススメします。この方法を試すと、うまくいったのですが、idをいくつか埋め込んでいるので正直テキストをすべて左寄せにするのは面倒ではあります。しかし仕方がないのですかね。教本を読んで練習中ですが、この教本のソースをそのままブラウザで見てみると、うまくセンタリングされていますが、私がビルダーを使って同じソースを書いてもうまくセンタリングされません。なにか原因があるのでしょうか、もう少しがんばってみます。またアドバイスがありましたら、よろしくお願いします。

関連するQ&A

ホームページビルダー16　ページセンター表示
現在サイトを制作しています。 Yahooなどのようにページをセンター表示をしたいのですがやり方が分かりません。調べて色々試してみましたがセンターに表示されません。どのようにするのでしょうか？以下は試しにやってみた結果です。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <style type="text/css">  </style> </head> <body> <div style="width : 180px;height : 100px;top : 33px;left : 252px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo11.gif" width="86" height="37" border="0" alt="テスト"></div> <div style="width : 950px;height : 840px;top : 4px;left : 2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"></div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。ブラウザで比較してみると、 ■IE7 　body { text-align: center }で、中央揃え　div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25 　body { text-align: center }では、中央にならない　div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1 　body { text-align: center }では、中央にならない　div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2 　body { text-align: center }では、中央にならない　div.Zen { margin-left: auto; margin-right: auto }で、中央揃えと、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか？回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css">  </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>
- ベストアンサー
- HTML
cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
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
フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？また、この現象の原因を教えてください。 <?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" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
IE８ではtext-align: center;でdivタグが中央にならない。改善策は？
IE８ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。 http://oshiete1.watch.impress.co.jp/qa4989799.html 上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。 CSSでは以下のように記述： div.center { width: 80%; margin-right: auto; margin-left: auto; } HTMLではセンタリングさせたいdiv要素を以下のように記述： <div class="center">文章等<div> ＜質問1＞ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div> を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか（width: 80%はdivタグのセンタリングには特に必要ないのですか？なぜ、width: 80%が記述されているのか分かりません。）？この80%という値はどこから導き出されたのでしょうか（なぜ、例えば60%、70%等ではだめなのですか？）？また、bodyタグをセンタリングしたい場合は、どうですか？CSSにwidth: 80%;が必要なのでしょうか？＜質問２＞「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか？margin:0 autoの場合、上下のマージンも0（無し）となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが？「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか？また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか？＜divタグをセンタリングしたい場合＞ CSSでは以下のように記述： div.center { width: 80%; margin:0 auto } 上記の記述で div.center { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？＜bodyタグをセンタリングしたい場合＞ CSSでは以下のように記述： body { width: 80%; margin:0 auto } 上記の記述で body { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？＜質問3＞ IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか？以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか？ { text-align: center; margin-right: auto; margin-left: auto; } 又は { text-align: center; margin:0 auto; } 関連サイト等あれば、そちらも教えてください。よろしくお願いします。
- ベストアンサー
- HTML
CSSの崩れについて
CSSにて横2段組のボックスを組んだところ、右側の内容がなぜか左側のボックスの下にも表示されてしまいます。 **html**  <div id="out_wrap">  <div id="inner_wrap">  <div id="left_Contents"> <p>AAAA</p> </div>  <div id="right_Contents"> <p>A</p> </div> </div> </div> **css** @charset 'Shift_JIS'; body{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; text-align : center; background : #333333; color:#4f4d45; } #out_wrap{ margin-left : auto; margin-right : auto; width : 980px; padding-top : 20px; background-color : #FFFFFF; } #inner_wrap{ margin-left : 10px; margin-right : 10px; width : 960px; } #left_Contents{ width : 650px; float : left; margin-right :10px ; line-height : 200%; text-align : left; background-color : #000000; } #right_Contents{ width : 300px; float : right; line-height : 200%; text-align : left; background-color : #999999; } ************************************************************* 右ボックスの A と打った文字が左側下にも表示されてしまいます。 marginの計算もあっていると思うのですが、しかもIE6でこのような現象です。Firefox最新版では大丈夫です。よろしくお願いします。
- ベストアンサー
- HTML
CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
IEで中央寄せにしたい
<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですがＩＥ９だと横画面いっぱいに広がってしまいます。ＩＥでも指定した幅で表示させる方法はありますか？
- ベストアンサー
- HTML
自作ＨＰのレイアウトがセンターにきません！＞＜。。
サイトのレイアウト構成は、『ヘッダー・２段組み・フッダー』をそれぞれ分かりやすく色づけしたのですが、なぜか２段組みのとろだけ、センターにきません。また、３つの構成に上下に隙間が出来てしまいます。誰かどこがオカシイのか教えてください。下記にXHTML、CSSを入力しました、メモ帳等にコピペして見て頂けないでしょうか？ご回答お待ちしております。　【XHTML】 <?xml version="1.0" encoding="shift_jis"?> <!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" xml:lang="ja" lang="ja"> <head> <title>　Ｌｉｓｔ　</title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="box_header"> </div> <hr /> <div class="box_a"> </div> <div class="box_b"> </div> <hr /> <div class="box_footer"> </div> </body> </html> 　【CSS】 @charset "shift_jis"; body { background-color: #ffffff; margin-left: auto; margin-right: auto; font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","ＭＳＰゴシック",; } hr { height: 1px; width: 100%; background-color: #000000; } div.box_header { background-color: #ff0000; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; } div.box_a { background-color: #808080; float: left; width: 800px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_b { background-color: #0000ff; float: left; width: 400px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_footer { background-color: #008000; clear: left; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; }
- ベストアンサー
- レンタルサーバ・ASP

センターに表示をしたいのですが