html,css初心者です。ヘッダーの余白について

前へ 次へ
このQ&Aのポイント
  • ヘッダーの上部分に余白ができてしまいます。HTMLとCSSをはります。
  • bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています
  • ヘッダーの余白について教えて下さい。
回答を見る
  • ベストアンサー

html,css初心者です。ヘッダーの余白について

ヘッダーの余白について教えて下さい。 どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="font.css" type="text/css"> </head> <body> <div id="header"><!--/ #header --> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。

  • HTML
  • 回答数3
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • qualheart
  • ベストアンサー率41% (1451/3486)
回答No.3

body全体にも標準でマージンがあるので、bodyタグに対してmarginを0にセットすれば余白はなくなります。 body { margin: 0 auto; } これでヘッダー上部分の余白がなくなります。 ご参考まで。

xxxx17xxxxx
質問者

お礼

ありがとうございます！完璧になおりました。 本当に助かりました！

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

html,bodyのmarinだけでは消えないです。 HTMLですが、ちょっと変則的なので直してから説明します。 ウェブ標準HTML4.01strict+CSS2.1とします。 divのidやclass名は文書構造を補完するために使用します。 　リンクやjavascriptのターゲットでない限りidでないほうが良い、何箇所も登場する可能性があるので・・ (下記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>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- /* わかりやすいように色分け */ body{background-color:gray;} div.header{background-color:silver;} div.section{background-color:yellow;} div.footer{background-color:aqua;} /* 以下、上から順番に行頭の/* を取り除いていく★ */ /* html,body{margin:0;padding:0;} /* div.header,div.section,div.footer{margin:0;} /* div.header h1,div.section h2,div.footer h2{margin:0;line-height:1.6em;} /* div.header p,div.section p,div.footer p{margin:0;line-height:1.6em;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<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> ＿＿<address>&copy; ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

  • t_ohta
  • ベストアンサー率38% (5071/13250)
回答No.1

html, body { margin: 0px; } で消えると思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ブラウザ上部に余白があります。

    近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースで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>

  • ＣＳＳが反映されません

    勉強不足は承知ですが、もうどうにもお手上げ状態です。 質問させてください。 ＣＳＳを勉強しているのですが、反映されません （本や、サイトのサンプルとおり記述しても、です） （タグ、スペルの間違いがないかは１０回以上確かめています） （ＣＳＳサイトのサンプルをクリックすると、それは表示されます） ●ヘッダー内に指定すると、反映されない ○例 　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- p.ehon{ font-size:100px; color:red; } --> </HEAD> <BODY> <p.ehon> 「絵本」の色は赤色です </p> </BODY> </HTML> ・・・結果・・・ ブラウザには標準フォント（色、サイズ）で ”「絵本」の色は赤色です” と表示される 文字色は font-color:red font-color:#rbg番号 などしてみても、黒のまま 文字サイズも３０ｐｘ、５０ｐｘ、１００ｐｘとしてみているが、結果は同じ文字サイズ （標準）になる ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- body{color:#CCFFCC} h1{color:#996633} --> </HEAD> <BODY> <h1> 絵本の色は赤色です </h1> </BODY> </HTML> ・・・結果・・・ ブラウザになにも表示されない ●ＢＯＤＹ内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ ブラウザに何も表示されませんでした ○２回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズそれなりの大きさに。文字色は赤で表示されました ○３回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・

  • ホームページのヘッダ部分について

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="JA"> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css"> <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="text/javascript"> <TITLE>○○○○</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="css1.css"> <meta name="keywords" content="△,△,△,△,,△,△,"> <meta name="description" content="●●●●●"> </HEAD> <BODY> … となっているのですが、無駄な部分はありますか？ 順番などは合ってますか？ また、こうしたほうがいい、などとアドバイスがあればぜひよろしくお願いいたします。

  • IEでCSSの中央寄せが効かない

    common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？

    • ベストアンサー
    • HTML
  • ＣＳＳ今度は外部ファイル！

    前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名　hp-name.css ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか？ それとも、外部ファイルの書き方がいけないのでしょうか？ 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした

  • HTMLの文法チェックをするとCSS関連でエラーが出て困っています。

    http://validator.w3.org/ http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html でHTMLの文法チェックをすると， <body><style TYPE="text/css"><!-- という行があるとエラーが出ます。 実際のHTMLは外部スタイルシートを使っているのですが <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>タイトル</title> <meta name="Keywords" content="キーワード "> <meta name="Description" content="内容説明"> <link rel="stylesheet" href="./css.css" type="text/css"> </head> <body> <div id="page"> 以下略 であり，<body>タグの後ろは<div>タグなのですが，何故かそう認識されます。 スタイルシートの指定がおかしいのかと考えたのですが， いくら検索しても<head></head>間に <link rel="stylesheet" href="./css.css" type="text/css"> を入れるとしか書いてなく理由がわかりません。 ちなみにcss.cssの内容は *{} というような内容の羅列のみで，その他の情報は一切入れていません。 どこがおかしい点なのかわからず悩んでおります。 理由のわかる方いましたら是非ご教授願います。

    • ベストアンサー
    • HTML
  • 外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう

    Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。

    • ベストアンサー
    • HTML
  • ｃｓｓでtableをセンター表示

    現在dreamweaverを使用してホームページを作成中のHTML初心者です。 外部cssを使って、各ページをセンター表示させたいのですが、うまくできません。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>***</title> <link rel="stylesheet" href="common.css" type="text/css" > </head> <body> <div class="header"> このcss[header]でマージン指定をしたのですが、 テーブルは右側に寄ったままです。 どなたかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • safariだけ、display:block;の周りの余白を消すことができず困っています

    safariだけ、display:block;の周りの余白を消すことができず困っています。 cssでbr{line-height:0;}にしているのですが、safariだけリンクされない余白が間にできてしまいます。ie、firefoxでは大丈夫です。 たくさん調べましたがわかりません。よろしくお願いします。 以下ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a{display:block;height:100%;width:100%;line-height:200%;text-decoration: none;} a:hover{background-color:#ffcccc} br{line-height:0;} --> </style> </head> <body> <p> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> </p> </body> </html>

    • ベストアンサー
    • HTML
  • ファイヤーフォックスでCSSが読み込まれません

    会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する