- ベストアンサー
ホームページの余白に色をつけたい
質問の趣旨は、以下のようなホームページを作りたいということです。 http://www.kandamasanori.com/ このように灰色の背景の上にページが乗っかっているようなページを作りたいと思っています。 そこで、スタイルシートで body{ background-color:#cccccc } と指定したうえで、ページの各部分において、 div block1{ background-color:#ffffff } というふうにしてみたのですが、これだと、たとえばblock1とblock2の間の余白部分が灰色（#cccccc）になってしまいます。 私の説明では舌足らずかと思いますが、何かいい方法があればアドバイスよろしくお願いいたします。
- pc1234
- お礼率35% (28/79)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<body> <div id="wrap"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> #wrap{background-color:#ffffff} body直下に#wrapを配置。
その他の回答 (1)
- gura_
- ベストアンサー率44% (749/1683)
ご指定のページのソースをご覧になればお気づきと思いますが、table タグで縁取りすればよろしいかと思います。↓ <html><HEAD></HEAD> <BODY bgcolor="#E6E6E6" > <TABLE height=100% width="770" border="0" cellspacing="1" cellpadding="0" align="center" bgcolor="#999999" bordercolor="#999999"> <tr bgcolor="#FFFFFF" align="center"> <td>ここにblock1を書く</td> </tr> <tr bgcolor="#ddffdd" align="center"> <td>ここにblock2を書く</td> </tr> </TABLE> </BODY></html>
お礼
tableタグはあまり使いたくなかったので、今回はNo.1さんの提示された方法を使いました。 gura_さんのアドバイスは、今後、tableタグを使う際の参考にさせていただきます。 ありがとうございました。
関連するQ&A
- 左右の余白に色指定
左右の余白に色指定というのは、以下のようなものです。 http://www.kandamasanori.com/ このように灰色の背景の上にページが乗っかっているようなページを作りたいと思っています。 そこで、スタイルシートで body{ background-color:#cccccc } と指定したうえで、ページの各部分において、 div block1{ background-color:#ffffff } というふうにしてみたのですが、これだと、たとえばblock1とblock2の間の余白部分が灰色（#cccccc）になってしまいます。 私の説明では舌足らずかと思いますが、何かいい方法があればアドバイスよろしくお願いいたします。
- ベストアンサー
- ブログ
- Firefoxでの上部の余白について
XHTMLとCSSでページを作成していまして、 ■XHTML部分 <div id="header"> </div> ■CSS部分 body{ scrollbar-arrow-color:#DDDDDD; scrollbar-base-color:#000000; scrollbar-shadow-color:#E9E9E9; scrollbar-face-color:#FFFFFF; scrollbar-track-color:#E5E5E5; scrollbar-highlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#C7C7C7; background:url(../images/bg_main.gif); background-position:center top; background-repeat: repeat-y; background-color:#ffffff; color:#ffffff; margin:0; padding:0; height:100%; } #header { font-size: 12px; color:#666666; text-align:left; width:800px; height:90px; background: url(../images/bg_header.gif) center top repeat-y; } としているのですが、Firefoxで見るとヘッダ画像（背景に指定）の 上に余白が出来てしまいます。 どうすれば無くなるのでしょうか？ どうぞ宜しくお願い致します。
- 締切済み
- HTML
- CSSによるスクロールバーの色の反映がされない
CSSによるスクロールバーの色の反映がされないのですが、原因がよく分かりません。 環境 windows2000SP4 IE6.0.2 ソース html,body{ background-color:#FFFFFF; font-size:14px; margin:0px; scrollbar-3dlight-color : #FFFFFF; scrollbar-arrow-color : #336666; scrollbar-base-color : #FFFFFF; scrollbar-darkshadow-color : #FFFFFF; scrollbar-highlight-color : #CCCCCC; scrollbar-shadow-color : #CCCCCC; scrollbar-track-color : #FFFFFF; } 外部CSSを読み込む感じなのですが、他のCSSは反映されているので、外部CSSへのリンクが違うということはないです。 また、おそらくスクロールバーの色を変更しているサイトのスクロールバーを見てもデフォルトの灰色です。 また、IEのインターネットオプションのユーザー設定には何もチェックはいれていません。 何かあやしい点があれば、教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- スクロールバーの色変更（長文）
スクロールバーの色を設定したいのですが、下のように書くとうまく設定できません。 どこがおかしいのでしょうか？ よろしくおねがいいたします。 <html> <head> <style type="text/css"> <!-- body { scrollbar-3dlight-color:#808080; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff;} body { background-image:url("top/newtop.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 20%; background-color:#ffffff; } div { text-arign:center; padding:10px; border-width:thin; border-style:dotted; background-color:transparent; } #kousinrireki{ position:static; margin-top:20px; margin-right:80%; margin-bottom:70%; margin-left:0%; } #reserve { text-arign:center; padding:0px; border-width:thin; border-style:none; background-color:transparent; color:maroon; ｝ --> </style> </head> <BODY TEXT="#708090"> <font size=-2> <body> <div id="kousinrireki"> ※リニューアル♪<BR> </div> <div id="reserve"> Fumio All rights reserved<BR> </div> </body> </html>
- ベストアンサー
- HTML
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
- ページ上部の余白をなくしたい（ＣＳＳ）
初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <div id="container">の上部にスキマが出来てしまいます。 背景に仮色をつけたりして確認しましたが、 どうしても余白をなくすことができません。 marginの指定の仕方がおかしいのでしょうか？ ご指摘いただけると助かります。 /* HTML（単純に書くとこんな感じです）*/ <body> <div id="container"> <div id="header"> <div> </div> </body> /* CSS */ body { margin : 0; padding : 0; background-color : #eeeeee; font-size : 12px; line-height : 150%; color : #333333; font-family : arial, helvetica, sans-serif, Verdana, Geneva, ＭＳゴシック; text-align : center; } #container { margin : 0 auto; padding : 0; width : 751px; text-align : left; background-color : #ffffff; } #header { margin : 0 auto; padding : 0; width:745px; height:120px; background: transparent url(***.jpg) ; background-repeat: no-repeat; }
- ベストアンサー
- HTML
- 最上部の余白の原因
こんばんは、質問させてください。 XHTML 1.0 Transitional、CSS2で大枠のレイアウトを組んでいてはまっています。 コードは抜粋です。現在の書き方だと タイトル部分の上に対してのマージンによって <div class="header">の要素と一緒に余白がとられてしまい真っ白な余白が最上部にできてしまいます。 想定ではヘッダーの中で中央ぐらいにTitleという文字がくると思っていたのですが。。 原因はなんでしょうか？ 宜しくお願い致します。 -index.html <body> <div class="header"> <p class="title">Title</p> </div> </body> -style.css *{ margin:0; padding:0; } .header{ background-color:blue; width:800px; height:250px; } .title{ width:200px; height:50px; background-color:red; color:white; margin-left:210px; margin-top:100px; }
- ベストアンサー
- CSS
- ホームページ作成 スタイルシートを使用して画面を３分割したい。
ホームページ作成 スタイルシートを使用して画面を３分割したい。 下のようなソースを作成しました。 head と body と foot に画面を３分割してます。 footを高さ30pxにしてますが、これをウィンドウの一番下にくっつけて 画面解像度、ウィンドウサイズを変更してもhead部分は一番上へfoot部分は一番下に表示したいと思ってます。 どのような指定をすれば出来ますでしょうか？ご教授願いします。 -------------------------------------------------- <html> <head> <style> * { padding: 0; margin: 0; } #head { height: 100px; width: 100%; background-color: #FFFF00; } #body { width: 100%; } #foot { height: 30px; background-color: #000000; color: #FFFFFF; } </style> </head> <body> <div id="head"> タイトル </div> <div id="body"> テストページ </div> <div id="foot"> copyright(c) </div> </body> </html>
- ベストアンサー
- CSS
- スタイルシート：1段組のレイアウトで両側の余白に色をつけたい。
http://www.oakis.co.jp/ 上記のページのように、HPの中身の部分は1段組のレイアウトにして、その両側の余白のレイアウトに色をつけたいのですが、どのようにすれば実現できるのでしょうか？ 今自分で作っているものとしては、<div>でbodyの全体をくくって、スタイルシートで幅を設定して配置を中心にすることで上のページのようなレイアウトにはしているのですが、両側の余白に色のつけ方が分かりません。 よろしくお願いします。
- ベストアンサー
- HTML
- フッター部分にどうしても余白ができます。
下記のページを見てみてください。 Yahooのジオシティーズを借りてますので変なページではありません。 http://www.geocities.jp/shiori1522/index.html フッター部分に、「copyright・・・・・」と記述があるところですが、 灰色のbackgroundを使ってます。 その灰色backgroundでフッターはぴったり終わってほしいのですが、 その下に、5mm程度でしょうか。余白が確認できます。 ブラウザによって異なるのかと思いましたが、 IE8、FireFox、Googleクローム、Operaなどいずれも余白が出来ます。 事前に調べてもみましたが、 bodyにmargin 0を記述するとかもすでにやってますがうまくいきません。 どこを修正すればいいでしょうか？ CSSは、下記のURLにあります。 よろしくお願いいたします。 http://www.geocities.jp/shiori1522/main_10C_2c.css http://www.geocities.jp/shiori1522/container_10C_2c_topleft.css http://www.geocities.jp/shiori1522/user.css http://www.geocities.jp/shiori1522/hpbparts.css
- ベストアンサー
- HTML
お礼
さっそくやってみたところ見事成功！ ありがとうございました！！