サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
rain119.seesaa.net
まったくの初心者さんが読むと混乱しそうなので書かなかったfloatの詳細について書いてみます。 IE7以下だと親の背景が表示されるのに、FF3.5、IE8など最近(現時点)のブラウザだと表示されない、という状況に遭遇することがあります。下の例は、float指定したボックス(あああ…)を子として、親ボックスが指定されています。 (FF3.5↓) (HTML) <body> <div class="box-A"> <div class="box-B"> ああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> </div> </body> (CSS) body { margin:0px; padding:0px; font-size:14px; background-color:#ddd; } .box-A{/* ----親--
まっさらな状態で、単純に「家」と一文字書いた場合、文字の周りに見えない線がひかれます。 文字通り、それが「家」ですね。そして、「庭」がpadding、「壁」がborder、marginが「境」です。 自分の土地内の庭(padding)や壁(border)は、色を塗れますがが、 道路として提供した境(margin)は、「町」の管理になってしまった為、塗り替えできません。 但し、どれだけ道路を提供するかは、家側の意志で決めることができます。 庭を塗ると、家の色まで一緒になっちゃうところは、ご愛敬で。 「家」の部分を内容領域(content)と言います。内容領域「家」の幅がwidth、高さがheightです。 (バグのため正しく表示されない場合があります。) 例えば、この「家」の中に、小部屋をつくるように、新たなボックスを定義する場合、 基本的に、この家の幅、widthの値より、小さいボックスし
フレームの構造自体をいじるとclearする要素がないというケースにでくわします。 Seesaaのカスタマイズでは、ヘッダーやフッターをさらに分割する場合がこれにあたります。 下の左の例は、3列の行と1列の行が交互にならんでいますので、1列の行でclearできます。 右の例の場合は、floatで段組しないといけないので、clearすることができません。 つまり、複数列の行が続く場合は、floatを解除する要素が必要になります。 解除する方法は、3つあります。 1)Aに何らかの(空)要素を置き、clearを定義。 2)clearfix 3)overflow 1)は、空要素を使ったclearと言われる古典的な方法です。レイアウト上影響の少ない要素を置いて、その要素にclearを定義する方法です。 要素としては、一般的に、div、brなどが使われるようです。検索するといろいろ情報がでてきます。 下
※この記事は、現実に使われないようなソースを例にしていた為、修正しました。(2010/1/28) clearfix、overflowでfloatを解除した場合、margin-bottomが無視される場合があります。 これについては、バグなのか、clearfix、overflowの書き方の問題なのかは、わかりません。 ですが、float:leftでは無視、float:rightでは、有効になるため、ブラウザ側に何らかの問題があると思われます。尚、要素にclearを指定した場合、この状態にはならず、margin-bottomは有効です。 (IE6/7)親ボックスにclearfix、overflowを指定し、floatを解除した場合、float:leftを指定した子ボックスのmargin-bottomが無視される。(float:rightのときは、無視されず有効) (HTML) <body> <
未だある程度のシェアを誇るIE6の有名なバグです。 Seesaaのブログをカスタマイズする上で、カラム落ちなど、大きくレイアウトが崩れる原因は、この2つだと思います。この2つを覚えておくだけでも、かなり違うと思います。 1)floatを指定した場合にmarginが2倍になる このバグは、floatと左右marginの特定の組み合わせで発生します。 下の例は、3つのボックスにfloat:leftを指定し、左右に10pxのmarginを指定しています。 この場合、左floatの一番左のボックスの左marginが2倍になります。 同様に、右floatの一番右のボックスの右marginも2倍になります。 全体の幅に余裕がある場合、問題ありませんが、きっちり合わせた場合、押し出されてカラム落ちになります。 (対策)marginが必要な場合、バグの発生しているボックスに、display:inline;
このページを最初にブックマークしてみませんか?
『ブログカスタマイズの覚書』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く