clear: bothの事で質問です。

XHTML+CSSを勉強してる初心者ですが。

この場を借りて質問させてもらいます。

判らない事は

(1)
<div style="background: #CCCCCC; height: auto; width: 700px;">
<div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div>
<div style="background: #999999; height: 300px;width: 400px;float:left;">画像の説明</div>
<br style="clear: both;" />


(2)
<div style="background: #CCCCCC; height: auto; width: 700px;">
<div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div>
<div style="background: #999999; height: 100px;width: 400px;float:left;">画像説明</div>
<div style="clear: both;"></div>

(1)と(2)では、
(1)は<br style="clear: both;" />と記入してますが
(2)は<div style="clear: both;"></div>と記入してます。
この(1)と(2)は同じなのでしょうか？
それと使うとするならどちらのほうが有効的なのでしようか？
教えていただければ光栄です。

No.3 ベストアンサー 回答者： abril 回答日時： 2009/08/12 00:50

> それと使うとするならどちらのほうが有効的なのでしようか？

どちらも良くないですね。
(1)は、インライン要素の強制改行として用意されているbrを、divというブロック要素の後に単独で置いてあります。
(2)は、内容を持たない<div>～</div>が置かれています。
いずれも、ただ先に来る要素に与えられているfloat状態を解除する為だけに（レイアウトの為だけに）設けられた無意味なマークアップですので、論理構造上適切ではありません。

ケースバイケースで適切な方法がいくつか考えられます。
質問文及びNo.1のお礼文中のソースに基づき、CSSを以下と仮定します。
【ベースとなるCSS】
div.waku {
width: 700px;
background: #CCCCCC;
}
div.a {
float: left;
width: 300px;
height: 100px;
background: #888999;
}
div.b {
float: left;
width: 400px;
height: 100px;
background: #999999;
}

【A】<div class="waku">～</div>内で、<div class="b">画像説明</div>の後に来る内容がある場合

例えば：
<div class="waku">
<div class="a">画像</div>
<div class="b">画像説明</div>
<p class="notes">注釈…</p>
</div>
という様な構成であるなら、わざわざ空の要素を置くのではなく（floatしている要素の後に続く要素である）<p class="notes">～</p>のスタイルにclearプロパティを適用すればいい、という事です。

【ベースとなるCSSに追加】
p.notes {
clear: left;
}

【B】<div class="waku">～</div>内で、<div class="b">画像説明</div>の後に来る内容がない場合

<div class="waku">
<div class="a">画像</div>
<div class="b">画像説明</div>
</div>

■方法その1
質問文のソース通り、<div class="a">画像</div>と<div class="b">画像説明</div>の高さが"height: 100px;"で決め打ちできる様な内容なのであれば、親要素である<div class="waku">～</div>のスタイルとして、"height: 100px;"以上の高さを与えてやれば、内包する要素以上の高さで親要素が描画されるので、子要素のfloatを解除しなくても支障は出ません。

【ベースとなるCSSを修正】
div.waku {
width: 700px;
height: 100px;
background: #CCCCCC;
}

■方法その2
floatする子要素を内包する親要素のスタイルの方に通称clearfixという小技を用いて、親要素側でfloat状態をクリアさせる事ができます。
"CSS　clearfix"というキーワードでググると沢山ヒットします。書き方は色々あるのですが、下記はその一例です。

【ベースとなるCSSを修正・追加】
div.waku {
zoom: 100%;
width: 700px;
background: #CCCCCC;
}
div.waku:after {
display: block;
height: 0;
visibility: hidden;
content: ".";
clear: left;
}

などなど…

ただ、内容が真実「画像」と「画像説明で」あるなら、全てdivでマークアップしてしまうこと自体、あまり相応しい構造とは言えません（文法的には間違いではありませんが）。img、p、dl…等のマークアップの方が適切かとは思います。

No.5 回答者： abril 回答日時： 2009/08/12 14:44

No.3です。

ちょっと色々気になったので、補足的な事です。
質問者様は「XHTML+CSSを勉強」されているとの事ですので、早い段階からCSSを使う意味を適切に把握しておかれる方が今後の理解がスムーズになると思います。

No.1-2様の「HTML上には、レイアウトに関わることは書かない方が良い」「2の方も同じです。あまり良くないです。CSSでやるには、クリアしたいボックスに指定して下さい。」というご指摘の意味は、単に、HTMLのコード上で直接style属性でスタイルを記述するのが良くない、と仰っているだけではなく、”HTML文書中にレイアウト目的の記述をするのは好ましくない”と言う事を含めてらっしゃると思います。

確かに、(1)も(2)も（そしてNo.4様の”ダミー”も）文法上のエラーがあるわけではないのでHTML文法チェッカーにかけてもスルーされます。ただ、HTMLというのはマークアップ言語であり、HTMLタグでマークアップするのは「見た目のレイアウトをする」目的ではなく「文書の論理構造を整える」のが目的です。
＃ですから、No.3の最後に「全てdivでマークアップしてしまうこと自体、あまり相応しい構造とは言えません」と付け加えたのです。

私自身もプログラミングの世界にも片足、というよりほんのつま先程度を突っ込んでおりますが、「プログラムの世界」で「ダミーを使用することはよく有る」のかどうかは存じ上げませんが、HTMLというマークアップ言語では「（(1)や(2)やNo.4様の”ダミー”の様な）論理的に無意味・適切ではない」マークアップをする事は、言語の本来の用途から逸脱するので決して推奨されている事ではありません。

勿論、複雑なレイアウトを実現する事が至上命令である場合、その為にどうしても煩雑な入れ子やかなり苦し紛れ（こじつけ的）のマークアップを余儀なくされる事はゼロではありません。しかしそれはあくまで簡潔なマークアップではどうやっても無理な場合にやむを得ず、です。そこそこ長くこの仕事をしてきた実体験から言わせて頂ければ、ある程度CSSを理解し使いこなせる様になってくれば（主要モダン・ブラウザのみを対象とするならば）相当複雑なレイアウトであっても、HTML側はきちんと論理的整合性を保った記述で実現できるものです。
まして、今回のケースの様に難なく（質問文中のソースを見る限りでは、です。他の条件に依ってはその限りではない事も考えられますので。）論理的整合性を持ったマークアップでいくらでもCSS上でスタイルが調整できるのに、わざわざレイアウト目的の為だけに存在する"内容のない"ダミー的HTMLコードを書く必要は全くありません。

【参考】http://w3g.jp/xhtml/ref/outline
引用ここから---------------------------------------------------------
HTML の第一の機能は、文書内の情報を構造化することです。たとえばテキスト（文章）を、ここは「見出し」「段落」「リスト」「表」のようにそれぞれを構造としてマークアップすることができます。これらが HTML でできることの最大の特徴です。
引用ここまで---------------------------------------------------------

【参考】http://w3g.jp/css/guide/outline
引用ここから---------------------------------------------------------
では、CSS では一体何ができるのでしょうか。(X)HTML には文章を「見出し」「段落」「リスト」「表」のように各部分を構造化する特徴がありました。これに対して、(X)HTML文書の見栄えを定義する CSS は、これら (X)HTML によって構造付けされた「見出し」なら「見出し」の構造に対してレイアウトを定義するのが特徴です。たとえば、 (X)HTML で見出しと構造化した部分に、さらに文字の色や形などを装飾するための指定があると、見出しとして定義された部分に装飾に関する不明確な情報が余計に混じってしまうことになり、情報伝達の妨げとなります。そこで CSS は、従来の HTML が担ってきた情報伝達と見た目を整える2つの作業の内、見た目を整える作業については、CSS が分担することによって、(X)HTML が効率的に情報交換を行えるように、(X)HTML文書が本来の役割とは違う見た目を達成するのに役立ちます。
引用ここまで---------------------------------------------------------

今後の質問者様の勉強の参考になれば幸いです。

No.4 回答者： noname#119957 回答日時： 2009/08/12 06:09

要する記述する要素が何もないので、無理やりにせざるを得ないということです。

ほんらいはclearfixと呼ばれる方式がただしいのですがそれでは、ブラウザごとの違いを意識しなければなりません。
かならず、clearfixを検索してくださいね。

この場合簡素化としては、１ｐｘの四角のダミーを使用するとして。。
(2)でいいと思います。ただ、clear:bothだけではうまく行きません。もう少し詳しく書かないとブラウザによる表示を統一することは不可能です。
font-size: 1px;
line-height: 1px;
margin: 0px;
padding: 0px;
clear: both;
height: 1px;
width: 1px;
このようにすれば、どのブラウザでも、１ｐｘ四方のダミーを入れることができます。

<div style=""; height: auto; width: 700px;">
<img src="" style="background: #888999; height: 100px;width: 300px;float:left;" />
<img src="" style="background: #888999; height: 100px;width: 300px;float:left;" />
<div style="1PXの四角"></div>
</div>

こういうやり方でＷ３ＣのＨＴＭＬチェッカーは通過できます。
<div style="1PXの四角"></div>がいけない理由はありません。
プログラムの世界では、こういったダミーを使用することはよく有ることだと思います。^^

また、できれば、外部ＣＳＳを使っ他方がＨＴＭＬと分離できて便利です。あなたのようにＨＴＭＬに埋めるのyahooＳＨＯＰ構築などの限定された環境のみですからね。（外部ＣＳＳが使えない場合）

なお、css内で
div .aaa
と記述する必要はありません。単に
.aaaと記述すればシンプルとなります。
こうすれば、同じcssのタグ間の使い回しがとても楽になりますよ。^^

No.2 回答者： ganmo717 回答日時： 2009/08/11 23:15

XHTMLに

<div class="waku">
<div class="a">画像</div>
<div class="b">画像説明</div>
<br class="kuhaku">
</div>

brにスタイルを適用するのはやめましょう。
<div class="a">画像</div>
<div class="b">画像説明</div>
この２つはフロートで並べていますか？

あと、divはいらないてす。img自体にスタイルを適用する方が良いです。

No.1 回答者： ganmo717 回答日時： 2009/08/11 19:19

1の方は控えるようにして下さい。

HTML上には、レイアウトに関わることは書かない方が良いです。
レイアウトは全てCSSで書くようにしましょう。

2の方も同じです。あまり良くないです。
CSSでやるには、クリアしたいボックスに指定して下さい。
ちなみに、CSSをHTML上に書かないで外部CSSでやりましょう。

この回答へのお礼

ganmo717さんお返事ありがとうございます。

HTML上には、レイアウトに関わることは書かない方が良いです。
レイアウトは全てCSSで書くようにしましょう＞

そうでしたんですね。とても勉強になりました。
先ほど早速CSSの方に書いてみした。
このようにしてみました。
CSSに
クラスwaku,a,bは他省略しております。
.kuhaku{
clear: both;
}

XHTMLに
<div class="waku">
<div class="a">画像</div>
<div class="b">画像説明</div>
<br class="kuhaku">
</div>
としてみました。
これでどうでしょうね？もしご伝授していただけるならお願いいたします。

お礼日時：2009/08/11 21:01