- ベストアンサー
ページの左右の余白（枠外）に色を付ける方法
http://inshokutenkeiei.com/ 上記ページの左右の余白（枠外）に色（#EEE8AA）を付けたいのですが、 どこに何（html文）を入れれば良いか教えていただけるとありがたいです。 ※編集画面は、cssとhtmlに分かれています。 ※ネットで色々探しましたが、どれも理解できませんでした。
- 58497536
- お礼率22% (4/18)
- CSS
- 回答数2
- ありがとう数0
- みんなの回答 （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; }
関連するQ&A
- 左右の余白に色指定
左右の余白に色指定というのは、以下のようなものです。 http://www.kandamasanori.com/ このように灰色の背景の上にページが乗っかっているようなページを作りたいと思っています。 そこで、スタイルシートで body{ background-color:#cccccc } と指定したうえで、ページの各部分において、 div block1{ background-color:#ffffff } というふうにしてみたのですが、これだと、たとえばblock1とblock2の間の余白部分が灰色（#cccccc）になってしまいます。 私の説明では舌足らずかと思いますが、何かいい方法があればアドバイスよろしくお願いいたします。
- ベストアンサー
- ブログ
- firefoxで、ウェブ頁をプリントするときに左右の余白が大きくなりま
firefoxで、ウェブ頁をプリントするときに左右の余白が大きくなります。 大きくならないアドオンを教えてください。 CSSをいじるようなのかな、とか想像していますが、 自動で印刷にちょうど良い具合に配置してくれるのがいいです。
- 締切済み
- ブラウザ
- ページ下の余白をなくせない・・・
GoLive csというソフトでホームページを作りはじめました。 下のようなホームページ↓ http://www.uchida-hp.com/ のように、上と下の余白を無くしたページを作りたいのですがどうしても下の部分の余白だけ無くすことができません。背景の色が表示されてしまいます。 ソフトのページのプロパティ設定で左右・高さのマージン設定を「0」にしていますがダメです。上の余白は無くなります。 レイアウトするテーブルやグリッドの設定を何か行なうのでしょうか？ どなたか教えて下さい。 お願いします。
- 締切済み
- CSS
- ホームページビルダー ページの余白の色を白に戻す
ホームページビルダー ８ でページを作り、アップできました。 その後、どこかを設定してしまい、ページの外側の余白の部分(横スクロールすると伸び縮みする部分) に色がついてしまいました。 元々は白だったのが、赤になりました。 ビルダーの「ページ編集」や「プレビュー」の画面では(余白は表示されないため)赤色はありません。 IE やFirefoxで見たときに現れます。 色々いじっているうちに、そのような設定をしたような記憶もありますが、どうやれば戻せるでしょうか？
- 締切済み
- ホームページ作成ソフト
- ページ下部に大きな余白が…
恐れ入ります。 ぜひ教えて下さい…m(_ _)m ホームページビルダー７を使っています。 ページ編集画面では問題ないのですが、 プレビューすると、いちばん下に大きな余白ができてしまいます。 解消する方法があれば、どなたかご教授いただけます でしょうか？ 横に２分割した表（大）の中にすべての表、文字や イメージを入れて作っています。 左側にはさらに表を一つ入れてその中に文章、 右側には縦に表を３つほど入れて、そのいちばん下の ものの中に文章（小さい文字サイズで）をたくさん 打ち込んでいます。 その文字サイズと改行などのせいか表（大）の左側の 文章がかなり上の方で終わって、かなり空白ができる 状態でやっと、プレビュー画面で見て右側と左側の バランスがちょうど良くなります。 問題の、ホームページ自体の一番下にできる大きな 余白は、そのページ編集画面での左右のアンバランス さと、似たような高さのような気もするのですが、 属性変更の“セル”や“表”の高さの数値を変えて も、マウスでドラッグしてそれぞれの表のサイズを変えようとしても、大きな余白は消えません。 それどころか、あんまりいじると、今度は大きな余白が消えて、表（大）の中に大きな余白ができてしまいます。 どなたか解決方法をご存知の方、何卒アドバイスの程、よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 【ホームページ】中心に寄せたページの枠外に色を付ける
ホームページのひとつのページの横幅が全画面ではなく、画面の7割程度の幅で作られ、中央揃えされていて、例えば背景が白。 それ以外の空いた左右の場所はオレンジ、などといったページを見るのですが、このそれぞれに異なった背景の色（画像）を設定する方法がわかりません。中央揃えの方法はわかります。ホームページビルダーVer.8で作成します。 異なった背景が設定できるということは、表などで分かれているのでしょうか？ページの見出しから最後まで表に入れて試してみましたが、ページ上部・下部は外枠の色になってしまします。 専門用語知識不足ですが、どなたか質問の意味がお分かりになられる方がいらっしゃいましたら、どうかよろしくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- フレームを作ったページ全体にmarginを使いたい。（余白を設けたい）
フレームを使って左右にメニューとコンテンツで、分けたページを作っています。 フレームを使わないページの場合は、body要素を使うのでCSSに body{margin-left:30%} とか書けば、左の部分に余白を設けられると思うのですが、フレームを使うとbodyを使わないと思うのですが、どのようにすれば実現できるのでしょうか？
- ベストアンサー
- HTML
- WEBページ左右に区切り線を挿入
お世話になっております。 Dreamweaver8、Windows XP環境でHP制作をしています。 ページの左右（編集領域というのでしょうか）に線を入れたいのですが、どう調べてもわからず困っております。 ボタンやFLASHなどの素材を配置したのですが、どうもバラバラな感じになってしまい、どこまでがページの横幅で、どこからが余白なのか分からないため、左右に線があって、その中に素材が納まっている感じにしたいのですが…。 この説明でご理解いただけるでしょうか…？ タグ等を見てもどれがその線に当たるのか分からず悩んでいます。 ご存知の方いらっしゃいましたらどうぞお知恵を貸してください。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- フレーム構造のページで左右上下の余白を0にしたいのですが、以下の何れの
フレーム構造のページで左右上下の余白を0にしたいのですが、以下の何れの方法でも ほとんど変化がありません。 １．<frame src="green.html" marginwidth="0" marginheight="0"> ２．<body style="margin:0px;padding:0px;"> ３．<style type="text/css"> <!-- body { margin:0px;padding:0px;} --> </style> 確実な方法を教えてください。 宜しくお願い致します。
- 締切済み
- CSS
- ページ印刷時の余白設定
HPを作っているのですが (横幅750pix程/ページマージン上下左右0pix)、 A4縦印刷する時にどうしても右側が切れてしまいます。 (※A3や、横にしたり、ブラウザ側で余白の設定をすれば印刷できます。) CSSで、印刷時の紙の方向などを設定するのは調べてみたところ可能のようなのですが、A4縦方向ではいるようにCSSでの指定は可能なのでしょうか？不可能なのでしょうか・・・。 印刷時の余白設定はやはりブラウザ側で設定するしかないのでしょうか？ ページ自体の幅(デザイン)を狭くするのは最終手段として、、、。 ご教授いただけませんでしょうか。 よろしくお願いいたします。
- 締切済み
- HTML
補足
ありがとうございました。出来ました。 ただ、私の表現に誤りがありまして、トップページだけでなく全ページを同じくしたい場合はどうすればよろしいでしょうか？