CSS講座 - 目で見るボックスレイアウト

カテゴリ:CSSテクニック 2008年1月20日 21:34

CSSのボックスレイアウトって色々複雑だよなぁと思っていて、もし自分がそれを、まだ理解してない人に教えるならなんて教えるかな? とか考えてるときがありました。
元々、なにかに例えて説明するのが好きなので、身近なものでなにか説明できないかと考えたわけです。
出した答えがこれでした↓

CSSのボックスレイアウトを家を例えに説明した図

すべてを家に例えるわけです。
まず、widthは "家の幅"、paddingは "庭の範囲"、borderは "家の壁の厚さ"、marginは "隣の家との距離" と。
そう説明した上で、"庭の範囲"(つまりはpadding)は自分の好みが反映される(つまり背景)。そして自分の敷地は壁までの範囲(つまりwidth+padding+border)。そして隣の家との距離はmargin

こう例えると、なんとなくpaddingmarginの違いがわかりやすいのかなぁと思ったわけです。
さらに、実際のボックスの幅がwidth+padding+borderとなる理由も、上記の説明でなんとなくイメージできるかなと。

そんなこんなを考えていて、ついに人にそれらを教える機会があり、参考資料として上の図と、下のツールを作るに至りました。
分かる方から見ても、この説明が分かりやすいか、分かりづらいか、そういった意見を頂きたいなぁと今回の記事を書いてみました。
もっといい説明があるよ!とか、なんでもいいのでコメントもらえたら幸いです。

ちなみにツールのコンセプトは「よくボックスレイアウトについて分かっていない人でも、動的に見ることでなんとなくでも概要をつかんでくれるかなー」と。
おかしい部分なんかありましたらコメントでももらえるとうれしいです(;´д`)

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/58

トラックバック

CSSのパディングとマージンの違い

パディングとマージンの違いについて ビックリするくらい わかりやすい例えで説明しているサイトを発見して 目からウロコでした 今日はSEOに強いブログを作...

byアフィリエイト魂!! 2009年3月26日 03:44

[css][学習]ボックスレイアウトについて

最近CSSについて猛烈に勉強してます。rCSSについてはほとんど理解しないまま、ある程度分かってるつもりでしたが、深いですね。(汗)...

byapplicott blog 2009年3月28日 23:53

コメント

1 - ドドン さん

始めまして。いやぁ、この説明、理解しやすいですね。border,padding,marginを何度勉強しても理解できなかったものが、この説明ですぐに理解できました。n一つ覚えておけば、残り2つは思い出せるので、「庭パー」の連呼で、頭に叩き込みました。

2008年7月26日 10:57

2 - えど Author Profile Pageさん

>>ドドンさんコメントありがとうございます!nいやぁ、こういうコメントをいただけるのが一番うれしいです。nなにより、お役に立てたようでよかったです(*'-')

2008年7月27日 01:01

3 - ペーター さん

えどさんこの週末に始めてアクセスしました。いろいろと参考にさせていただいています。nところで、ボックスのCSSですが、npositionとか、displayとか、visibilityなども操作できるとより理解が深まるように思えますが、いかがでしょうか。nたぶんここまで作られていれば、追加はそれほど難しくないのではないかと。nご参考まで。

2008年9月22日 10:46

4 - えど Author Profile Pageさん

>>3 - ペーターさんご指摘ありがとうございます!nそうですね、オプションとして拡充するのもいいですね。nすべてを一度に見せてしまうと混乱してしまう人もいるかもなので、nそこらへんも含めて、もう少し初心者の方の手助けになるnツールにしたいと思います!

2008年9月22日 14:32