ページの左右の余白（枠外）に色を付ける方法

解決済

質問者：58497536
質問日時：2011/07/15 15:35
回答数：2件

http://inshokutenkeiei.com/
上記ページの左右の余白（枠外）に色（#EEE8AA）を付けたいのですが、
どこに何（html文）を入れれば良いか教えていただけるとありがたいです。

※編集画面は、cssとhtmlに分かれています。
※ネットで色々探しましたが、どれも理解できませんでした。

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： qualheart
回答日時：2011/07/15 15:47

body#top {

background-color:#EEE8AA;
}

上記をCSSに追加してください。
CSSのdiv#wrapperの内容を以下に変更してください。

div#wrapper {
background-color:#FFFFFF;
width: 950px;
margin: 0 auto;
}

これでOKです。
つまりHTML全体にEEE8AAを付けて、内容が入っている<div id="wrapper">の背景を白色にしているということになります。
ご参考まで。

この回答への補足

ありがとうございました。出来ました。

ただ、私の表現に誤りがありまして、トップページだけでなく全ページを同じくしたい場合はどうすればよろしいでしょうか？

補足日時：2011/07/15 16:37

通報する

- 1
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/07/15 17:43

いわゆる外部スタイルシートを使います。

そこで、
body{background-color:#eee8aa;}
でよいです。ただし標準では隙間が開くことがあるので
html,body{padding:0;margin:0;background-color:#eee8aa;}
としておきます。
　通常は背景画像や、font-family,line-height,colorなど、継承されるプロパティも一緒に固定スタイルシート(永続スタイルシート)書いておきます。

★HTMLはきちんと文書構造にしたがってマークアップして、デザインのためにclass名をつけたりIDをつけることは間違いです。
　タグスープになっちゃいます。典型的な悪い例が<div class=wrap">のように意味のない(非セマンティックな)マークアップです。(これは某オーサリングツール由来のものです。)HTML4.01が登場して10数年になろうというのにいまだに・・改善されていない。

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>Untitled</title>
<meta name="author" content="IRUKA">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:ORUKA1951@ichiya.com" title="send a mail" >
<link rel="stylesheet" type="text/css" href="./styleSheet/standard.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/screen.css">
<link rel="START" href="../index.html">
<link rel="NEXT" href="./page1.html">
<link rel="SHORTCUT ICON" href="/favicon.ico">
<link rel="ICON" href="/favicon.ico">
</head>
<body>
<div class="header">
<p class="nav"><a href="./index.html">トップへ</a></p>
<div class="hgroup">
<h1>title</h1>
<h2>subTitle</h2>
</div>
</div>
<div class="section">
<h2>section Title</h2>
<p>
</p>
</div>
<div class="footer" id="DOCUMENT_INFORMATION">
<dl class="document-version">
<dt id="FIRST-PUBLISHED">First Published</dt>
<dd>2005-06-10</dd>
<dt id="LAST-MODIFIED">Last Modified</dt>
<dd>2005-06-10 12:00:00 (JST)</dd>
</dl>
</div>
</body>
</html>

[CSS]standard.css
html,body{margin:0;padding:0;}
body{
font-family:"ＭＳＰ明朝","平成明朝",serif;
line-height:1.4em;
}
p{text-indent:1em;}

[CSS]screen.css
body{
background-color: #eee8aa;
}
div.header,
div.section,
div.footer{
width:80%;
margin:0 auto;
background-color:white;
}