ホームページで上の空白をなくす方法
- ホームページで上の空白をなくしたい場合、HTMLとCSSのコードを調整する必要があります。具体的には、body要素とhtml要素のmarginとpaddingを0に設定し、#warrp要素のmargin-topを0に設定することで空白をなくすことができます。
- ホームページで上の空白をなくすためには、HTMLとCSSのコードを修正する必要があります。まず、body要素とhtml要素のmarginとpaddingを0に設定し、#warrp要素のmargin-topを0に設定します。これによって上部の空白をなくすことができます。
- ホームページで上の空白をなくしたい場合、HTMLとCSSのコードを変更する必要があります。具体的には、body要素とhtml要素のmarginとpaddingを0に設定し、#warrp要素のmargin-topを0に設定すると、上部の空白がなくなります。
- ベストアンサー
ホームページで上の空白をなくしたいです。
HTMLとCSSについての質問です。 現在、簡単なホームページを作りたいと思っているのですが、 どうしても一番上に空白ができてしまって困っています。 コードは下記のようなものなのですが、どこを直せばよいのか教えてください。 ================================================================= <!DOCTYPE html> <html> <meta charset="utf-8"> <!-- 中央揃え--> <!-- cssの指定--> <link href="top.css" rel="stylesheet" type="text/css"> <body topmargin="0"> <div id="warrp" align="center"> <div id="head"> <h1>タイトル</h1> <p>サブタイトル</p> </div> <div id="box2"> <div id="menu"> <h2>menu</h2> <p>左側のコンテンツ</p> </div> <div id="soft"> <h2>soft</h2> <p>右側のコンテンツ</p> </div> <div id="main"> <h2>中央</h2> <p>メインコンテンツ</p> </div> <div id="link"> <h2>link</h2> <p>リンクを張り付け</p> </div> </div> </div> </body> </html> ================================================================= html,body{ height: 100%; margin:0px; padding:0px; } #box2{ width: 100%; /*全体の幅を指定する*/ height: 100%; } #warrp{ margin-top: 0; width: 100%; /*全体の幅を指定する*/ height: 100%; } #head{ margin-top: 0; height: 20%; /*高さを指定する*/ background-color: #FFFFD5; /*わかりやすいように色を指定します*/ } #menu { float: left; /*leftを左に回り込み*/ height: 100%; width: 25%; /*幅を指定する*/ top: 25%; background-color:#492498; } #soft{ float: right; /*mainを左に回り込み*/ width: 25%; /*幅を指定する*/ height: 100%; background-color: #af8585; } #main{ float: left; /*mainを左に回り込み*/ width: 50%; /*幅を指定する*/ height: 30%; background-color: #FFEAEA; } /* #foot{ clear: both; floatの回り込みを解除する height: 70px; 高さを指定する background-color:#E9E9E9; text-align:center; } */ #link{ float: left; background-color: #8ce91a; width: 50%; height: 70%; font-size: 20px; } =================================================================
- date_205s
- お礼率0% (0/3)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
H1にデフォルトのマージンがあるからです。 clearCSS系で初期化してからやることを強くお勧めしますが。 今回の質問の分のみ回答しておきます。 H1 { margin-top:0px; } これだけでOKです。 それと、CSSデバッガー（EdgeでもChromeでもついてます） 使えば、この手のはすぐわかりますよ。
関連するQ&A
- CSS-paddingが反映されません
入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。 ご教授ください。
- 締切済み
- HTML
- 背景色が表示されない＞＜
下記のように設定していますが、背景色が表示されません。 解決方はありますでしょうか？ 【html】 <div id="header"> <div id="h_contents"> <div id="h_left_pr"> ｄｄｄx </div><!-- h_left_pr --> <div id="h_wrapper"> <div id="right_top_area"> テキストリンクエリア </div><!-- right_top_area --> <div id="h_main_box"> <div id="h_main_left"> ロゴエリア </div><!-- h_main_left --> <div id="h_main_right"> <div id="h_search_area"> サーチエリア </div><!-- h_search_area --> <div id="h_map_area"> マップエリア </div><!-- h_map_area --> </div><!-- h_main_right --> </div><!-- h_main_box --> </div><!-- h_wrapper --> </div><!-- h_contents --> <div style="clear:both "></div> </div><!-- header --> 【css】 #header{ width:100%; background-color:black; } #h_contents{ width:1240px; margin:0 auto; } #h_left_pr{ float:left; width:120px; background-color:red; } #h_wrapper{ float:right; width:1000px; margin:0 120px 0 0; padding:0; background-color:blue; } #h_wrapper{ >margin:0 60px 0 0; } #right_top_area{ clear:both; float:right; background-color:green; width:350px; } #h_main_box{ clear:both; background-color:yellow; } #h_main_left{ float:left; width:200px; background-color:purple; } #h_main_right{ float:right; width:800px; background-color:orange; } #h_search_area{ clear:both; float:left; width:500px; background-color:gray; } #h_map_area{ float:right; width:300px; background-color:darkblue; }
- ベストアンサー
- HTML
- CSS、ヘッダーの上にあいだが開く
初めてWEBページを作ろうとしているものなのですが、 なぜかヘッダーの上にあいだが開いてしまいます。（送付の図のように） このあいだを無くして濃いオレンジからピッタリ、ヘッダーから始めたいんですけれども、どうしたらいいのでしょうか？ 「HTML」 <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>公式サイト</title> </head> <body id="body"> <div id="header"> <h1 class="title">title</h1> </div> <div id="page"> <div id="main"> <div class="center"> <img src="top-picture2.jpg" width="675" height="420"> </div> <h4>グループについて・・・</h4> <p>testtesttesttesttesttesttesttesttesttest</p> <div class="history"> <h4>更新履歴</h4> </div> <div class="youtube"> <h4>ユーチューブ</h4> </div> </div> <div id="sidebar"> <img src="top.jpg"> <img src="top2.jpg"> </div> </div> <div id="footer"> <h2>フッター</h2> <p class="center">©2014 dutchiris.lolipop.jp All rights reserved.</p> </div> </body> </html> 「CSS」 @charset "UTF-8"; /* 背景色用 */ #body{ background-color: #FFD5AA; } #header{ height: 75px; background-color: orange; clear: both; /*background: url(path_back1.gif) repeat-x bottom; */ } .title{ color: #FFFFFF; padding-top: 30px; font-size:45px; font-family:"ＭＳ Ｐゴシック","ＭＳ Ｐゴシック",sans-serif; width: 1000px; margin: 0 auto; } #main{ float: left; background-color: #ffffff; width: 750px } #sidebar{ float: right; background-color: #ffffff; width: 250px; } #page{ margin-top:75px ; width: 1000px; margin: 0 auto; } .history{ float: left; width: 375px; } .youtube{ float: right; width: 375px; } #footer{ width: 1000px; clear:both; width:100%; } /* 中央寄せ */ .center{ text-align: center; }
- 締切済み
- CSS
- <div>でレイアウトすると上下に空白が出る
現在cssを独学で勉強中です。 どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト しようとしています。 下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の 上下に20pxくらいの空欄ができます。 これを出ないようにする方法はありますでしょうか？ というか、記述としては合っているのでしょうか？ 一応いろんなサイトを参考にして記述してはいます。 また、IEとfirefoxでは空欄の出方が違います。 たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけると ありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが 今度はSafariでその分要素自体が小さくなってしまいます。 宜しくお願いします。 ---HTML（一応DTDの部分から載せておきます）--------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container"> <div id="boxA"> A（ヘッダ） </div> <div id="wrapper"> <div id="boxB"> B（メインカラム） </div> <div id="boxC"> C（サイドバー1） </div> </div> <div id="boxD"> D（サイドバー2） </div> <div id="boxE"> E（フッタ） </div> </div> </body> </html> --- css ----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }
- ベストアンサー
- HTML
- StyleSheet：float 使用時、テキストが指定幅を超える
お世話になります。 スタイルシートの設定について、質問させてください。 下記のようなページを作ったところ、 main_left内のテキストが指定した400pxを超え、 main_rightがmain_leftの次の段落に回り込んでしまいます。 テキストが400を超えないようにするには どうすればよいでしょうか？ もっと具体的に言えば、 http://www.geocities.jp/multi_column/float/sample/float.html このサイトのようにしたいだけなのですが、 どこが間違っているのかがわからず困っています。 --------------------------------------- index.html --------------------------------------- <html><head><link rel="stylesheet" href="main.css" type="text/css" /></head> <body> <div id="main"> <div id="main_left"> 123456789012345678901234567890123456789012345678901234567890</div> <div id="main_right"> 12345678901234567890123456789012345678901234567890</div> </div> </body></html> --------------------------------------- main.css --------------------------------------- #main { width:600px; } #main_left { float:left; width:400px; background-color:#CCFF99; } #main_right { float:right; width:190px; background-color:#FFCC99; } --------------------------------------- 以上、ご回答よろしくお願いいたします。
- ベストアンサー
- HTML
- 段組みレイアウトがfloatleft上手くいきませ
先程の投稿は、一度削除させて頂きました。 再度、投稿しなおします。 なんとか、以下の画像のところまで持ってくることが出来ました。 おかしなところ。 Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです） Q2 全体が、centerに行かない、、、。左によってしまっております。 以上２点です。 宜しくお願いします。 失礼致します。 こんにちは。ycqと申します。 html+CSSでサイトを作っています。 簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。 おかしい所がございますでしょうか？ Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定 お時間がございましたら、どうぞ、宜しくお願いいたします。 失礼致します。 index.html*************************** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu"> <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;
- ベストアンサー
- CSS
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困
htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困っています。 2レベルまでの階層ならば、まだわかるのですが、3レベル以上になった場合に思い通りに動作させることができなくなってしまいます。 具体的には、下で記述した場合、 <div id="test"> テスト </div> が、右寄せにならないのですが、何がいけないのでしょうか？ 【-------------html-------------】 <DIV id="wrap"> <div id="head"> <div id="logo"> ロゴ配置予定 </div> <div id="test"> テスト </div> </div> <div id="menu"> メニュー </div> <div id="left"> レフト </div> <div id="right"> メインコンテンツ </div> <div id="foot"> フッタ </div> </dib 【-------------css-------------】 /* レイアウトの設定*/ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:600px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:600px; height:350px; background-color:#CC9999; div#logo{ position: absolute; float: left; width:200px; height: 30px; } div#test{ width:100px; height: 30px; float: right; } } /* ヘッダーの設定*/ #menu{ width:600px; height130px; background-color:#CC9900; } /* 左側の設定*/ #left{ width:150px; height:300px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:450px; height:300px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:30px; background-color:#CCFFCC; clear:both; }
- ベストアンサー
- その他（プログラミング・開発）
- html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容
html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容を持っていきたいのですが、どうしてもうまくいきません！ 解決できる方がいましたら、どうかご教示願います！ <style type="text/css"> <!-- * { padding : 0 ; margin : 0 ; } #wrapper { width : 700px; margin-left : auto ; margin-right : auto ; background-color : #eeffff ; } #header { width : 700px; height : 150px ; background-color : #335555 ; } #navigation { /* background-color : #cceeee ; */ width : 300px; float : left ; } #navigation h2 { width : 150px; background-color : #99bbbb ; } #navigation ul { width : 150px ; } #navigation li { width : 150px ; height : 30px ; } #navigation a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #content { background-color : #eeeeee ; width : 350px; float : right ; } #subcontent { width:200 float : left ; clear :both ; } #subcontent h4 { width : 150px; background-color : #99bbbb ; } #subcontent ul { width : 150px ; } #subcontent li { width : 150px ; height : 30px ; } #subcontent a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #thirdcontent { background-color : #eeeeee ; width : 500px; float : right ; } #footer { background-color : #335555 ; width : 700px ; clear : both ; } //--> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>pppppppppppppppppppppppppppp</h1> </div> <div id="navigation"> <h2>pppppppp</h2> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppp</a></li> <li><a href="#">pppppppp</a></li> </ul> </div> <div id="content"> <h2>welcome to my hp</h2> <br> <h3>ppppppp</h3> <p>ppppppppppp</p> <h3>pppppppp</h3> <br> <p>pppppppp</p> </div> <div id="subcontent"> <h4>この横にカテゴリーを配置させたいのです</h4> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">ppppppppp</a></li> </ul> </div> <div id="thirdcontent"> <h4>カテゴリー(これを一段上に)</h4> <br> <h5>pppppppppp</h5> <p>ppppppppp</p> <h5>ppppppp</h5> </div> <div id="footer"> <br> </div> </div> </body> </html>
- ベストアンサー
- HTML
