- ベストアンサー
文章を左揃えのままCSSで全体を中央揃えにしたい
個人でイラスト系サイトを運営しております。 今まではサイトのレイアウトはテーブルで設定していました。 しかし、全ての画像が読み込まれるまで少々時間がかかるのもあり、CSSに変更することに。 その方が表示が速くなるという話を聞きまして、意気揚々に始めたまでは良かったのですが…。 この質問に該当するスレを拝見しましたが、なかなか思い通りにいかずに困っています。 ブラウザはIE7。 CSS、HTMLはこのように表記しております。 ●??02.css ------------------------------------------------- #outline{ width:700px; margin-right:auto; margin-left:auto; } #main{ float:left; width:300px; } #menu{ float:right; width:400px; } #footer{ clear:both; } ------------------------------------------------- ●HTML ------------------------------------------------- <html> <head> <link rel="stylesheet" href="??01.css" type="text/css"> <link rel="stylesheet" href="??02.css" type="text/css"> <title>サイト名</title> </head> <body> <div id="outline"> <div class="menu"> /画像/ </div> <div class="main"> /コンテンツ/ </div> <div id="footer"> </div> </body> </html> ------------------------------------------------- これを見て何かお気づきの所がありましたら、どなたかご教授願えると助かります。
- totoneka
- お礼率77% (7/9)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
●idは「#」ですがclassは「.」で指定しますので、 .main{} .menu{} とします。 ●IEで見る場合、margin-autoではセンタリングされないので、親要素にtext-alignを入れてやります。子要素はtext-align:leftを使って左揃えに戻します。 （他のCSSファイルで指定されているかも知れませんが念のため；） ●<div id="outline">の閉じタグを挿入します。 こんなところでどうでしょう… ---------------------------------------- body{text-align:center;} /*IE用*/ #outline{ width:700px; margin-right:auto; margin-left:auto; text-align:left; /*文字左揃え*/ } .main{ float:left; width:300px; } .menu{ float:right; width:400px; } #footer{ clear:both; } --------------------------- <html> <head> <link rel="stylesheet" href="??01.css" type="text/css"> <link rel="stylesheet" href="??02.css" type="text/css"> <title>サイト名</title> </head> <body> <div id="outline"> <div class="menu"> /画像/ </div> <div class="main"> /コンテンツ/ </div> <div id="footer"> </div> </div><!--outline--> </body> </html>
その他の回答 (1)
- 1632bia
- ベストアンサー率39% (15/38)
単に左マージンを設定するだけではダメですか？ 質問の意図を間違っていたらすみません。 ============================================= <html> <head> <style type="text/css"> <!-- body { margin-left:250px; } --> </style> </head> <body> 文章は左そろえのまま<br> 全体を中央そろえにしたい。<br> <img src="image_sample.jpg"> </body> </html>
補足
回答ありがとうございます。 早速試してみました。 ですが、少々説明不足な質問をしてしまったようで申し訳ありませんでした。 言葉って難しいですね。 ウィンドウの大きさによって中央にくるよう変化するといえばよろしいでしょうか。 ブラウザ拡大サイズの時の中央ではないので、この回答は少し違うように思います。
関連するQ&A
- CSSでロールオーバーを作って中央揃えにしたい。
CSSを使ってロールオーバーを作成しました。 がんばっているのですが、なかなか難しく、壁ばかりです。 なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。 どなたか、お力をお貸しください。よろしくお願い致します。 HTML ----------------------------------- <link href="css.css" rel="stylesheet" type="text/css"> <div class="contents_box2"> <h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3> <p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2"><br /> <div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div> <img src="contents_img2_3.jpg" width="215" height="18" /></div> -------------------- css↓↓↓ ------------- BODY { COLOR: #666666; TEXT-ALIGN: center; margin-top: 0px; font: 12px/130% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; margin: 0px; padding: 0px; } .contents_box2 { FLOAT: left; MARGIN: 0px 12px 0px 0px; WIDTH: 215px; TEXT-ALIGN: left; padding: 0px; background: url(contents_img2_2.jpg) repeat-y; } .contents_text2 { MARGIN: 10px 16px 0px } .contents_detail { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 215px; PADDING-TOP: 0px; TEXT-ALIGN: center } .rollover01 { width:172px; height:29px; background:url(img/button3.jpg) no-repeat center bottom; text-align: center; } .rollover01 a { display:block; width:172px; height:29px; font-size:1px; line-height:1px; outline:none; text-align: center; } .rollover01 a:hover { text-indent:-9999px; } -------------------------------------
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSの左右よせのマージン、IEとFirefoxで表示が違う
CSSの左右よせのマージンについて、どうしても原因が分からない事があるので質問します。 下記ファイル（マージンが分かるようにボーダー設定してます） -----------htmlファイル-------------- <html> <head> <title>CSSテスト</title> <link href="test1.css" rel="stylesheet" type="text/css"> </head> <body> <div class="sotowaku"> <div class="main_l"> 左側の写真です。 </div><!--end main_l--> <div class="main_r"> 右側の本文です。 </div><!--end main_r--> <div class="clear"><br></div><!--clear--> フッター </div><!--end sotowaku--> </body> </html> ------------------------------------- -------------cssファイル------------- body { text-align: center; margin: 0px; } .sotowaku { width: 700px; margin: 0 auto; border: solid 1px #999999; } .main_l { width: 150px; float: left; margin-top: 0px; margin-left: 25px; border: solid 1px #999999; } .main_r { width: 490px; float: right; margin-top: 0px; margin-right: 10px; border: solid 1px #999999; } .clear { clear: both; } ------------------------------------- をIEとFirefoxでプレビューすると 中央700pxの幅の中に ｜25px｜写真150px｜25px｜本文490px｜10px｜ となるはずなのに、 IE６では左25pxと右10pxのマージンが大きく(倍くらいになってます）、左右のメインが重なってしまいます。 Firefoxではちゃんと表示されます。 どこか記述がおかしいのでしょうか。 マージン設定はしないほうがいいのでしょうか。 どうすればIEでもちゃんと表示されるようになるでしょうか。 いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートの外部リンク方法は間違っていますか？
外部ＣＳＳファイルからＨＴＭＬファイルへリンクしてみましたが 文字化けの羅列になります ページのレイアウトの枠組みなのですが homepageフォルダにindex.html style.cssの2つのファイルを作成し style.cssのファイルの中に body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .main { width:480px; float:right; } .side { width:260px; float:left; } .c-both { clear:both; } と記述しtext2.cssと名前を付けたカスケードスタイルドキュメントを入れてあります これをＨＴＭＬに <html> <herd> <link rel="styleseet" href="style.css" type="text2.css"> </herd> <div id="outline"> <div class="header"> タイトルなど </div><!-- end header --> <div class="outline-marign"> <div class="main"> メインスペース </div><!-- end main --> <div class="side"> サイド </div><!-- end side --> <div class="c-both"><br></div> </div><!-- end outline-marign --> <div class="footer"> フッターなど </div><!-- end footer --> </div><!-- end outline --> </html> のように記述しました リンク方法はこれで間違えていますでしょうか？ ブラウザで見ると文字化けの羅列です ＣＳＳをＨＴＭＬに組み込むときちんと表示されるのでブラウザの問題ではない初歩的ミスだと思うのですが 御教授お願い致します
- ベストアンサー
- その他（インターネット・Webサービス）
- cssで、全体を中央寄せ、文字は左寄せにする方法
CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。 bodyにtext-align: centerを設定し、 #outline{ width:1200px; margin-right:auto; margin-left:auto; text-align:left; } .content{ float:left; width: 1200px; } と書き、<div id="outline"><div class="content">で全体を囲みました。 すると、大方できたのですが、h要素のみずれてしまいます。 （h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・） h要素は色とフォントサイズを指定したのみです。 CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。 どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- 全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「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"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>
- ベストアンサー
- HTML
- ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。 一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、 ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、 ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。 現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？ １週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。
- ベストアンサー
- HTML
- 補足・修正・訂正あればお願い致します。
windowsのIE9ではきれいに表示することができました。 しかし、横幅やマージン、パディングの箇所の数値がいまいち 理解できていないため完璧にできたという実感がありません。 もっと論理的にきれいな値をプログラムできると思っています。 私のプログラムで補足・修正・訂正あればお願い致します。 ＊＊＊＊＊＊＊＊＊＊＊＊index.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>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ******************base.css***************************** /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ float:left; width:840px; height:380px; margin:10px; padding-left:0; background:#690; } *html #main{ width:560px; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ float:left; width:130px; margin-left:10px; margin:10px 0px 10px 10px; height:170px; background:#F3F59C }
- 締切済み
- CSS
- css firefox IE 画像を中央揃えにしたいです
初心者です。よろしくお願い致します。 cssでホームページを作っています。 index.htmlに画像を中央に貼り付けたいのですが、 firefoxでは中央揃えに、IEでは左側に表示されます。 下にタグを書くので、ご回答いただけましたら幸いです。 よろしくお願い致します。 -------------------------------------------------- <html> <head> <title>○○○</title> <link href="design/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <img src="img/tobira.jpg"> </div> </body> </html> -------------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#FFFFFF; } body a img{ border: none; align:center; } .contents{ width:800px; margin:0px auto; margin-top:100px; } h1{ color: #FFFFFF; }
- ベストアンサー
- HTML
- IEとその他のブラウザの表示
よろしくお願いします 現在、2段落の段組をCSSで行っています 但し、1段落目と2段落目にはマージンを指定しています そこで質問なのですが どこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか？ よろしくお願いします
- ベストアンサー
- HTML
お礼
返答ありがとうございます。 早速やってみたところ、何とか中央に揃えることが出来ました。 ブラウザによってタグが適応されない時もあるとは…！ 自分で確認していたつもりでも、「outline」を閉じるのを忘れていたのには気付きませんでした。 一人でやるのと誰かから見てもらうとでは大分違いますね。 では、これにて回答を締め切りさせてもらいます。 答えて下さった方々、どうもありがとうございました。