- ベストアンサー
CSSのclearとvisibilityについて
- CSSのclearプロパティとvisibilityプロパティについて説明します。
- クラスclearfixを使っている場合、末尾にピリオドが入りますが、visibilityプロパティにより非表示になっています。
- clearプロパティとvisibilityプロパティを使用することで、エリアのレイアウトを調整することができます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- think49
- ベストアンサー率59% (285/482)
■contentプロパティやvisiblity プロパティを指定する理由 Firefox v1.x や Netscape Navigator には有意なcontentプロパティを指定しないとボックスが生成されなかったから、だそうです。 Clearing a float container without source markup http://www.positioniseverything.net/easyclearing.html clearfixはちゃんと考えられていた http://3ping.org/2007/05/26/1142 スタイルシートをめぐる冒険: clearfixの決定版を作る －モダンブラウザ編－ http://norisfactory.com/stylesheetlab/000038.php Fx 1.x や NN はもうサポートする時期ではないと思いますが、複雑でわかりづらいので初代コードをそのまま使っている人が多いのでしょう。 今なら、下記コードでも対応できます。 -------- .clearfix { /zoom : 1; } .clearfix:after { content : ''; display : block; clear : both; height:0; } -------- いまどき ? いまさら ? clear fix のコード | ヨモツネット http://www.yomotsu.net/wp/?p=561 ■contentプロパティを省略してはいけないのか contentプロパティの初期値は CSS2 で「空文字列」、CSS2.1, CSS3 で normal をとります。 normal の計算方法は私もよくわかっていませんが、内容があるケースもあるようです。 従って、contentプロパティは省略すべきではありません。 Generated content, automatic numbering, and lists (CSS2 ja) http://www.y-adagio.com/public/standards/tr_css2/generate.html#propdef-content Generated content, automatic numbering, and lists (CSS2.1) http://www.w3.org/TR/CSS2/generate.html#content 生成内容 - CSS2リファレンス http://hp.vector.co.jp/authors/VA022006/css/generate.html#content CSS3 Generated and Replaced Content Module http://www.w3.org/TR/css3-content/#inserting3 # 個人的にはフッタを入れれば clear されることから clearfix 使う機会があまりありません。 # まあ、考え方次第ですけど…。
お礼
think49 様 お返事遅くなり申し訳ございませんでした。 沢山の参考リンクもありがとうございます。 勉強させて頂きます！！
お礼
kuzumiHK 様 私もこれまでこういったことはしませんでした。 半ば強引にfloatをclearして見た目を維持していたこともありましたが。。。