- 締切済み
ＨＰ作成時の上部の余白について
html+cssを本で勉強している超初心者です。HTML/XHTML&cssという本で指示どうりソースを入力しているのですが、プラウザの画面の上部から約20px程余白が出ます。本の指示でプラウザの画面と 接する形で { margin: 0; } を入力しても移動せず{ margin: -20px margin-left: 0px; }と入力するとプラウザ画面と接します。何が原因か何方か教えて頂けませんか？ よろしくお願いいたします。（IE8です）
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
関連するQ&A
- 最上部の余白の原因
こんばんは、質問させてください。 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
- html5でページ上部に余白ができる
HTML 4.01 Transitionalで制作していたページを、DreamweaverCS5の変換機能を使って、html5に変換しました。 すると、ページ上部に余白が出来てしまい、直そうと思っても原因が分かりません。 CSSで body { margin: 0; } には指定しています。 あと、コンテンツ部分は <div class="Wraper"> </div> で囲っており、その部分も margin: 0px auto; にはなっています。 いったい何が原因でしょうか。回答をお願い致します。
- 締切済み
- HTML
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- なぜか余白が…
スタイルシートでmarginを0pxに設定し、テーブルを幅100％、縦100％に設定したあとでjavascriptを設定すると、どうしても上部に余白が出来てしまいます。 javascriptを設定しないときは <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } --> </STYLE> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="1" width="100%" height="100%" bgcolor="#000000"> <TBODY><TR><TD></TD></TR></TBODY></TABLE> </BODY> </HTML> と正常なんですが、javascriptを設定すると、 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } --> </STYLE> <SCRIPT Language="JavaScript"> <!-- document.write("<img src=cgi-bin/sasuke.cgi?sasuke="); document.write(document.referrer+"' width=1 height=1>");// --> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="1" width="100%" height="100%" bgcolor="#000000"> <TBODY><TR> <TD></TD> </TR> </TBODY></TABLE> </BODY> </HTML> のようにどうしても上部に余白が出来てしまいます。 このスクリプトを設定したときのみ、こうなるので非常に困っています。（ＨＰのデザイン上…） どなたか、よい方法がありましたら教えてください。m(__)m なお、スクリプトはアクセス解析です。 当方はwindows98 ie5.5の環境で作成しています。 javascriptはこの場合はhtml内に組み込んでいますが、××.jsで呼び出しをかけています。 よろしくお願いします！
- ベストアンサー
- HTML
- CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう
DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。 そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。 分かる方いらっしゃったら教えて下さい。 ソースはこれです↓ 【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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }
- ベストアンサー
- ホームページ作成ソフト
- safariで見るとページ上部に余白ができてしまう
以下のhtmlとcssをChromeで見るとページ（サイト）上部に余白がないのですが、Safariで見ると余白ができてしまいます。どうやったら上部（と下部）の余白がどのブラウザでも表示されないようになりますでしょうか？初歩的な質問で申し訳ありませんがネットで検索してもわからなかったので、宜しくお願いいたします。 [html] <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="index.css" /> <title></title> </head> <body> <div id="wrap"> <div id="inner"> <div id="header"> <img src="image_basic/logo.png" width="450" height="140" alt="veggietimeslogo" /> <img src="image_basic/slide.jpg" width="920" height="450" alt="slide2" /> </div><!-- /header --> <div id="mainwrap"> <div id="firstwrap"> <p>ここは一段目<br />ここは一段目<br />ここは一段目</p> </div><!-- /firstwrap --> <div id="middlewrap"> <p>ここは二段目<br />ここは二段目<br />ここは二段目</p> </div><!-- /middlewrap --> <div class="clear"><hr /> </div><!-- /clear --> </div><!-- /mainwrap --> <div id="sidewrap"> <p>ここはサイドバー<br />ここはサイドバー<br />ここはサイドバー</p> </div><!-- /sidewrap --> <div class="clear"><hr /> </div><!-- /clear --> <div id="footer"> </div><!-- /footer --> </div><!-- /inner --> </div><!-- /wrap --> </body> </html> [css] @charset "UTF-8"; /* CSS Document */ body{ background-color:#000000; text-align:center; margin:0;} #wrap{ background-color:#ffffff; margin:0 auto; width:960px; text-align:left;} #inner{ margin:0 20px;} #mainwrap{ float:left; width:610px;} #firstwrap{ float:left; width:300px;} #middlewrap{ float:right; width:290px;} #sidewrap{ float:right; width:290px;} .clear{ clear:both;} .clear hr{ display:none;} p { font-family:Tahoma, Geneva, sans-serif}
- 締切済み
- ホームページ作成ソフト
- ページ上部の余白をなくしたい（ＣＳＳ）
初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <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
- WordPressのヘッダー上部の余白
WordPressでテーマを自作しているのですが、ヘッダー上部に余白ができてしまいます。 調べてみると、多くの場合は http://hello-design-world.com/2011/04/wordpress31head.html のように管理バー関連の設定に問題があったようなのですが、私の場合は管理バーの表示を外しても直りません。 以下のようなソースでやっているのですが、何が原因かわかる方いたら教えてください！ ※まだ作成途中なので、ファイルは以下の２つだけです。 ----------------------php--------------------- <!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/TR/xhtml/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> </head> <body> <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo('description'); ?></p> </div> <!--ヘッダー終わり --> <!-- コンテンツ --> <div id="content"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <p class="postinfo"> <?php echo get_the_date(); ?> <?php the_time(); ?> | カテゴリー：<?php the_category(', '); ?> </p> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div> </div> </body> </html> ----------------------css--------------------- /* Theme Name: Testtheme Theme URI: Description: テストテーマ */ /* コンテナ */ div#container { width: 1000px; margin-right: auto; margin-left: auto; } /* ヘッダー */ div#header {background-image: url(header.jpg); margin-top: 0px; margin-left: 0px; margin-bottom: 20px} div#header h1 {font-size: 1.875em; font-weight: bolder; padding: 10px 0px 0px 10px; margin-top: 0px} div#header h1 a {text-decoration: none; color: #ff8c00} div#header p#desc {font-size: 1em; color: #ffffff; font-weight: bolder; padding: 0px 0px 10px 10px} /* 記事 */ div.post {padding: 15px; margin-bottom: 30px} div.post h2 {background-color: #1e90ff; font-size: 1.3em; padding: 10px; margin: 0} div.post h2 a {text-decoration: none; color: #ffffff} div.post p {font-size: 0.875em; line-height: 1.6; margin-top: 10px} p.postinfo {color: #0c8bcd; text-align: right; margin: 20px 0 0; clear: both} p.postinfo a {color: #0c8bcd}
- ベストアンサー
- ブログ
- IE6で画像の下に余白が入ってしまいます。
CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }
- ベストアンサー
- 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
- 2022年10月12日に購入したEW-M973A3Tを1ヶ月程度使用しています。主にWin10のPCから印刷を行っており、現在のプリント枚数は675枚で主にA4サイズのモノクロ印刷です。しかし、メンテナンスボックスの交換が近づいており、ボックスの空き容量がほとんどありません。さらに、インクの量も全ての色が1/3程度減っています。故障ではないか心配です。
- 【1ヶ月使用レポ】EW-M973A3Tのプリンターの現状を報告します。購入してからのプリント枚数は675枚で、ほとんどがA4サイズのモノクロ印刷です。しかし、メンテナンスボックスの空き容量がほとんどなく、インクの量も全ての色が1/3程度減っています。故障ではないか心配です。調査の上、対処方法を教えていただきたいです。
- 【使用状況レポ】EW-M973A3Tのプリンターを1ヶ月使用して気になる点があります。現在のプリント枚数は675枚で、ほとんどがA4サイズのモノクロ印刷です。しかし、メンテナンスボックスの空き容量がほとんどなく、インクの量も全ての色が1/3程度減っています。故障ではないか心配です。アドバイスをいただけると助かります。
補足
ご回答有難うございました。下記のソースの部分なんですが、なんで本のとうりソースを入力しているのに上部がプラウザの画面と接しないのがわからないのです。なんか本によると古いOperaではpaddingとプロパティを指定しないと余白は消せないと書いてありますが。（アンインソール済みですが） 皆さんこのようになるのですか？出来たら本のとうりの画面になってくれたらと願っています。なんとか教えて頂けませんか？よろしくお願い致します。 body {background-color: #aaccff; background-image: url(back-border.png); background-repeat: repeat-y; background-position: top center; margin: 0; padding: 0;} このmargin: 0;を-20px;にしたらプラウザの画面と接しましたが、左側が少しカットされています。 この状態で本を進めていくと、やはり途中でおかしな画面になってしまいますので、なんとかならないかとご質問した次第です。あと、本の最初からの入力でも上部が本の写真と違って余白大きくなっています。私のパソコンがおかしいのでしょうか？ よろしくお願い致します。