- ベストアンサー
ページの左右の余白（枠外）に色を付ける方法
http://inshokutenkeiei.com/ 上記ページの左右の余白（枠外）に色（#EEE8AA）を付けたいのですが、 どこに何（html文）を入れれば良いか教えていただけるとありがたいです。 ※編集画面は、cssとhtmlに分かれています。 ※ネットで色々探しましたが、どれも理解できませんでした。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
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">の背景を白色にしているということになります。 ご参考まで。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いわゆる外部スタイルシートを使います。 そこで、 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; }
補足
ありがとうございました。出来ました。 ただ、私の表現に誤りがありまして、トップページだけでなく全ページを同じくしたい場合はどうすればよろしいでしょうか？