- ベストアンサー
CSSのclearとvisibilityについて
- CSSのclearプロパティとvisibilityプロパティについて説明します。
- クラスclearfixを使っている場合、末尾にピリオドが入りますが、visibilityプロパティにより非表示になっています。
- clearプロパティとvisibilityプロパティを使用することで、エリアのレイアウトを調整することができます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
content: ".";は、content: "";でも大丈夫ですが、 contentプロパティ自体がないとclearfixが効かなくなりますね。 余談ですが、個人的には、他人が設計したサイトくらいでしかclearfixは使いません。 サイト設計者が正しい組み方さえすればほぼ使わなくても大丈夫なくらい回避策はあります。 使用率をゼロに近づけていくのもプロの仕事のような気がしてます。。
その他の回答 (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して見た目を維持していたこともありましたが。。。