横並びdivで一部の初期高さがずれる理由について

質問

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック４つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100px; height:33px;}
#test3{ width:100px; height:33px;}
#test4{ width:100px; height:33px;}
#test5{ width:250px; height:33px;}
#Form input{
margin:auto 0px;
font-size: 70%;
width: 150px;
}
#Form button{ font-size: 70%; width: 50px; }

[html]
<div id="hoge">
<div id = "head">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5">
<form id = "Form">
<input name="list"/>
<button>テスト</button>
</form>
</div>
</div>
</div>

この場合、表示は画像のように、test5のdivだけ初期の高さが沈み込んでしまいます。
また、divとdivの間に余計な隙間が作られてしまいます。
ここで分からないことは、
１．たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか？
２．div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は？
３．cssのinline-block等の属性を変えずに隙間を詰めることはできるか？

等が知りたいです。お手数ですが、どなたかご教示いただけませんでしょうか。m(_)m

回答No.2

ORUKA1951 · ベストアンサー

＞確認にはchromeでF12を押して出てくるウィンドウを使っていますが
　これはfirefox+firebugが圧倒的に有利です。
　firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

＞これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか？
　そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

＞ただ分からないまま書いて、その度lint

　lintの良いところは、理由と対策も示してくれる。それを読まなきゃダメです。芋づる式に色々な知識が見につきます。
　欠点は、文法上の誤りは指摘してくれるが、根本的なマークアップ自体はチェックしてくれない。例えば、
　<div><a href="/">トップ</a></div>
　<div><a href="/product">製品</a></div>　
　<div><a href="/manual">マニュアル</a></div>
はエラーにならない。「これはナビゲーションですし、並列な情報が並んでいるので順不同リストでマークアップするほうがよい」・・・なんては言ってくれないです。

＞その分時間もかかるのでなんとかしてこういう誤りの法則のようなもの、をあらかじめ分かるようになっておきたい
　もっとも早いのは、仕様書を徹底的に読んでおくこと。すくなくとも全体の流れとどこを調べればよいか位は・・・。急がば回れ、変な「付け焼刃」で積み上げていくより、根本を理解してからのほうが圧倒的に上達は早いです。

＞DIVで並べる想定の箇所がOL/LIに変わっておりますが、inline-block化してDIVを並べることそのものに問題があるということでしょうか？

★HTMLでこれが最も大事な--最重要なポイントなのです。
　1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　2)『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　DIVは、「文書の構造を補完するため」であって、「デザインのため」じゃありません。
　ところが、あなたが参考にされた多くのサイトのように実際には「デザインのため」に使用されている例がとても多い。理解されてこなかった!!。そのために
　3)『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
　　そして、「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要素を使用することを強く推奨する。)
　　となります。

　よって
＞DIVで並べる想定の箇所が
　はHTMLを作成する上で最も犯してはならない誤りなのです。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
　どのようにプレゼンテーションするかはスタイルシートに任せて、ここはナビゲーションリストだから、そのようにマークアップするべき。
　誤解されないように!!断じてきれいに横に並べるというデザインのために「<div>ではなく<li>を使っている」わけではありません。・・・結果はそうであっても・・・DIVでも可能です。

　デザインを考えずにとにかく徹底的に文書構造を示すようHTMLを記述するというのは、HTMLをワープロやDTP( http://ja.wikipedia.org/wiki/DTP )のひとつだと思って歩んでこられた方には、とてつもなく大きな壁だと思います。登山するのに道を誤って沢に下りてしまった---、元の道に戻るのは苦労します。
　しかし、私も含めて皆ここを乗り越えてきました。

　面白い例を紹介しておきましょう。Chrome以外のブラウザで!!（Chromeは代替スタイル扱えない）
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　このページを表示させてブラウザの[表示]→[スタイル(シート)]へ進み、色々なスタイルを選択してみてください。HTMLにプレゼンテーション的な要素はまったくないために、自在にデザインできるのです。印刷プレビューやウィンドウ幅を伸縮させたり、フォントサイズをCtrl + ＋/－で変更しても良いでしょう。

★まず仕様書を通しで読んでみましょう。
　HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
　CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )

（解説）
１．たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか？
　本来あるべきブロックがないために匿名ブロックが作られる。(HTMLの文法誤り)

２．div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は？
　ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )
　改行やタブは空白文字ですから、ここに空白文字がひとつあるように整形される。
　よって、
　div.header div.nav{position:absolute;top:0;width:100%;font-size:0;}/* li間の空白文字を0 */
　　このフォントサイズを2pxにすれば2px空く

３．cssのinline-block等の属性を変えずに隙間を詰めることはできるか？
　　上記が回答

お礼

おはようございます。何度も丁寧に解説いただき恐縮です。
ORUKA様の解説で、色々と自分の問題点が見えてきたような気がいたします。
まずは一度仕様書等を読んでみて総合的な理解を身につけたいと思います。

重ねて深謝申しあげます。
本当にありがとうございました！

回答No.1

ORUKA1951

サンプルのためにそのようなHTML書かれているのだと思いますが、原因は御利用のfirebugでわかりませんでしたか？？
　単刀直入に言うとHTMLが不正だからです。この場合匿名ボックスが作られてしまうためにそのマージンが介入するのです。
　ためしに
<div id="hoge">
　<div id = "head">
　　<div id="test1">あ</div>
　　<div id="test2"></div>
　　<div id="test3">い</div>
　　<div id="test4"></div>
　　<div id="test5">う</div>
　</div>
</div>
　として、ご覧なさい。みごと期待通り（笑）ひとつおきに下がってしまうはずです。

　そのようにならないためにも、きちんとHTMLを書きましょう。
　例えば、次のようなまっとうなHTMLだとそうはなりませんね。単純です。

★想定端末が分からないので、リキッドにしてあります。スマホでも幅広ディスプレイでもＯＫ
　もちろん、印刷には適用されません。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA入力でチェック済み
★タブは＿に置換してあるので戻す。
★HTMLには文書構造しか書いてないので、デザインは自由に変更できます。
　構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.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" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;margin:0;padding:0;line-height:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:0px;}

/* ここから! */
div.header{position:relative;padding-top:33px;}/* ナビゲーションのために余白を取る。*/
div.header div.nav{position:absolute;top:0;width:100%;font-size:0;}/* li間の空白文字を0 */
div.header div.nav ol,div.header div.nav ol li{
list-style:none;margin:0;padding:0;text-align:center;line-height:33px;
}
div.header div.nav ol li{font-size:12px;display:inline-block;border:1px solid black;width:15%;}
div.header div.nav ol li:last-child{width:22%;}
/* ここまで */

div.header div.nav ol li:hover{background-color:yellow;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>見出し</h1>
＿＿<div class="nav">
＿＿＿<form action="/">
＿＿＿<ol>
＿＿＿＿<li>アイウエオ</li>
＿＿＿＿<li>かきくけこ</li>
＿＿＿＿<li>さしすせそ</li>
＿＿＿＿<li>タチツテト</li>
＿＿＿＿<li><input type="text" size="10" name="text"><button type="submit" value="">送信</button></li>
＿＿＿</ol></form>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

補足

ご指摘ありがとうございます。
デバッガというか、確認にはchromeでF12を押して出てくるウィンドウを使っていますが
elementsとconsoleの項目しか使っておりません。

差し支えなければもう少しお聞きしてもよろしいでしょうか。

これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか？
以前、そちらも気になって検索したのですが、それに近いような記述が見つからなかったので・・・
その辺の法則がまだよく分かっていません。

根本的に理解しておきたいのはその辺の部分でもあり、
ただ分からないまま書いて、その度lintや目見、QA等で間違いを確認するというのは
その分時間もかかるのでなんとかしてこういう誤りの法則のようなもの、
をあらかじめ分かるようになっておきたいのですが、すぐには難しいでしょうか・・・
# 上手く説明できていないかもしれません。申し訳ないです。

また、DIVで並べる想定の箇所がOL/LIに変わっておりますが、
inline-block化してDIVを並べることそのものに問題があるということでしょうか？

ご指導いただければ幸いです。