テーブルの上に余白ができてしまいます

締切済

質問者：xxxx000
質問日時：2011/12/23 06:25
回答数：2件

パソコンから見たときはなんともないのですが、携帯から見ると大きい余白がでてしまって困っています。
解決方法を教えていただけませんか？
それと、できれば下記のHTMLの添削をしてもらいたいです。

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=shift_JIS">
<style type="text/css">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2011/12/23 09:19

＞できれば下記のHTMLの添削をしてもらいたいです。

『ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』は明確に否定されています。
　また、
タグの<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)以降は、そのような書き方は廃れました。

　

- 0
- 件

通報する

No.2

回答者： einn
回答日時：2011/12/23 09:29

余白うんぬんの話は、その貼り付けたソースとは別ですよね？

そのソースでは、パソコンの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

気になるサイトがあったら、
そのサイトのソースを開いて覗いてみる癖をつけましょう。
そうすると、どのタグがどんな意味で、
どのスタイルシートがどういう役割か、なんとなくわかってきます。