質問: ページの左右の余白(枠外)に色を付ける方法 http://inshokutenkeiei.com/ 上記ページの左右の余白(枠外)に色(#eee8aa)を付けたいのですが、 どこに何(html文)を入れれば良いか教えていただけるとありがたいです。 ※編集画面は、cssとhtmlに分かれています。 ※ネットで色々探しましたが、どれも理解できませんでした。
回答: いわゆる外部スタイルシートを使います。 そこで、 body{background-color:#eee8aa;} でよいです。ただし標準では隙間が開くことがあるので html,body{padding:0;margin:0;background-color:#eee8aa;} としておきます。 通常は背景画像や、font-family,line-height,colorなど、継承されるプロパティも一緒に固定スタイルシート(永続スタイルシート)書いておきます。 ★htmlはきちんと文書構造にしたがってマークアップして、デザインのためにclass名をつけたりidをつけることは間違いです。 タグスープになっちゃいます。典型的な悪い例がのように意味のない(非セマンティックな)マークアップです。(これは某オーサリングツール由来のものです。)html4.01が登場して10数年になろうというのにいまだに・・改善されていない。 [html] untitled トップへ title ===== subtitle section title first published 2005-06-10 last modified 2005-06-10 12:00:00 (jst) [css]standard.css html,body{margin:0;padding:0;} body{ font-family:"ms p明朝","平成明朝",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; }