電子書籍の厳選無料作品が豊富！

<DIV> と </DIV> の間が空です。

解決済

  • 質問者：MHYLNQQH
  • 質問日時：
  • 回答数：5件

空白行を作りたくて
<div style="padding-top:10px;"></div>
と言うタグを入れているのですが
ツールでチェックすると
<DIV> と </DIV> の間が空です。
と言うエラーになるのですが、
何か文字を入れないとダメなのでしょうか？

通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： nanden1548
  • 回答日時：

<div>は段落のまとまり、つまり、文章のまとまり、そこに文章がない！・・・おかしく思いませんか？


この要素以前の文面に、空間を作るための、装飾要素（padding margin)を設けることです。
ただし、装飾要素なので、HTMLに記述してはいけません！
必ず、CSSに記述しましょう。

ＶａｌｉｄなＨＴＭＬを記述するには、validatorなどを利用されているとおもいますが、まずは仕様書を、熟読されることです。
　　　　↓↓↓↓↓↓↓↓↓↓↓↓

で、紹介・指摘されている意味も理解できると思います。

参考URL：http://validator.w3.org/
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/09 17:14

No.4

  • 回答者： ORUKA1951
  • 回答日時：

本当に基本からですが、15年前の1999年のHTML4.01の勧告以来強く言われてきたのは!!「構造とプレゼンテーションの分離(

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。すなわちHTMLには文書構造しか書かない!!。プレゼンテーションはスタイルシートで行う。
＞空白行を作りたくて
は、プレゼンテーションですからHTMLには書きません。
＞<div style="padding-top:10px;"></div>
　DIVは「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」に使用する要素です。次期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 … )」(他に適当な要素がないときの最後の最後の手段として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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/09 17:14

No.3

  • 回答者： tracer
  • 回答日時：

文法的には誤りですが、表示は問題ないはずですよ。


ただ、一般的には、余白のためだけにタグを追加することはないですね。
直前の要素や、直後の要素を利用してどうにでもなるはずです。
ちなみにツールって何のことでしょうか?
文法をチェックするツールのことですか?
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/09 17:14

No.2

  • 回答者： wellow
  • 回答日時：

<div style="padding-top:10px;"></div>としてみては？

    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/09 17:14

No.1

  • 回答者： yambejp
  • 回答日時：

＞何か文字を入れないとダメなのでしょうか？



原則としてタグには空白文字以外の何かを入れておかないといけないことになっています。
実態のある段落のmarginやpaddingで調整するようにしてください
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/09 17:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報