- 締切済み
テーブルの上に余白ができてしまいます
パソコンから見たときはなんともないのですが、携帯から見ると大きい余白がでてしまって困っています。 解決方法を教えていただけませんか？ それと、できれば下記の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>
- みんなの回答 （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)以降は、そのような書き方は廃れました。
