重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

CSSの設定

解決済

  • 質問者：eccschool
  • 質問日時：
  • 回答数：7件

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

通報する

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

質問の本文を隠す

A 回答 (7件)

No.4ベストアンサー

  • 回答者： salonpath
  • 回答日時：

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

通常はこうなる
    • good
    • 1
    • 件
通報する

No.7

  • 回答者： think49
  • 回答日時：

>> #6 sh_hiroseさんへ



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

No.6

  • 回答者： sh_hirose
  • 回答日時：

よくやる方法



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

No.5

  • 回答者： think49
  • 回答日時：

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


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

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

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

No.3

  • 回答者： salonpath
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： rukuku
  • 回答日時：

こんばんは


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;}
で左揃えに戻します。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： salonpath
  • 回答日時：

中央配置


widthを指定してmarginの左右をauto
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報