「margin、border、paddingの違いについて」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
ここでは、margin、border、paddingの基本的な使い方について記していきます。~
~
想像してみてください。デザイン性の高いWebページの条件とはなんでしょうか。~
…答えはいくつかあると思いますが、その中の１つに「読みやすさ」があると思います。~
~
~
CSSのmargin、border、paddingを使って文字や画像、レイアウトなどの距離を定義します。~
文字や画像、レイアウトなどをHTML上にのせた場合に、その「要素の内容」からとなりの要素までの距離について、&color(red){CSSの中でmargin、border、padding}で定義してゆくのです。~
~
まずはこちらの画像をご覧ください。
#image(center,width=600px,概要図.JPG)
border、padding、marginを理解するにはこの図が分かりやすいのかな、と思います。~
これで理解された方は戻るボタンを押していただいても大丈夫です。~
&bold(){注意すべき点}~
&color(red){2段カラムなど、横方向に2つ以上あるカラムのwidthはそれぞれ一つずつ絶対値で指定する。}ということです。~
&color(red){さらに、右側にくる残りのカラムの長さは親要素のwidthから左の長さ（width,padding,border,marginを合計した長さ）を差し引いたものにするべき}ということです。（長さという表現とwidthという表現に注意）~
相対値（％）は好ましくないです。また、2段カラムにおいて、左側は絶対値等で指定して、右側は残りの長さ～とやるのも好ましくないです。~
ブラウザを伸縮した場合に違いがあるからです。
参考URL：http://desperadoes.biz/style/dan/
ここでは、margin、border、paddingの基本的な使い方について記していきます。~
~
想像してみてください。デザイン性の高いWebページの条件とはなんでしょうか。~
…答えはいくつかあると思いますが、その中の１つに「読みやすさ」があると思います。~
~
~
CSSのmargin、border、paddingを使って文字や画像、レイアウトなどの距離を定義します。~
文字や画像、レイアウトなどのタグをHTML上にのせた場合に、その「要素の内容」からとなりの要素までの距離について、&color(red){CSSの中でmargin、border、padding}で定義してゆくのです。~
~
まずはこちらの画像をご覧ください。
#image(center,width=600px,概要図.JPG)
border、padding、marginを理解するにはこの図が分かりやすいのかな、と思います。~
これで理解された方は戻るボタンを押していただいても大丈夫です。~
&bold(){注意すべき点}~
&color(red){2段カラムなど、横方向に2つ以上あるカラムのwidthはそれぞれ一つずつ絶対値で指定する。}ということです。~
&color(red){さらに、右側にくる残りのカラムの長さは親要素のwidthから左の長さ（width,padding,border,marginを合計した長さ）を差し引いたものにするべき}ということです。（長さという表現とwidthという表現に注意）~
相対値（％）は好ましくないです。また、2段カラムにおいて、左側は絶対値等で指定して、右側は残りの長さ～とやるのも好ましくないです。~
ブラウザを伸縮した場合に違いがあるからです。
参考URL：http://desperadoes.biz/style/dan/
