• ベストアンサー

webページの上余白をなくす方法

お世話になります。 webページ作成について困っております。 htmlで、ページ内の表中に画像を配置しています。表中の画像がそのページの一番上にくっついた状態(上部マージンなし)にしたくて、下記のようなタグをつけてみたのですが、わずかにまだ上に余白が残ってしまいます。 この余白を消して、ページの一番上から画像を表示させる方法を教えてください。 １．<body topmargin="0" marginheight="0"> この方法と、 ２．スタイルシートで <style type="text/css"> <!-- body { margin: 0px; } --> </style> この２つを試してみましたが、わずかに上部に余白がのこってしまいました。 よろしくご回答お願いいたします。

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

  • ベストアンサー
  • Randomize
  • ベストアンサー率70% (38/54)
回答No.5

サンプルの提示ありがとうございます。 拝見させていただいたところ、BODYタグの余白は消去できていますが、TABLEタグのボーダー関連の余白が消せていないですね。 No.3さんの回答のようにTABLEタグの属性に <TABLE border="0" cellspacing="0" cellpadding="0"> と3個の属性をつけてあげてください。 前から順番に、表の外郭の線の幅を0にする、表の内側の線の幅を0にする、セルの内余白を0にすると言う意味です。 サンプルを見させていただいたところ、ビルダーで編集しているようですね。表の属性を開きまして、表のタブより、罫線の幅を0に指定(空白はNGです)、セル内の余白も0に指定、更にその下の枠表示のチェックをONにしたうえで(OFFだと右側のテキストボックスの値が無視されます)枠表示の右側のテキストボックスに0を指定してあげると同じことができます。 おそらくそれでいけると思います。私の環境ではできましたのであわせて報告いたします。

take4410
質問者

お礼

ご回答ありがとうございました！ ご回答のとおりやってみたところ、余白がなくなり、ぴったり希望通りできました。 わかりやすいご説明、かつご丁寧にありがとうございました！

その他の回答 (4)

  • amuamu00
  • ベストアンサー率62% (36/58)
回答No.4

CSSの中に、下記表記を追加するといかがですか？ *{margin:0px; padding:0px; }

take4410
質問者

お礼

ご回答のとおりやってみましたができなかったんですよ… どうもありがとうございました。

  • DOUGLAS_
  • ベストアンサー率74% (397/534)
回答No.3

＞No.1,No.2のご回答のとおり試してみたのですが、変化がありませんでした。 　私のパソコンで <CENTER> <TABLE> を <CENTER> <table border="0" cellpadding="0" cellspacing="0"> にしてから見ると、ちゃんと画像が上辺に張り付いて見えますけど。。。

take4410
質問者

お礼

ご回答ありがとうございます。 ご回答の通りやってみたら思い通りに直すことができました。 どうもありがとうございました。

  • Randomize
  • ベストアンサー率70% (38/54)
回答No.2

スタイルシートの記述をしているのでしたら、Paddingを0pxにしてあげるとできますよ。 padding:0px; と言うようにMarginと同じ使い方でいけます。Marginが領域の外余白に対してPaddingが領域の内余白になるのです。 ぱっと見つけられた分かりやすそうな図解のアドレスを貼り付けておきますね。

参考URL：
http://hac-design.com/css/margin.html
take4410
質問者

補足

早速のご回答ありがとうございます。 ご回答のとおり試してみたのですが、変化がありませんでした。 下記に試しにアップしてみましたが、どこかまずい箇所がありますでしょうか。 http://highland.hakuba.ne.jp/~takezo/test.html お手数をおかけしますがよろしくお願いいたします。

  • DOUGLAS_
  • ベストアンサー率74% (397/534)
回答No.1

<body topmargin="0"> <table border="0" cellpadding="0" cellspacing="0" ～～～ みたいな感じでイケそうですが。。。

take4410
質問者

補足

早速のご回答ありがとうございます。 No.1,No.2のご回答のとおり試してみたのですが、変化がありませんでした。 下記に試しにアップしてみましたが、どこかまずい箇所がありますでしょうか。 ​http://highland.hakuba.ne.jp/~takezo/test.html​ 現在は、回答番号No.2の方のやり方でアップしてありますが… お手数をおかけしますがよろしくお願いいたします。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • フレーム構造のページで左右上下の余白を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
  • ＩＥの余白とマージン

    ＩＥ限定で、あるページのみページ設定の余白以下にマージンを指定することは可能でしょうか。 雰囲気としては <style type="text/css"><!-- body { margin-top: -20px;} --></style> のように余白よりマイナスにする感じなのですが。 ＃やりたいのはＴＯＰマージン。

    • ベストアンサー
    • CSS
  • IEとスタイル

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> というタグがあります。 IE5,6,7にスタイルで対応させるには <style type=text/css>body{margin:0}</style></head><body> でよいですか？

    • ベストアンサー
    • HTML
  • 余白0でできる右側の隙間

    はじめて質問させて頂きます。 現在作成中のホームページなんですが、 BODYのeftmargin,topmargin,marginwidth,marginheightの数値をそれぞれ0に設定し、背景色を白にしそこへ幅100％背景色赤の表を挿入しました。 普通マージンの設定が0になっているのです、表の左右に余白は出来ないと思うのですが、右側に余白が出来てしまいます。 ブラウザの更新で読み直すと隙間が消えるのですが、同じ設定の別のページを表示させると、また同じように余白ができます。 これは仕方がないことなのでしょうか？ なにか解決方法をご存知の方、よろしくお願いします。

    • ベストアンサー
    • 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を真中にもってくる方法などソースについて

    画面の中心にdivをもってきて、ちなみに上と下は１００％にしたいです。上下には余白なし。 ｃｓｓはheadに書く方法で、このソースは何がいけないのか、教えていただけたら助かります。 ちゃんと最初にdoctypeも書いてます。 <head> <style type="text/css"> div{height:100%;margin:0 auto 0 auto;} </style> </head> <body> <div></div> </body> まずdivがセンターにならないです。 余白も０にならないので、 ｃｓｓの部分で body{margin:0;} body　でマージンを０にすると、divは余白０になりますが、 センターにはいかないのです。 申し訳ありません。いろいろほかの方質問を参考にしましたが、できませんでした。 div align=centerもうまくいかなかった・・・

    • ベストアンサー
    • HTML
  • NN4.xで右と下の余白をなくす方法

    BODYのマージンを0、テーブルのWIDTHとHEIGHTを100%で 指定しても、NN4.7だとウィンドウの右と下部分に 余白ができてしまいます。 IEで表示させると、きちんと表示されるのですが。。。 例えば、 <BODY BGCOLOR="#FFFFFF" TEXT="#000000" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0"> <TABLE WIDTH="100%" HEIGHT="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD BGCOLOR="#000000"><IMG SRC="spacer.gif" WIDTH="100% HEIGHT="100%"></TD> </TR> </TABLE> </BODY> こんなソースにしたら真っ黒表示になると思うのですが NN4.7だと右と下に白い余白が…。 # ちなみにspacer.gifは透過画像です。 過去ログで同様の質問があったのですが、 そのときの方はBODYの指定と同様にスタイルシートにも BODY{margin : 0;} の指定をしたらうまくいったそうです。 私もやってみましたが、同じでした。 下記サイトは、NN4.7で見てもきちんと右と下の余白が 無く、キレイに表示されているので、できないことは ないと思うのですが、お手上げです。。。 どなたかご教授お願いいたします。 http://www.living-plus.jp/

    • ベストアンサー
    • HTML
  • ネットスケープで上に余白があいてしまいます

    お忙しいところすみません。どうしたら良いのか分からないので、教えていただけると大変うれしいです。 ＩＥだと上の余白がなくちゃんと表示されるのですが、ネスケで見ると上にかなりの余白があいています。マージンを２パターンで指定しているのですが、なぜなのでしょうか？ body { margin-left: 0px; margin-top: 0px; margin-height: 0px; margin-right: 0px; margin-bottom: 0px; } 何かタグが足りないのでしょうか？ どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • html5でページ上部に余白ができる

    HTML 4.01 Transitionalで制作していたページを、DreamweaverCS5の変換機能を使って、html5に変換しました。 すると、ページ上部に余白が出来てしまい、直そうと思っても原因が分かりません。 CSSで body { margin: 0; } には指定しています。 あと、コンテンツ部分は <div class="Wraper">　</div> で囲っており、その部分も margin: 0px auto;　にはなっています。 いったい何が原因でしょうか。回答をお願い致します。

  • なぜか余白が…

    スタイルシートで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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する