- 締切済み
画像の下に余白が出来てしまいます。
どんなにがんばっても下に余白が出来てしまいます。余白を消す方法を教えてください、お願いします。 多分、何か余計なもののせいで余白ができてるんだと思います。 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">
- linkdarksaria
- お礼率100% (10/10)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞適当にホイホイ色んなものをつぎ込んでしまいました。 でしょうね。 慌てず、まず ★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) を最初から挑戦してみてください。古い資料ですが、HTML4.01の邦訳をされたメンバーの方ですので、厳密に書かれています。 とにかく最初はデザインを考えずにマークアップする練習をしてください。当然HTML4.01strictで使用できるタグは限られていますから楽です。 →http://www.htmllint.net/html-lint/tagslist.cgi?HTMLVersion=HTML40-Strict このうち、数十個覚えて置きゃ良いです。 当然、文書構造を示すには足りなくなりますから、divやspanとclass名を組み合わせて補完しないといけません。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 そのときに参考になるのは ★HTML5の新しい要素名 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )です。 新しい仕様のHTML5の登場を目前にして、HTMLの書き方は大きく変わります。--本当はもっと前から言われていた。No.1の回答のとおり それがきちんとできると、あとはスタイルシートでデザインしていきます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なんといったらよいか・・ まずHTMLを正しく書き直しましょう。理由どころか、スタイルシートでデザインすることも不可能です。 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )』 なお、そのときに次の点を注意してください。 ・スタイルシートを使うのでしたら、tableを使用したデザインはすべきではありません。スタイルシートですべて、それもはるかに良いデザインができます。 ←『単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』 ←『ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』べきではない ←『スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 ・transitinalは使用すべきではありません。!!!1999年のHTML4.01の勧告以来12年経ちます。XHTML1.1やまもなく登場するHTML5にはtransitinalはありません。 ←『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ・ leftmargin, scroll, topmargin, marginwidth, marginheight, cellspacing, cellpadding, align, heightなどの属性はすべて非推奨です。 ←『スタイルやフォーマットを整えるためには、HTMLのプレゼンテーション属性ではなくスタイルシートを使用すべきである。スタイルシートによる代替が可能なHTMLのプレゼンテーション属性は、推奨しないこととなった。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ・<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>
お礼
回答ありがとうござます。 すみません、とてつもなく機会音痴なので適当にホイホイ色んなものをつぎ込んでしまいました。 参考になりました。丁寧な解答ありがとうございます。 がんばってみますね！
お礼
またまたご丁寧にありがとうございます。 親切な心使い嬉しいです。 まずは練習してみますね！