HTML構造の作り方

質問

HTMLを書くときにidの中に複数のclassやidを入れることがあると思いますが、うまくいきませんでした。
アメーバブログのフリースペースにHTMLを書いて、それをCSSで編集するようにしています。

■私の書いたコード
<div id="footerArea">
<div class="footerMenu">...</div>
<div class="footerInArea">
<dl class="mobile">
<dd class="qrCode">...</dd>
</dl>
<p class="copyright">...</p>
</div><!--//footerInArea-->
</div><!--//footerArea-->

このようなコードを記述して、CSSで装飾して添付画像のようなHTML構造を作ろうと試みたのですが、GoogleChromeの要素検索で調べてみると領域がきいてませんでした。

具体的には.footerMenuが高さ0px。
.footerInAreaは.footerMenuを含まない領域なはずなのに含んでいる。
dl.mobileとdd.qrCodeがなぜか.footerMenuや.footerInAreaを含む要素になっている。

原因がわからずにいます。
ブログはこちらです。
http://ameblo.jp/3800millionbp/

どのようにしたら構造がしっかりと決まりますでしょうか？
HTML構造の作り方もかねてご教授いただけると幸いです。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

HTMLの問題ではなくCSSの問題です。

floatを使用すると高さが0になりますから、それを囲っているブロックの高さも０になります。

結論から言えばfloatを指定している部分にoverflowを追加する。
.footerMenu dl { overflow: auto; }
でいいと思いますが、（それほど詳しく調べていません。ご自身のHTMLにあわせてください。）
もうちょっといろんなブラウザに対応したいとか、原理などを調べたいのであれば、「css clearfix」で検索してみてください。

お礼

ご回答ありがとうございます。

.footerMenu{overflow: auto}で見事にブロックレベル要素の高さができました。
これを機にもっと勉強したいと思います！

「css clearfix」も活用してみます。

回答No.1

ORUKA1951

HTMLの構造と言う場合は、「文書構造」のことです。形やデザインではありません。【初心者がもっとも間違いやすい部分です。】
スタイルシートは、その文書構造を元にセレクタで適用する要素と決定して、デザインを指定していきます。したがって、そのようなHTMLを書く必要はまったくありません。そんなことしたら、先でメンテナンスするときに泣く事になります。デザインを変えるたびにHTMLを開いて見なければなりません。デザインのためにHTMLを書かない!!

　class名は、文書構造を補完するために記述する。『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』どのようなclass名が良いかは、HTML5の「3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」が参考になる。それぞれの要素名のリンク先の説明も。idは、それがリンクのターゲットでない場合は原則として使わない(id,一意セレクタは詳細度が高く上書きがしにくい)

[HTML]の見本

<div class="footer">
<h2>文書情報</h2>
<p>
ここに、この記事のフッタ情報を書く。
</p>
<p>
フッタは一つの記事(article)に一つずつだが、文書には記事が複数ありうるので一箇所とは限らないのでclassとする。
</p>
<div class="nav">
<ol>
<li><a href="./">サイトトップ</a></li>
<li><a href="./">製品情報</a></li>
<li><a href="./">問合せ</a></li>
</ol>
</div>
<div class="documentInfo">
<p>
このHTMLとCSSは、サンプルです。記事量が少ない場合もあるのでmin-heightを指定しておく。
</p>
<div id="document-version">
<h3>更新履歴</h3>
<dl>
<dt id="FIRST-PUBLISHED">First Published</dt>
<dd>2005-06-10</dd>
<dt id="LAST-MODIFIED">Last Modified</dt>
<dd>2005-06-10 12:00:00 (JST)</dd>
</dl>
</div>
<address>&copy; ORUKA1951 2011 - 2014 All Rights Reserved <a href="./" title="send a mail" >メール</a></address>
</div>
</div>

[CSS]セレクタをつかって要素を特定する。詳細度が高いと上書きされる。
div.footer{border:solid 1px gray;}
div.footer h2,div.footer p,div.footer div{
line-height:1.6em;
margin:0;auto;
}
div.footer div.documentInfo{
position:relative;
min-height:150px;
}
div.footer div.documentInfo p{
margin-right:30%;
}
#document-version{
position:absolute;
width:29%;left:70%;top:0;
background-color:yellow;
}
#document-version h3{display:none;}
div.footer div.documentInfo address{
position:absolute;
bottom:0;
width:90%;margin:0 auto;
text-align:center;
}

＞具体的には.footerMenuが高さ0px。
　中身がabsoluteされるとゼロになります。
＞.footerInAreaは.footerMenuを含まない領域なはずなのに含んでいる。
　HTML上は含んでいます。

＞dl.mobileとdd.qrCodeがなぜか.footerMenuや.footerInAreaを含む要素になっている。
　なっていません。

<div id="footerArea">
　　<div class="footerMenu"></div>
　　<div class="footerInArea">
　　　　<dl class="mobile">
　　　　　<dd class="qrCode">...</dd>
　　　　</dl>
　　　　<p class="copyright">...</p>
　　</div>
</div>

　構造と、デザインを完全に混同しているから、結果を理解できていないと思われます。その場所に表示されたからそれに含まれるわけではありませんし、その場所にないから外に出たわけではありません。
　あなたの書かれているidやclass名の90%は不要なものです。!!!　HTMLもスタイルシートもとてつもなく巨大になってしまいますし、そもそもメンテナンス不可能です。

お礼

ご回答ありがとうございます。

HTML構造とデザインを混同していました。
スタイルシートの役割を今一度認識して、カスタマイズしていきたいと思います。

とても勉強になりました。ありがとうございました。