CSSのボックスレイアウトって色々複雑だよなぁと思っていて、もし自分がそれを、まだ理解してない人に教えるならなんて教えるかな？ とか考えてるときがありました。
元々、なにかに例えて説明するのが好きなので、身近なものでなにか説明できないかと考えたわけです。
出した答えがこれでした↓
すべてを家に例えるわけです。
まず、widthは「家の幅」、paddingは「庭の範囲」、borderは「家の壁の厚さ」、marginは「隣の家との距離」と。
そう説明した上で、「庭の範囲（つまりはpadding）は自分の好みが反映される（つまり背景）。そして自分の敷地は壁までの範囲（つまりwidth＋padding＋border）。そして隣の家との距離はmargin」
こう例えると、なんとなくpaddingとmarginの違いがわかりやすいのかなぁと思ったわけです。
さらに、実際のボックスの幅がwidth＋padding＋borderとなる理由も、上記の説明でなんとなくイメージできるかなと。
そんなこんなを考えていて、ついに人にそれらを教える機会があり、参考資料として上の図と、下のツールを作るに至りました。
分かる方から見ても、この説明が分かりやすいか、分かりづらいか、そういった意見を頂きたいなぁと今回の記事を書いてみました。
もっといい説明があるよ！とか、なんでもいいのでコメントもらえたら幸いです。
ちなみにツールのコンセプトは「よくボックスレイアウトについて分かっていない人でも、動的に見ることでなんとなくでも概要をつかんでくれるかなー」と。
おかしい部分なんかありましたらコメントでももらえるとうれしいです(;´д｀)
▼作ってみたツール（Javascript）
[ツール] CSS講座 - 目で見るボックスレイアウト(Javascript)
コメント
1 - ドドン さん
始めまして。いやぁ、この説明、理解しやすいですね。border,padding,marginを何度勉強しても理解できなかったものが、この説明ですぐに理解できました。
一つ覚えておけば、残り２つは思い出せるので、「庭パー」の連呼で、頭に叩き込みました。
2008年7月26日 10:57
2 - えど
さん
>>ドドンさん
コメントありがとうございます！
いやぁ、こういうコメントをいただけるのが一番うれしいです。
なにより、お役に立てたようでよかったです(*'-')
2008年7月27日 01:01
3 - ペーター さん
えどさん
この週末に始めてアクセスしました。いろいろと参考にさせていただいています。
ところで、ボックスのCSSですが、
positionとか、displayとか、visibilityなども操作できると
より理解が深まるように思えますが、いかがでしょうか。
たぶんここまで作られていれば、追加はそれほど難しくないのではないかと。
ご参考まで。
2008年9月22日 10:46
4 - えど
さん
>>3 - ペーターさん
ご指摘ありがとうございます！
そうですね、オプションとして拡充するのもいいですね。
すべてを一度に見せてしまうと混乱してしまう人もいるかもなので、
そこらへんも含めて、もう少し初心者の方の手助けになる
ツールにしたいと思います！
2008年9月22日 14:32