CSSの設定

解決済

質問者：eccschool
質問日時：2009/06/15 20:29
回答数：7件

CSSの初心者です。
両端に背景色が表示されるようなページを作りたいです。
どんな幅の画面でも中央にコンテンツが中央に配置されるようにしたいです。どのようにCSSを記述すればいいでしょうか？

通報する

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

質問の本文を隠す

回答 (7件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： salonpath
回答日時：2009/06/15 22:13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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">

</style>
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="box"></div>
</body>
</html>

通常はこうなる

- 1
- 件

通報する

No.7

回答者： think49
回答日時：2009/06/16 13:41

>> #6 sh_hiroseさんへ

> margin:0 auto;、text-align:center;でセンタリングを行っているので間違ってはいません
「間違っている」ではなく「別の切り口から」のつもりで書きました。
誤解させてしまったのでしたら、すみません。

- 0
- 件

通報する

No.6

回答者： sh_hirose
回答日時：2009/06/16 12:41

よくやる方法

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;でセンタリングを行っているので間違ってはいません。

- 0
- 件

通報する

No.5

回答者： think49
回答日時：2009/06/16 11:31

センタリングの捉え方によると思うのですけど、皆さんの紹介している方法は「コンテンツブロックの幅固定」です。

反対に「余白の幅固定」も有りかな、と思います。

<style type="text/css">
body{
margin: 0px 5em;
}
</style>

こうすると、ウインドウサイズに応じてコンテンツブロックが可変になるのでリキッドレイアウトっぽくなったり。

- 0
- 件

通報する

No.3

回答者： salonpath
回答日時：2009/06/15 22:10

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">

</style>
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="box"></div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： rukuku
回答日時：2009/06/15 21:19

こんばんは

Internet ExplorerとFirefoxでは方法が異なります。
http://oshiete1.goo.ne.jp/qa3317591.html
http://oshiete.nikkeibp.co.jp/kotaeru.php3?qid=2 …

＃１のsalonpathさんの回答は、Firefoxには効きますが、Internet Explorerには効きません。
Internet Explorerに効かせるには、
body {text-align: center;}
です。…この設定はFirefoxにはのdivやpには効きません。
これですと、中のテキストなども中央揃えになってしまうので、
div {text-align: left;}
で左揃えに戻します。