「margin、border、paddingの違いについて」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
ここではborder、padding、marginの基本的な使い方ついて記していきます。~
~
想像してみてください。デザイン性の高いWebページの条件とはなんでしょうか。~
…答えはいくつかあると思いますが、その中の１つに「読みやすさ」があると思います。~
~
~
HTMLでは、さまざまな画像や文字がお互いの距離などの関係性の中でコードを記していきます。~
文字や画像などをHTML上にのせた場合に、その「要素の内容」からとなりの要素までの距離について、「border、padding、marginで定義してゆく」のです。~
~
まずはこちらの画像をご覧ください。
#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/
ここではborder、padding、marginの基本的な使い方について記していきます。~
~
想像してみてください。デザイン性の高いWebページの条件とはなんでしょうか。~
…答えはいくつかあると思いますが、その中の１つに「読みやすさ」があると思います。~
~
~
CSSを使って文字や画像などの距離、関係を指定します。~
文字や画像などをHTML上にのせた場合に、その「要素の内容」からとなりの要素までの距離について、「border、padding、marginで定義してゆく」のです。~
~
まずはこちらの画像をご覧ください。
#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/
