- 締切済み
clearFixについて。
clearFixについて。 回り込んだ最後尾のタグにすべてclass=”clearFix”を付けてやればよいのでしょうか? http://allergy.6.ql.bz/index.htmlなら<dl class="comment2dl">を<dl class="comment2dl" class=”clearFix”>とすればよいのでしょうか? http://allergy.6.ql.bz/chiryou.htmlなら<table class="contents1" class=”clearFix”>とすればよいのでしょうか?
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
意味知っていてなら、自由に・・ classは複数書くことは出来ません。classは「半角スペースで区切られた値のリスト」でしよね。 →class = cdata-list [CS] ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-class ) class="comment2dl clearFix" となります。スタイルシートでclassセレクタは、 『半角スペースで区切られたリストからなるclass属性の値のひとつが一致するもの』 を意味します。 属性セレクタの、[class=~abc]の簡略した書き方です。 →5.8.3 クラスセレクタ(Class selectors) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html ) 【引用】____________ここから 注。 CSSではclass属性が非常に大きな力を持っている。 したがって文書作成者は、体裁に殆ど何の関係も無い要素(HTMLだとDIV要素やSPAN要素など)をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。 しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )]より でわかるように、本来はclearFixはもちろん、comment2dlというclass名はまずいです。 floatを解除したいのでしたら、本来の考え方は違いますよね。たとえばHTMLに見出しと記事が続いているものでしたら、新しい見出しが登場するたびに、挿絵の周囲への文章の回り込みを解除したいなら h1,h2,h3,h4{clear:all;} で良いですよね。HTMLには手を加える必要はありません。ましたや文書構造を示しているとは思われないclass名をつけるべきではありません。 【引用】____________ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より class名が文書構造を保管している具体的な例を書くとわかると思います。 <div class="section"> <h2>このセクションの見出し</h2> <div class="figure">挿絵</div> <p>段落</p> <p>段落</p> </div> <div class="section"> <h2>このセクションの見出し</h2> <div class="figure">挿絵</div> <p>段落</p> <div class="section"> <h3>見出し</h3> <p>段落</p> <p>段落</p> </div> <p>段落</p> </div> というHTMLがあれば、誰が見ても文書構造がわかります。十年後のあなたでもね。 そしてスタイルシートは、その文書構造にしたがって div.section{clear:right;} div.section div.section{clear:none;} div.section div.figure{float:right;} これも、別にHTML見なくても本文(section)内の挿絵(figure)は、右に回り込ませる。新しいセクションが始まると、floatを解除している。しかし、二階層目のセクションではfloat解除しない。 と読み取れますよね。 どのようなclass名が良いかは、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」が参考になります。 clearFixなんて、御馬鹿なclass名は止めましょう。先でデザイン変更でfloat解除をしないことにしたとき、HTMLまで書き直すのですか? ★デザインのためにclass名,idを付けることはしない・・・と覚えておけば良いです。