ホームページ制作 島根県

余白（margin）の指定ついて解説します。CSS:floatレイアウトの基本 で使用したサンプルレイアウトを例にします。余白の指定はレイアウトに影響を及ぼすので注意が必要です。基本をしっかり覚えましょう。

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

Page Top

#wrapper内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#wrapperと#content及び#sidebarとの間に余白を設けたい時など、基本的にmarginで余白を設定するのは難しいと考えて下さい。IE6の場合、floatプロパティで指定した方向と同方向にmarginをとると、marginで指定した長さの2倍余白をとるバグを抱えています。よって、簡単に余白を設ける場合は次頁の余白指定：paddingを参照して下さい。

参考までにmargin指定で余白をとる場合

1：#wrapperの中にもうひとつボックス（#wrapper-inner）を設ける

(x)HTML

<div id="wrapper">
<div id="wrapper-inner">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

/* 左右に10pxとったので、実際の入力可能範囲は 780pxである事に注意  */
#wrapper-inner{ margin: 0 10px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

/* 780pxに納まるように指定  */
#sidebar{
    width: 180px;
    float: left;
}

#footer{ clear: both; }

2：#contentと#sidebarの中にもうひとつボックス（#content-innerと#sidebar-inner）を設ける

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">
<div id="content-inner">***データ***</div>
</div>
<div id="sidebar">
<div id="sidebar-inner">***データ***</div>
</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

/* 右に10pxとったので、実際の入力可能範囲は 590pxである事に注意  */
#content-inner{ margin-right: 10px; }

#sidebar{
    width: 200px;
    float: left;
}

/* 左に10pxとったので、実際の入力可能範囲は 190pxである事に注意  */
#sidebar-inner{ margin-left: 10px; }

#footer{ clear: both; }

Page Top

#header下に余白を設ける

#header{
  height: 120px;
  margin-bottom: 50px;
}

Page Top

#contentと#sidebarの間に余白を設ける

全体の幅は800pxで固定する事として解説します。

最も簡単な方法

#contentと#sidebarのwidth指定で800px以下になるように指定します。#contentはfloat:right;で右側に、#sidebarはfloat:left;で左側にいっぱい寄るので設けたい余白分、どちらかのwidthを小さくするか、あるいは両方小さくするかで自然な余白を設ける事ができます。

#contentと#sidebarの間に40px余白を設ける場合

#contentを小さくする

#wrapper{ width: 800px; }

#content{
    width: 560px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarを小さくする

#wrapper{ width: 800px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 160px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
両方小さくする

#wrapper{ width: 800px; }

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

Page Top

#footer上に余白を設ける

clearプロパティが指定してある要素に、上方向のmarginを指定しても指定は反映されません。

#footer上に余白を設ける時は、#contentと#sidebarの方に下方向のmargin指定をします。

#footer上に50pxの余白を設ける場合

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
    margin-bottom: 50px;
}

#sidebar{
    width: 200px;
    float: left;
    margin-bottom: 50px;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#content,
#sidebar{ margin-bottom: 50px; }

#footer{ clear: both; }