- ベストアンサー
CSSの設定
CSSの初心者です。 両端に背景色が表示されるようなページを作りたいです。 どんな幅の画面でも中央にコンテンツが中央に配置されるようにしたいです。どのようにCSSを記述すればいいでしょうか？
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>センタリングDOCTYPE宣言あり</title> <style type="text/css"> <!-- #box { background: #66CCCC; width:150px; height:150px; margin:0 auto; background-color: #006699; } --> </style> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <div id="box"></div> </body> </html> 通常はこうなる
その他の回答 (6)
- think49
- ベストアンサー率59% (285/482)
>> #6 sh_hiroseさんへ > margin:0 auto;、text-align:center;でセンタリングを行っているので間違ってはいません 「間違っている」ではなく「別の切り口から」のつもりで書きました。 誤解させてしまったのでしたら、すみません。
- sh_hirose
- ベストアンサー率66% (56/84)
よくやる方法 CSS html, body { height: 100%; } body { margin:0px; padding:0px; /* ここに両端の背景色を指定 */ background-color: #FF0000; /* margin: 0 auto が効かないブラウザ用 */ text-align: center; } #CONTENTS { padding:0px; /* ここにコンテンツ部分の背景色を指定 */ background-color: #FFFFFF; /* コンテンツ部分の幅指定 */ width: 80%; /* コンテンツ部分の高さ指定 */ height: auto !important; height: 100%; min-height: 100%; /* センタリング */ margin: 0 auto; /* bodyのtext-align: center;の打ち消し用 */ text-align: left; } HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Sample</title> <link rel="StyleSheet" type="text/css" href="sample.css"> </head> <body> <div id="CONTENTS"> コンテンツ部分 </div> </body> </html> think49さんより引用 >センタリングの捉え方によると思うのですけど、皆さんの紹介している方法は「コンテンツブロックの幅固定」です。 Divのコンテンツブロックの幅固定を確かに行っていますが、 margin:0 auto;、text-align:center;でセンタリングを行っているので間違ってはいません。
- think49
- ベストアンサー率59% (285/482)
センタリングの捉え方によると思うのですけど、皆さんの紹介している方法は「コンテンツブロックの幅固定」です。 反対に「余白の幅固定」も有りかな、と思います。 <style type="text/css"> body{ margin: 0px 5em; } </style> こうすると、ウインドウサイズに応じてコンテンツブロックが可変になるのでリキッドレイアウトっぽくなったり。
- salonpath
- ベストアンサー率48% (194/399)
rukukuさんの方法はIEの5.5以前（もしくは後方互換モード）での古いブラウザと古いWeb制作に合わせたセンタリングの方法です。 IE6~IE8もFirefoxもOperaもSafariもmargin:0 auto;でセンタリングできますし、それで中央配置にならない場合はhtmlに問題があります。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>センタリング</title> <style type="text/css"> <!-- #box { background: #66CCCC; width:150px; height:150px; margin:0 auto; background-color: #006699; } --> </style> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <div id="box"></div> </body> </html>
- rukuku
- ベストアンサー率42% (401/933)
こんばんは Internet ExplorerとFirefoxでは方法が異なります。 http://oshiete1.goo.ne.jp/qa3317591.html http://oshiete.nikkeibp.co.jp/kotaeru.php3?qid=2133818 ＃１のsalonpathさんの回答は、Firefoxには効きますが、Internet Explorerには効きません。 Internet Explorerに効かせるには、 body {text-align: center;} です。…この設定はFirefoxにはのdivやpには効きません。 これですと、中のテキストなども中央揃えになってしまうので、 div {text-align: left;} で左揃えに戻します。
- salonpath
- ベストアンサー率48% (194/399)
中央配置 widthを指定してmarginの左右をauto
