- 締切済み
テーブルの上に余白ができてしまいます
パソコンから見たときはなんともないのですが、携帯から見ると大きい余白がでてしまって困っています。 解決方法を教えていただけませんか？ それと、できれば下記のHTMLの添削をしてもらいたいです。 <html> <head> <meta http-equiv="Content-type" content="text/html; charset=shift_JIS"> <style type="text/css"> <!-- a:hover { position: relative; top: 1px; left: 1px; text-decoration: none; } a img { border: none; } --> </style> </head> <body bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="FFFFFF" text="#000000"> <center> <Table style="margin:-84px 0px 0px 0px" border="0" bgcolor="#336666" cellpadding="10"><tr><td> <div align=center><font size="2">タイトル</font></div> <font size="1"><font color="#000000">本文</font> </body></html>
- xxxx000
- お礼率59% (118/199)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- einn
- ベストアンサー率37% (671/1802)
余白うんぬんの話は、その貼り付けたソースとは別ですよね？ そのソースでは、パソコンのIE8でもクロームでも一切表示できませんでしたよ。 ですので、なんで余白ができるのか、というのが再現できないレベルです。 なので表題に対する回答は致しかねる、というか回答不可能です。 その他の質問である、添削について回答しますね。 HTMLの基本ルールが守られていません。 CSSも不要な数値やクラスもあります。 上から順に、ちょっとずつ書いていきますね。 a:hoverはマウスを乗せたときのデザイン指定ですが、 それを記述するなら、a:link、a:visited、a:activeもCSSで記述しましょう。 CSSで全部指定すると、bodyに要素で指定しているlinkとかvlinkとかalinkとか不要になります。 imgとかcssで指定してますけど、 そのhtml内で使ってませんよね。なのでimgのstyleは不要です。 背景色もCSSで記述しましょう。 テキストカラーもCSSで指定したほうがいいですね。 漠然としたcenterタグも使用しないほうがスマートです。CSSで行いましょう。 table内に何も文章が含まれていないのはなぜですか？ テーブルはそもそも表を表現するためのタグです。 色のついた余白的な飾りとして使うつもりなら、せめてdivを利用しましょう。 さらにそれが表だとしても、tr、td、tableに終了タグを忘れていますよ。 IE8でもクロームでも表示できない一番の原因は、 テーブルのマージンにマイナス表記を使ってることです。（ネガティブマージンといいます） マイナス数値が高すぎて、画面外にぶっとんでいるんです。 値を0に近づけるか、マイナスを取らないと表示できませんよ。 divを使うつもりだったら、CSSのクラスとIDをマスターして下さい。 divにalign=centerという組み合わせは昨今見た記憶が無いです。 fontタグを多用していますが、これも使わずに文字の装飾はCSSで行いましょう。 fontタグはそもそも推奨されないタグです。 また、そのhtmlソースだと、fontの終了タグが一つ足りませんし。 普通、開始タグがあれば、終了タグがあるんです。 開始タグだけで満足してると、色々なブラウザで表示がばらばらになります。 突っ込みどころが満載すぎて、ちょっと突っ込みきれないです。 何のために記述しているのかわからないコードだらけなので、 参考に正しいものを記述してあげる、ということすら難しい。 なので、今までのアドバイスだけで勘弁して下さい…。 HTMLの記述内にfontが使われているので、30代～50代の方でしょうか。 …て、私も30歳くらいですけどね。 昨今の指南書や初心者が勉強するサイトで、 fontを推奨することはまずあり得ないんです。廃止されましたし。 おそらく、質問者様がhtmlの勉強に触れたのは相当昔だと思われます。 とほほさんのサイトがもっともわかりやすく、比較的情報も新しめですので、 そこでみっちり画面とにらめっこして勉強してみて下さい。 HTMLも、CSSも、基本的なことは全て書いてありますので。 http://www.tohoho-web.com/www.htm 気になるサイトがあったら、 そのサイトのソースを開いて覗いてみる癖をつけましょう。 そうすると、どのタグがどんな意味で、 どのスタイルシートがどういう役割か、なんとなくわかってきます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞できれば下記のHTMLの添削をしてもらいたいです。 『ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』は明確に否定されています。 また、 タグの<font>は使えません。 属性のbgcolor,link,vlink,alink,text,align,size,colorも非推奨です。 [HTML]は <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>見出し</h2> <p>本文記事、<a href="./page1.html">旅日記</a>をごらんください。</p> </div> <div class="footer"> </div> とかになります。 スタイルシートは body,html{margin:0;padding:0;} p{margin:0;text-indent:1em;line-height:1.6em;} a img { border: none; } body{backgroung-color:white;color:black;} a:link,a:visited{color:black; a:active{color:yellow;} a:hover,a:focus{color:white;position:relative;top:1px;left:1px;} div,header,div.setion,div.footer{margin:0;} div.header h1{background-color:#336666;padding:10px;font-size:2em;} とかかな・・・ ★参考にされているHTMLの資料は、とても古い十数年前のものと思われます。HTML3.2の頃のもの。HTML4.01の勧告(1999/12)以降は、そのような書き方は廃れました。
関連するQ&A
- borderが1のテーブル
ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？ 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- tableタグでwidthとheightを100%にした時に起こる
tableの中にtableを入れて以下のように表示をさせようと思っています。 (色わけの為四角で表現していますが、実際は同じ色の四角はつながっています) ■□□□■ ■□□□■ ■□□□■ そこで、 <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- td { font-size: 12px} body { font-size: 12px} --> </style> </head> <body bgcolor="#000000" link="#FF0000" vlink="#FF0000" alink="#FF0000" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100%" height="100%" border="0" bordercolor="#AAAAAA" bgcolor="#FFCCCC" cellspacing="0" cellpadding="0"> <tr> <td> <table align="center" width="700" height="100%" border="0" bordercolor="#AAAAAA" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> </td> </tr> </table> </body> </html> というように作成しましたが、直接このページを見るなら問題はないのですが、違うリンクからこのページを見ると ■□□□■× ■□□□■× ×××××× というようになってしまいます。 ですが、更新ボタンを押すときちんと ■□□□■ ■□□□■ ■□□□■ と表示されます。更新ボタンを押さなくても正常に表示させる方法はありますでしょうか？ また、一番目のtableタグはwidthとheightとも100%なのでそれをなくした場合も試しましたが、 ■□□□■ ■□□□■ ■■■■■ と表示されます。 htmlはいろんなサイトを見ながら自己流でやってきたので、間違っている所もあるし、説明がわかりづらいかと思いますが、わかる方がいらっしゃれば教えて下さい。宜しくお願いします。 また、htmlの書き方等、良いわかりやすいサイトや本があればお教え下さい。(自分でもhtmlサイトはお気に入りに入れてますが、他にも良い所があるかもしれないので。)
- ベストアンサー
- HTML
- 横に並べたテーブル
200×200px程度のテーブルを複数（行数や列数はバラバラです）横に並べたいのですが、とりあえず、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ページのタイトル</title> <style type="text/css"> <!-- body{ color:#330000; background-color:#cc3333; } table.a{ background-color:#ffffff; padding:1px; border:1px solid #000000; display:inline; margin:5px; } td.a{ text-align:center; vertical-align:middle; border:1px solid #000000; font-size:small; padding:1px; background-color:#ffffff; } div.center{ text-align:center; } --> </style> </head> <body> <div class="center"> <table class="a"> <tr><td class="a">AAAAAAAAAA</td></tr> <tr><td class="a">AAAAAAAAAA</td></tr> </table> <table class="a"> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> </table> </div> </body> </html> という感じでdisplay:inlineで並べました。 これだとIEでは普通に見えるのですが、Ffだと表示が崩れてしまいました。 どこがいけないのかよくわかりません……。FfやNNでもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。 また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。 よろしくおねがいします。
- ベストアンサー
- HTML
- 表示のソース
ネットのツールバーの中にある表示のツールはどういうときに利用するのでしょうか。下記は一例ですけど、ソースだから掲示板やなんかで大体どこから投稿されたかわかる のでしょうか Quote <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=x-sjis"> <TITLE>新・企業会計実務Q&A掲示板</TITLE> <style type="text/css"> <!-- .mes { border-style: ridge; border-width: 0px 0px 0px 0px; border-color: #f5f5f5; } --> </style> </HEAD> <BODY BGCOLOR="#ffffff" TEXT="#000000" ALINK="#003399" LINK="#0000ef" VLINK="#800080" > Unquote
- ベストアンサー
- その他（インターネット・Webサービス）
- Firefoxでテーブルの外側の背景色が出ない
IE8では中央にテーブルが配置し外側の背景色が出るのですが、Firefoxではテーブルの位置も左側に寄り、外側の背景色がテーブル内と同じ白一色になってしまうのですが、どう直したらいいのでしょうか。 以下、ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows"> <TITLE>○○○</TITLE> <STYLE TYPE="text/css"> <!-- BODY {background:'palegreen';color:#000000;text-align:center;} TABLE {background:#FFFFFF;color:#000000;} CAPTION {background:#FFFFFF;color:#000000;text-align:left;font-weight:bold;} .tmscntr {text-align:center;font-size:14px;font-family:'Times New Roman';} .tmsrght {text-align:right;font-size:14px;font-family:'Times New Roman';} .tmslft {text-align:left;font-size:14px;font-family:'Times New Roman';} SPAN {margin-left:20PX;"}}}}}}}} .cntr {text-align:center;} .rght {text-align:right;} .lft {text-align:left;} A:visited {color:#000099;} A:active {color:#FFFFFF;background:#CCCCFF;} A:hover {color:#DCDCDC;background:#000099;} --> </STYLE> </HEAD> <BODY text="#000000" bgcolor="#FFFFFF" link="#ff3535" vlink="#808080" alink="#ff8040"> <DIV><BR> <TABLE cellpadding=5 cellspacing=0><CAPTION>○○○</CAPTION><TR><TD> <TABLE border="0" cellpadding=5 cellspacing=0><CAPTION>○○○</CAPTION> <TR><TD><b>(1)○○○</b></TD><TD><b>○○○</b></TD><TD colspan="3"><b>○○○○○○</b> <b><font color="#ff0000">○○○</b></font></TD></TR> <TR><TD></TD><TD style={text-indent:24px;}><b>○○○</TD><TD><b>○○○○○○○○○</b></TD></TR> <TR><TD><br><b>(2)○○○</b></TD><TD><br><b>○○○</b></TD><TD colspan="3"><br><b>○○○<b><font color="#008800">○○○○○○○○○</b></font></TD></TR> <TR><TD></TD><TD style={text-indent:24px;}><b>○○○</b></TD><TD><b>○○○○○○○○○</b></TD></TR> <TABLE align="center"><br><br><br> </TABLE> </TD></TR></TABLE></DIV> </BODY> </HTML>
- ベストアンサー
- レンタルサーバ・ASP
- ページの一番上にできた余分な余白の消し方
ページの一番上に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
- CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- ベストアンサー
- HTML
- テーブルの線について
下記のようなＨＰをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか？ ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｔｏｐ</font></td> </tr> <tr> <td><a class="menu" href="">Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>
- ベストアンサー
- HTML
- スクロールバーの色変更（長文）
スクロールバーの色を設定したいのですが、下のように書くとうまく設定できません。 どこがおかしいのでしょうか？ よろしくおねがいいたします。 <html> <head> <style type="text/css"> <!-- body { scrollbar-3dlight-color:#808080; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff;} body { background-image:url("top/newtop.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 20%; background-color:#ffffff; } div { text-arign:center; padding:10px; border-width:thin; border-style:dotted; background-color:transparent; } #kousinrireki{ position:static; margin-top:20px; margin-right:80%; margin-bottom:70%; margin-left:0%; } #reserve { text-arign:center; padding:0px; border-width:thin; border-style:none; background-color:transparent; color:maroon; ｝ --> </style> </head> <BODY TEXT="#708090"> <font size=-2> <body> <div id="kousinrireki"> ※リニューアル♪<BR> </div> <div id="reserve"> Fumio All rights reserved<BR> </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
