画像の下に余白が出来てしまいます。

締切済

質問者：linkdarksaria
質問日時：2012/10/07 10:12
回答数：2件

どんなにがんばっても下に余白が出来てしまいます。余白を消す方法を教えてください、お願いします。
多分、何か余計なもののせいで余白ができてるんだと思います。

css
↓
*{
margin:0;padding:0;
font:normal 10px/16px Verdana;
color:#000;
letter-spacing:0.2em;
}
/*リンクの設定*/
a{text-decoration:none;}
a:hover{text-decoration:underline;}

/*改行・画像の設定*/
br{letter-spacing:normal;}
img{border:0;}

/*見出しの設定　h1…サイトタイトル　h2…welcomeなどの見出し*/
h1 {
color:#fff;
font:bold 16px Verdana;
}
h2{
font:bold 10px Verdana;
}

/*右側のフレームの背景設定*/
body{background:#fff url(img/imgr.jpg) no-repeat left bottom fixed;
}

/*左側、メニューの表示されるページのみに適用される背景設定*/
#INDEX{
background:#666 url(img/imgl.jpg) no-repeat right bottom fixed;
}

/*左側フレームの各種設定*/
#CONTAINER {
margin:40px 20px 0 0;
text-align:right;
}
#MENU {
margin-top:20px;
}
#MENU a{
color:#fff;
font-size:120%;
line-height:25px;
}
#MENU a:hover{
color:#fff;
text-decoration:none;
}
/*右側フレームの各種設定*/
#BOX {
margin:40px auto;
width:55%;
}
.text{
margin:5px 0 20px 10px;
}
.record{
margin:5px 0 20px 10px;
height:200px;width:400px;
overflow:auto;
}

html
↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Clock hand</title>
<tr valign="top">
</tr>
</head>
<body leftmargin="0" scroll="no" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
</tbody>
</table>
<table style="width: 188px; height: 693px" width="188" background="http://tokiokalink.web.fc2.com/imgl.jpg" align="left" height="693">
<tbody>
<tr valign="top">
<td>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta content="text/css" http-equiv="content-style-type" />
<link rel="stylesheet" type="text/css" href="style.css" />
<base target="main" />
<div id="CONTAINER">

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2

回答者： ORUKA1951
回答日時：2012/10/07 17:09

＞適当にホイホイ色んなものをつぎ込んでしまいました。

　でしょうね。

　慌てず、まず
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
　を最初から挑戦してみてください。古い資料ですが、HTML4.01の邦訳をされたメンバーの方ですので、厳密に書かれています。
　とにかく最初はデザインを考えずにマークアップする練習をしてください。当然HTML4.01strictで使用できるタグは限られていますから楽です。
→http://www.htmllint.net/html-lint/tagslist.cgi?H …
　このうち、数十個覚えて置きゃ良いです。

　当然、文書構造を示すには足りなくなりますから、divやspanとclass名を組み合わせて補完しないといけません。
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
そのときに参考になるのは
★HTML5の新しい要素名 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )です。

　新しい仕様のHTML5の登場を目前にして、HTMLの書き方は大きく変わります。--本当はもっと前から言われていた。No.1の回答のとおり

　それがきちんとできると、あとはスタイルシートでデザインしていきます。

- 0
- 件

通報する

この回答へのお礼

またまたご丁寧にありがとうございます。
親切な心使い嬉しいです。

まずは練習してみますね！

通報する

お礼日時：2012/10/07 22:16

No.1

回答者： ORUKA1951
回答日時：2012/10/07 13:29

なんといったらよいか・・

まずHTMLを正しく書き直しましょう。理由どころか、スタイルシートでデザインすることも不可能です。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
　なお、そのときに次の点を注意してください。
・スタイルシートを使うのでしたら、tableを使用したデザインはすべきではありません。スタイルシートですべて、それもはるかに良いデザインができます。
　←『単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　←『ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』べきではない
　←『スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

・transitinalは使用すべきではありません。!!!1999年のHTML4.01の勧告以来12年経ちます。XHTML1.1やまもなく登場するHTML5にはtransitinalはありません。
　←『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

・ leftmargin,　scroll,　topmargin,　marginwidth,　marginheight,　cellspacing,　cellpadding,　align,　heightなどの属性はすべて非推奨です。
　←『スタイルやフォーマットを整えるためには、HTMLのプレゼンテーション属性ではなくスタイルシートを使用すべきである。スタイルシートによる代替が可能なHTMLのプレゼンテーション属性は、推奨しないこととなった。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

・<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
　<meta content="text/css" http-equiv="content-style-type" />
　<link rel="stylesheet" type="text/css" href="style.css" />
　は<head></head>内に記述します。bodyには書けません。

・<base target="main" />
　HTMLでは空要素に/>は使いません。>です。またbase要素は使うべきではありません。

　まず、デザインは一切考えずに正統なHTMLを作成してください。そのあとで、スタイルシートで好みにデザインしましょう。
HTML4.01strict雛形・・タブは＿に置換してあるので戻す。
　書いたら
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　で[DATA}]タブを選択してチェック

　HTML(スタイルシートも)この方法で身に付けるのが最短で間違いがないです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=UTF-8">
＿<title>タイトル</title>
＿<meta http-equiv="Content-Script-Type" content="text/javascript">
＿<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
＿<div class="header">
＿＿<h1>title</h1>
＿＿<div class="abstract">
＿＿＿<p>
＿＿＿＿このページでは・・
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>section Title</h2>
＿＿<p>
＿＿</p>
＿＿<div class="aside head">
＿＿＿<h3>付属文章1</h3>
＿＿</div>
＿＿<div class="aside foot">
＿＿＿<h3>付属文章2</h3>
＿＿</div>
＿</div>
＿<div class="footer" id="DOCUMENT_INFORMATION">
＿＿<h2>文書情報</h2>
＿</div>
</body>