bodyのセンタリングとwidthの指定について
- bodyのセンタリングとwidthの指定に関する質問です。
- 質問者はスタイルシートでbodyをセンタリングする方法について説明しています。
- Win IE6とSafari5で表示が崩れる現象が発生しており、問題の原因を推察できる回答を求めています。
- ベストアンサー
bodyのセンタリングとwidthの指定について
スタイルシートで以下のように指定しbodyをセンタリングします。 -----CCS----- html{text-align:center;} html,body{height:100%;} body{ margin:0px auto; width:580px; text-align:left; } -----HTML4.01 strict----- <html> ： <body> <h1>・・・</h1> <ul>・・・</ul> <h2>・・・</h2> <p>・・・ <h2>・・・</h2> <p>・・・ ---------- これをwin IE6で確認すると、h2以下の内容がbodyの外（画面100%の直下）にはみ出します。 win Safari5でも同様です。 IE6では、body直下にコンテナとしてdivを置きwidthを指定してやれば解決します。 Safari5ではbody直下にコンテナとしてdivを置くだけで解決します。 なぜこのような現象が起きるのでしょうか？ htmlにtext-alignを指定したりbodyを直接センタリングしているので不安は少々あるのですが…。 h2以下が下がる原因としてh1とulとの相違点(margin-topの指定や文字センタリング)を確認し修正してみたりしましたが解決はしませんでした。 なお、フロートや固定などの表示方法は指定していません。 原因を推察できる方、ぜひ回答お願いいたします。 こういった指定をしていないか、など上記の記述が足りなければご指摘ください。
- t1833
- お礼率100% (7/7)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞htmlにtext-alignを指定したりbodyを直接センタリングしているので不安は少々あるのですが…。 何かのテクニックでなければ辞めましょう。 いや、そもそも、 HTML4.01 strictなんだからbody直下のdivから始めましょうよ。 そのセレクタを一段ずつ下げて指定した方が良いでしょう。
その他の回答 (1)
Bodyのセンタリングですか？ <CENTER> </CENTER>でくくればいいですけど。 最後の </HTML>が抜けているだけのような気もしますが・・・・ IEは結構適当に組んでも出ますけど、ネットスケープなど、命令が違う場合もあります <TBODY>使ったり <ＴＲ> <TD> 使うのも一つの解決にはなると思います。 text-align:left; 580pxの枠で左に寄せなさいと書いていますが？？
お礼
回答ありがとうございました。 検証は終了し、やはり無難にdivを置いておこうかと思います。
補足
お早い回答ありがとうございます。 目的はbodyそのもののセンタリングです。 通常はdivをbody直下に置き、 body{text-align:center;}/*IE対策：divをセンタリング*/ div{ margin:0px auto;/*IE以外のブラウザ：divをセンタリング*/ text-align:left;/*IE対策で指定されたセンタリングをdiv内では解除*/ } などとしてdivをセンタリングするわけですが、bodyを直にセンタリングすることも可能だというので、htmｌとbodyにそれぞれの指定を移して検証してみたのです。 これだとbody直下に広告などが入る場合でもレイアウトとの調整が効きますので。 しかし、やはりあまり推奨される方法ではないのでしょうね。 h2以下だけが下がるのは気にかかりますが…。 htmlの終了タグですが、省略可能なものは省いてます。 念のためきちんと記述してみましたが、変化はありませんでした。 ＞<TBODY>使ったり 表でもないので今回は使用しませんが、最近は疎遠にしすぎて使い方忘れていそうです（笑）
関連するQ&A
- cssでメインコンテンツをセンタリングする方法
cssでメインコンテンツをセンタリングする方法に関する質問をお願いいたします。 下記のサイトなどをみると、 http://www.css-lecture.com/log/css-beginner/026.html *xhtml <body> <div id="wrapper"> <h1>サイト全体を中央に配置にする</h1> <p>サイト全体を中央に配置にする為のテキスト</p> <!--/ #wrapper--></div> </body> *css body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } （1）「body」においてもセンタリングを行っているいるのですが、 それはどうしてでしょうか。 「div#wrapper」だけのセンタリングでは不十分なのでしょうか？ ＞ body { text-align: center; } ＞ （2）また、「p」などのインライン要素は { text-align: center; } を使い、 「id」などのブロック要素は { margin: 0 auto; text-align: left; } を使いますすが、 body要素に対しても、 { text-align: center; } とすることが出来るのでしょうか？ (3)あと、「div#wrappe」で囲ったブロックの中の 「p」や「id」で囲ったコンテンツの中身のテキストは 「div#wrapper」の「 text-align: left; 」で 全て左寄せになりますか？ 参考書などを見ても解りづらかったので 教えていただきたくお願い致します。m(_ _)m その他参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010809440
- ベストアンサー
- CSS
- CSS、width100％でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- 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
- divタグを中央寄せでwidthを指定したい。
Webのデザインを行っているのですが、以下のような事象に困っています。 ブラウザはGoogle chromeです。 <body> <div style="text-align:center;"> あいうえお </div> </body> これは中央寄せになるのです。しかし、 <body> <div style="text-align:center;width:400px;"> あいうえお </div> </body> こうすると、中央寄せが解除されてしまいます。 どうしてこうなるのでしょうか？ 出来れば理由も含めて理解したいのですが、教えて頂けないでしょうか。
- ベストアンサー
- HTML
- リストの「・」をセンタリングする方法について
<ul style="text-align:center"> <li><a href="XX">項目１行目</a></li> <li><a href="YY">項目２行目</a></li> </ul> このようにしてリスト表示をセンタリングさせており、 ブラウザチェックをしていたらFire Fox(3.5.8)、Chrome(4.0.249.89)、safari(4.0.4) で表示が ・ 項目１行目 ・ 項目２行目 となってしまい、文字はセンタリングしてくれましたが、「・」がブラウザの左端に寄ってしまい センタリングしてくれません。他のブラウザ(IE、opera)では「・」もセンタリングされているのですが… テーブルの時も同じような現象に陥ってしまい、 margin-left:auto;margin-right:auto;と指定する事で回避出来たのですが、 今回も同様の方法で<ul style="margin-left:auto;margin-right:auto;">やってみましたが、無反応… で、今度はautoではなくてpx数で指定すれば上手く「・」が移動してくれたのですが、ブラウザ画面を 小さくしてしまうと文字が潰れてしまい、断念。 更にlist-style-type:none;で指定してやれば見た目的にはセンタリングしていますが、「・」が無いので いまいち… どのようにしたらこれらのブラウザでちゃんと「・」がセンタリングするようになるのでしょうか？ よろしくお願い致します。
- ベストアンサー
- HTML
- CSS/float内のセンタリング
下記の記述でsideconteをsideWrap内にセンタリングしたいのですが、うまくいきません。sideWrap内に記述したテキストはセンタリングされるのですが、sideconteは思った通りに、配置できません。どのように記述すれば、よいでしょうか？ <html lang="ja"> <head> <style type="text/css"> #sideWrap { width:220px; float:right ; background-color: #fec000; text-align:center; } .sideconte { width:175px; background-color:red;text-align:center;} </style> </head> <body> <div id="sideWrap">text1 <div class="sideconte"> text2 </div><!-- /sideconte --> </div><!-- /sideWrap --> </body> </html>
- ベストアンサー
- HTML
- jCarouselLiteでwidth: 100%
jCarouselLiteを使用し、 .shopList内の<li>要素を横並びに並べたスライダーを作成しています。 <li>要素にwidth: 100%を指定し、 要素の表示を一つにしてウインドウサイズいっぱいのスライダーの作成を考えていました。（矢印をクリックすると、画像がウインドウの端から流れてくるイメージです） <li>内の要素<img class="productimgimg">は、ブロック指定してmargin-left/right:auto;でセンタリングしています。 が、ウインドウを可変しても通常の<div>要素にwidth: 100%指定した時のように 要素が付いてきません。 （リロードすれば指定位置である中央に戻るのですが……） コードは以下の通りです。 <!------------------html内--------------------> <head> $(function() { $(".shopList").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible : 1, speed:800, easing: "easeInOutCubic" }); }); </head> <body> <div class="left"><div class="prev"> <img src="00000000g.png"> </div></div> <div class="right"><div class="next"> <img src="00000000.png"> </div></div> <div class="shopList"> <ul> <li><img src="1111111.jpg" width="000" height="000" class="productimg"/></li> <li><img src="2222222.jpg" width="000" height="000" class="productimg"/></li> <li><img src="3333333.jpg" width="000" height="000" class="productimg"/></li> <li><img src="444444.jpg" width="000" height="000" class="productimg"/></li> <li><img src="555555.jpg" width="000" height="000" class="productimg"/></li> <li><img src="666666.jpg" width="000" height="000" class="productimg"/></li> </ul> </div> </body> <!------------------css設定--------------------> .left { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; left: 30px; z-index: 11; /* 重なる順番 */ cursor: pointer; } .right { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; right: 30px; z-index: 10; /* 重なる順番 */ cursor: pointer; } .shopList { width: 100%; position: relative; margin: 0; padding: 0; height: 520px; } .shopList ul, .shopList ul li { margin: 0; padding: 0; float: left; display: inline; overflow: hidden; width: 100%; } .productimg { display: block; margin-left: auto; margin-right: auto; } <li>内の<img>要素が、常に画面のセンターにあるようにしたいのです。 よろしくお願いします。
- 締切済み
- JavaScript
- イメージをセンタリングさせてかつ改行させない
イメージをセンタリングさせるために <img ...> を <div> で囲んで <div> に対して「text-align: center; 」か「display: block; margin-left: auto; margin-right: auto;」を指定すると中央に表示されますが、前後に改行がはいってしまいます。 イメージの前後で改行させないように「display: inline-block; _display: inline;」を指定すると今度は端によってしまいます。 中央に表示してかつ前後に改行をいれないような指定方法はあるのでしょうか？
- ベストアンサー
- CSS
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- CSSについての質問です
下記のプログラムについて解らないのですが、containerの内のh1と ulの位置関係ですがh1にmargin-bottom: 0と指定し、ulにmargin-top: 0としてあるが、この2つがくっつかないのは何故でしょうか？ 親切な方、ご回答いただけますようよろしくお願いします。 body{ background-color: #f2f2f2; padding: 0; margin: 0 } div#container { width: 750px; margin-left: auto; margin-right: auto; background-color: white } h1{background-image: url(画像.jpg); width: 640px; height: 120px; margin-bottom: 0; margin-left: 50px; } ul{ list-style: none; text-align: center; padding: 0; margin-left: 10px; margin-top: 0 } li{ width: 128px; float: left; padding: 0px; margin: 0px; }
- 締切済み
- HTML
お礼
＞HTML4.01 strictなんだからbody直下のdivから始めましょうよ。 やはりそれが最適ですよね。 今回はちょっとした検証のつもりだったのですが、実用的でないのは確認できましたので、終了しようかと思います。 なぜh2以下だけが、と疑問はありますが。 ◇試す人も少ないでしょうが補足 私の場合、IE6ではh1以下の表示に幾分時間を要しました。 お二方、ご回答ありがとうございました。 こちらをベストアンサーとし締め切らせていただきます。