CSSのボックスレイアウトって色々複雑だよなぁと思っていて、もし自分がそれを、まだ理解してない人に教えるならなんて教えるかな？ とか考えてるときがありました。
元々、なにかに例えて説明するのが好きなので、身近なものでなにか説明できないかと考えたわけです。
出した答えがこれでした↓
すべてを家に例えるわけです。
まず、widthは「家の幅」、paddingは「庭の範囲」、borderは「家の壁の厚さ」、marginは「隣の家との距離」と。
そう説明した上で、「庭の範囲（つまりはpadding）は自分の好みが反映される（つまり背景）。そして自分の敷地は壁までの範囲（つまりwidth＋padding＋border）。そして隣の家との距離はmargin」
こう例えると、なんとなくpaddingとmarginの違いがわかりやすいのかなぁと思ったわけです。
さらに、実際のボックスの幅がwidth＋padding＋borderとなる理由も、上記の説明でなんとなくイメージできるかなと。
そんなこんなを考えていて、ついに人にそれらを教える機会があり、参考資料として上の図と、下のツールを作るに至りました。
分かる方から見ても、この説明が分かりやすいか、分かりづらいか、そういった意見を頂きたいなぁと今回の記事を書いてみました。
もっといい説明があるよ！とか、なんでもいいのでコメントもらえたら幸いです。
ちなみにツールのコンセプトは「よくボックスレイアウトについて分かっていない人でも、動的に見ることでなんとなくでも概要をつかんでくれるかなー」と。
おかしい部分なんかありましたらコメントでももらえるとうれしいです(;´д｀)
▼作ってみたツール（Javascript）
[ツール] CSS講座 - 目で見るボックスレイアウト(Javascript)
