- ベストアンサー
<DIV> と </DIV> の間が空です。
空白行を作りたくて <div style="padding-top:10px;"></div> と言うタグを入れているのですが ツールでチェックすると <DIV> と </DIV> の間が空です。 と言うエラーになるのですが、 何か文字を入れないとダメなのでしょうか？
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<div>は段落のまとまり、つまり、文章のまとまり、そこに文章がない！・・・おかしく思いませんか？ この要素以前の文面に、空間を作るための、装飾要素（padding margin)を設けることです。 ただし、装飾要素なので、HTMLに記述してはいけません！ 必ず、CSSに記述しましょう。 ＶａｌｉｄなＨＴＭＬを記述するには、validatorなどを利用されているとおもいますが、まずは仕様書を、熟読されることです。 ↓↓↓↓↓↓↓↓↓↓↓↓ で、紹介・指摘されている意味も理解できると思います。
- 参考URL：
- http://validator.w3.org/
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
本当に基本からですが、15年前の1999年のHTML4.01の勧告以来強く言われてきたのは!!「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。すなわちHTMLには文書構造しか書かない!!。プレゼンテーションはスタイルシートで行う。 ＞空白行を作りたくて は、プレゼンテーションですからHTMLには書きません。 ＞<div style="padding-top:10px;"></div> DIVは「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」に使用する要素です。次期HTML5では「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )」(他に適当な要素がないときの最後の最後の手段としてdivを使う)と原則使わなくなります。 例えば、クイズで次のようなHTMLがあるとします。 <body> <div class="header"> <h1>クイズ</h1> </div> <div class="section"> <h2>問題と回答</h2> <div class="section" id="question"> <h3>質問</h3> <p>・・・・・</p> <p><a href="#answer">答え</a></p> </div> <div class="section" id="answer"> <h3>回答</h3> <p>・・・・</p> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> というHTMLがあったとして、プレゼンテーションで回答を離して表示したいなら #answer{margin-top:600px;} とすればよい。ちなみに、HTML5で書くと <body> <header> <h1>クイズ</h1> </header> <section> <h2>問題と回答</h2> <section id="question"> <h3>質問</h3> <p>・・・・・</p> <p><a href="#answer">答え</a></p> </section> <section id="answer"> <h3>回答</h3> <p>・・・・</p> </section> </section> <footer> <h2>文書情報</h2> </footer> </body> となりますね。 1) 文書構造とプレゼンテーションは分離すること 2) DIV(やSPAN)は、文書構造を示すために使用する。 ・・これは、HTMLやスタイルシートを書くときの基本です。そのためにスタイルシートを使うのです。とにかく作るのもメンテナンスも楽になります。デザインの自由度が増します。 [サンプル] ★タブは＿に置換してあるので戻す。 ★HTML4.01strict + CSS2.1 <!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=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{ ＿margin:0;padding:0; ＿background-color:gray; } p{text-indent:1em;margin:0;line-height:1.6em;} div.header,div.section,div.footer{ ＿width:70%; ＿min-width:470px;max-width:800px; ＿margin:0 auto;padding:5px; ＿background-color:silver; } div.section div.section{ ＿width:auto;min-width:0;margin:0; ＿min-height:300px; ＿background-color:white; } #A{margin-top:600px;background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>クイズ</h1> ＿</div> ＿<div class="section"> ＿＿<h2>問題と回答</h2> ＿＿<div class="section" id="Q"> ＿＿＿<h3>質問</h3> ＿＿＿<p>・・・・・</p> ＿＿＿<p><a href="#A">答え</a></p> ＿＿</div> ＿＿<div class="section" id="A"> ＿＿＿<h3>回答</h3> ＿＿＿<p>・・・・</p> ＿＿＿<p>ウィンドウ幅に依存しません。(スマホから幅広ディスプレイまで)ウィンドウ幅を変えてみること。</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
お礼
ありがとうございました。
- tracer
- ベストアンサー率41% (255/621)
文法的には誤りですが、表示は問題ないはずですよ。 ただ、一般的には、余白のためだけにタグを追加することはないですね。 直前の要素や、直後の要素を利用してどうにでもなるはずです。 ちなみにツールって何のことでしょうか? 文法をチェックするツールのことですか?
お礼
ありがとうございました。
- wellow
- ベストアンサー率46% (892/1932)
<div style="padding-top:10px;"> </div>としてみては？
お礼
ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
＞何か文字を入れないとダメなのでしょうか？ 原則としてタグには空白文字以外の何かを入れておかないといけないことになっています。 実態のある段落のmarginやpaddingで調整するようにしてください
お礼
ありがとうございました。
お礼
ありがとうございました。