レイアウトの基本 ボックスモデルの概念とボックスを構成要素

CSSでWebサイトをデザインするうえで、最初に理解しておかないといけないのが、「ボックスモデル」と呼ばれているデザイン概念です。

一度理解してしまえば、凄く簡単な事だと思うですけど、言葉だけでは理解しにくいと思うので、図にしてまとめてみました。

…ここからが続き

ボックスモデルについての解説

ボックスモデルの構成表

↑上記図で説明している通りボックスは「コンテンツ領域」「余白」「枠線」「外側の余白」の4つで構成されています。
なので、実際にCSSで指定する際に、widthでボックス全体の幅を指定しないように気をつけましょう。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article