この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いた記事です。内容は2015年2月21日に書かれたものです。


CSSを勉強し始めてまず最初につまづくことになったのが「float」でした。

2カラムレイアウトを組んでみようと思って挑戦するも、なぜか崩れてしまう(「カラム落ち」って言うのかな……)。
どうやらwidthの値がちゃんと合ってないみたい。
色々な値をいじったり、ググってみたりして、やっと意味がわかったので覚書きしておきます。

floatする要素をぐるっと包む親要素(「id=”wrapper”」を振ってます)のwidthを960pxに設定した場合。

まず、子要素A、子要素Bのwidthの合計が960pxを超えると横幅が収まりきらないために横に並べない、ってのはスッと分かります。
が、widthの値が960px以内であっても、収まりきらずにカラム落ちする場合があります。
意味が分かってしまえば不思議でもなんでもないのですが、私はここで大混乱していました;

単純にwidthの値だけを計算すればいいのではなく、子要素にそれぞれ設定できる「margin」「border」「padding」「width」の値を全て計算して、親要素のwidth値と合わせなければならなかったんですね。

ネットで調べると、marginについては触れられている記事も多かったのですが、borderやpaddingも組み合わせて例示してあるようなところはなかなかなくて(実際にはそんなに組み合わせて使わないのかな?)、どの値が影響するのか把握するのに随分時間がかかってしまいました……。

親要素 { width: 960px; }
子要素A { margin: 20px; padding: 10px; width: 400px; float:left; }
子要素B { margin: 30px; border: 5px; width: ; }

この時、に入る値は?
子要素Aの各値の合計は、(20+20+10+10+400)pxで460px。そして、子要素Bの各値の合計は、(30+30+5+5+X)px。ってことは、は、(960-460-70)pxで430px。

分かってしまってからだと、こんなことわざわざ書く必要あるのかしら、と思うようなことですが。

この記事を書いた人

ひしもち

京都の某制作会社で4年ほど勤務したのち、フリーランスとして活動することにしました。
現在の主なお仕事は、業務システムのUIデザインと、幼稚園・保育園さまのWebサイト制作です。
専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。