- ベストアンサー
ＩＥの余白とマージン
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
えーと、昨日答えたものですが、 文字を入れたいのですか。 ならば、私が書いたものに上乗せすれば簡単に、尚且つ、 IEでも、NN・Neでも何でも出来ます。 ようは簡単です。 まず、下にあるものに今度はこれを付け加えればいいのです。 <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <body leftmargin="Ｘ" topmargin="Ｘ"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"leftmargin="Ｙ" topmargin="Ｙ"> /*テーブルにBOOYと同じようにつけるだけ <tr> <td>ここに内容を描く </TR> </TABLE> </BODY> </HTML> </BODY> </HTML> これは、昨日も書きました通り、 まず、ＢＯＯＹの <body leftmargin="Ｘ" topmargin="Ｘ"> には、それぞれどれだけ離したいのかを書きます。 あなたの場合は、Ｘ＝０ だと、いいです。 あと、 ＴＥＢＬＥの <teble leftmargin="Ｙ" topmargin="Ｙ"> は、昨日書きますたが、 leftmarginは、横 topmarginは、縦のスペースを制御するものですから、 横は、０ 縦は、文字の分だけ離せばいいのでは？ あと簡単な方法として、 <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <body leftmargin="0" topmargin="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>文字文字・・・ <table width="100%" border="0" cellpadding="0" cellspacing="1"> <tr> <td>ここに書きたい内容ゑ記入する</td> </tr> </table> </td> </tr> </table> </TR> </TABLE> </BODY> </HTML> </BODY> </HTML> と入れておけば、いいです。 何のことはありません。これは、テーブルの間に、文字を入れて、 その下にテーブルを入れたものです。 こうすれば、簡単に出来ます。 簡単でしょう。 これは、昨日の簡単な応用です。 無論、そのためには、何回も何回もＨＴＭＬとかを書かなければ分からないことなのですが、それをするだけの価値はあるでしょう。 とにかく頑張っていいホームページが出来ることを祈っています。 以上
その他の回答 (2)
- uduki4
- ベストアンサー率42% (69/163)
私は、こうしています。 これは、ＩＥでも、ＮＮでも同じ事になるのですが、 <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <body leftmargin="Ｘ" topmargin="Ｘ"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> <tr> <td>ここに内容を描く </TR> </TABLE> </BODY> </HTML> </BODY> </HTML> 解説しますと<body leftmargin="Ｘ" topmargin="Ｘ">で、 Ｘのところに、－２０ならそう書いておけばいいんです。 これだと、上にもかきました通り、どのブラウザーでみてもいいんです。 leftmarginは、横 topmarginは、縦のスペースを制御するものですから、 テーブルの入れるとテーブル内の制御をする事になります。 当然、ＢＯＯＹタグの中に入れれば、ＢＯＯＹタグの中の制御をする事とあります。無論％も出来ますから、何ら問題はないのです。 私は、これを、ＨＴＭＬダグ辞典の中で見つけましてそれを採用したまでです。 ですから、このような事を書いてくる前にでも、きちんとダグ辞典などをみて、自分で、創意工夫することが大切ですよ。 まあ今回は、私の知っていることでしたので、 答えましたけど、 とにかく、いいホームページができることを祈っています。 以上
- lmeelm
- ベストアンサー率52% (18/34)
こんな感じでどうでしょう。 <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY> <TABLE border="0" width="100%" height="100%" style="position : relative;top : -20px;"> <TR> <TD valign="top">ここに内容</TD> </TR> </TABLE> </BODY> </HTML>
補足
回答ありがとうございました。 補足ですが、ＩＥのページ設定の余白の部分に文字を入れたいということなのです。
関連するQ&A
- ネットスケープで上に余白があいてしまいます
お忙しいところすみません。どうしたら良いのか分からないので、教えていただけると大変うれしいです。 ＩＥだと上の余白がなくちゃんと表示されるのですが、ネスケで見ると上にかなりの余白があいています。マージンを２パターンで指定しているのですが、なぜなのでしょうか？ body { margin-left: 0px; margin-top: 0px; margin-height: 0px; margin-right: 0px; margin-bottom: 0px; } 何かタグが足りないのでしょうか？ どうぞよろしくお願いします。
- ベストアンサー
- HTML
- webページの上余白をなくす方法
お世話になります。 webページ作成について困っております。 htmlで、ページ内の表中に画像を配置しています。表中の画像がそのページの一番上にくっついた状態(上部マージンなし)にしたくて、下記のようなタグをつけてみたのですが、わずかにまだ上に余白が残ってしまいます。 この余白を消して、ページの一番上から画像を表示させる方法を教えてください。 １．<body topmargin="0" marginheight="0"> この方法と、 ２．スタイルシートで <style type="text/css"> <!-- body { margin: 0px; } --> </style> この２つを試してみましたが、わずかに上部に余白がのこってしまいました。 よろしくご回答お願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- WindowsのIEで、スタイルシートのfloatがずれてしまいます
スタイルシートの「float」についてなんですが、 ------------------------------------------------------------------- <html> <head> <title>メニューテスト</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #menu{ float: left; width: 170px; margin-top: 0px; margin-left: 8px; } --> </style> </head> <body> <div id="menu">あいうえお</div> </body> </html> ------------------------------------------------------------------- 上記のようにすると、WindowsのIE5以降で見たとき、 「あいうえお」のマージンが8pxと指定してあるにもかかわらず、16pxほど空いてしまいます。 「float」を外せば正常に表示されます。 他のブラウザでは正常に表示されますので、Win IEのみの現象だと思うのですが 何か良い解決方法はないでしょうか？ よろしくお願いします。
- ベストアンサー
- 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
- フッターの上へのマージンがあけれない
この度フルＣＳＳでサイトを作ってFirefoxでブラウザチェックしたのですが、フッターの余白がfirefoxであいていませんでした。 ＩＥ上では上へ２０ｐｘあいているのですが。。。 ページの簡単な内容は下記の通りになります。 Firefoxで「c」のフッターの上部にマージンを調整するにはどうしたらいいのでしょうか？ どなたか教えて頂けたら助かります。 <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"> <!-- #a { float: left; width: 200px; background: #0066FF; } #b { float: left; width: 200px; margin-left: 20px; background: #FF0066; } #c { clear: both; width: 500px; margin-top: 20px; background: #CCCCCC; } --> </style> </head> <body> <div id="a">左コンテンツ </div> <div id="b">右コンテンツ</div> <div id="c">フッター</div> </body> </html>
- 締切済み
- CSS
- フレーム構造のページで左右上下の余白を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
- CSSの左右よせのマージン、IEとFirefoxで表示が違う
CSSの左右よせのマージンについて、どうしても原因が分からない事があるので質問します。 下記ファイル（マージンが分かるようにボーダー設定してます） -----------htmlファイル-------------- <html> <head> <title>CSSテスト</title> <link href="test1.css" rel="stylesheet" type="text/css"> </head> <body> <div class="sotowaku"> <div class="main_l"> 左側の写真です。 </div><!--end main_l--> <div class="main_r"> 右側の本文です。 </div><!--end main_r--> <div class="clear"><br></div><!--clear--> フッター </div><!--end sotowaku--> </body> </html> ------------------------------------- -------------cssファイル------------- body { text-align: center; margin: 0px; } .sotowaku { width: 700px; margin: 0 auto; border: solid 1px #999999; } .main_l { width: 150px; float: left; margin-top: 0px; margin-left: 25px; border: solid 1px #999999; } .main_r { width: 490px; float: right; margin-top: 0px; margin-right: 10px; border: solid 1px #999999; } .clear { clear: both; } ------------------------------------- をIEとFirefoxでプレビューすると 中央700pxの幅の中に ｜25px｜写真150px｜25px｜本文490px｜10px｜ となるはずなのに、 IE６では左25pxと右10pxのマージンが大きく(倍くらいになってます）、左右のメインが重なってしまいます。 Firefoxではちゃんと表示されます。 どこか記述がおかしいのでしょうか。 マージン設定はしないほうがいいのでしょうか。 どうすればIEでもちゃんと表示されるようになるでしょうか。 いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。
- ベストアンサー
- HTML
- ページのマージン・・・
ページをブラックの背景で制作したいのですが、ブラウザで表記したところ、IEやOperaなど、どのブラウザでも、上下左右に20px程度の白い余白部分が現れ、その内側がブラックの背景で表示されます。 スタイルシート上でも、body{margin:0px;}の指定をしているのですが、原因がわかりますでしょうか。
- ベストアンサー
- HTML
- マージン部分の表示がうまくいかない
素朴な質問です。 キミドリのDIVの中にテキストが入る「A（青）」のDIVが入れ子になっています。 テキスト量に応じてそれぞれ縦のサイズを可変させます。 親のキミドリを基準に上下から50pxのマージンを取る意図で「A（青）」に“margin-top:50px”“margin- bottom:50px”を設定しているのですが、Safari3、Firefox3では上下50pxのマージン部分がキミドリで表示されません。 おそらく表示されないのが正しいCSSの仕様通りだとは思うのですが、マージン部分もキミドリで表示したい場合ははどのようにソースを書けばいいでしょうか？ 親のキミドリにpaddingを設定するしかないのでしょうか？ 以下ソースです。 ご教示よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>サンプル</title> </head> <body style="margin:0px;padding:0px;"> <div style="background:#0F0;width:220px;"> <div style="width:100px;background:#00F;margin-top:50px;margin-bottom:50px; margin-left:10px;">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</div> </div> </html> </body>
- 締切済み
- 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
補足
回答ありがとうございました。 補足ですが、ＩＥのページ設定の余白の部分に文字を入れたいということなのです。