ホームページ制作 島根県

余白（padding）の指定ついて解説します。CSS:floatレイアウトの基本 で使用したサンプルレイアウトを例にします。余白の指定はレイアウトに影響を及ぼすので注意が必要です。特にウェブ標準に準拠したホームページ作成ではpaddingの指定は重要になります。基本をしっかり覚えましょう。以下は、ウェブ標準に準拠した場合の解説となります。

(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

padding指定の注意事項

標準準拠モードでは width 及び height に padding を含みません。

後方互換モードは width 及び height に padding を含みます。

詳細：CSSレイアウト崩れの原因について

#wrapper内に余白を設ける

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

#wrapper内の左右に10pxの余白とる場合

#wrapper{
  width: 780px;
  padding: 0 10px;
}

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

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

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

#wrapper{
  width: 780px;
  padding: 0 10px;
}

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

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

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

#wrapper{
  width: 780px;
  padding: 0 10px;
}

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

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

今回は、全体の幅は800pxで固定する事としました。よって、左右にpaddingを10pxとるので#wrapperの幅は左右のpadding分を差し引いて780pxとしなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

後は、#wrapper内の#contentと#sidebarの幅を780pxに合うように変更すれば上手く段組み出来ます。

Page Top

#header内に余白を設ける

#header内の上下に20px、左右に10pxの余白とる場合

#wrapper{ width: 800px; }

#header{
  height: 80px;
  padding: 20px 10px;
}

#headerの幅は#wrapperのwidthが基準となるので特に指定は要りませんが、高さは上下に設けた余白分差し引かなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

#headerに背景画像を指定する際など重要です。

もうひとつの方法として、#header内に#header-innerを設ける方法があります。MTやWPなどのブログソフトウェアでよくある構造です。

(x)HTML

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

#wrapper{ width: 800px; }

#header{ height: 120px; }

#header-inner{ margin: 20px 10px; }

Page Top

#contentと#sidebar内に余白を設ける

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

#contentと#sidebar共に、左右20pxのpaddingを設ける場合。

#wrapper{ width: 800px; }

#content{
    width: 560px;
    float: right;
    padding: 0 20px;
}

#sidebar{
    width: 160px;
    float: left;
    padding: 0 20px;
}

#contentと#sidebar共に、左右に20pxのpaddingを設けたので、それぞれのwidthから40px分差し引かなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

参考までに、もしwidth指定を変更しなかったら、標準準拠モードでは#contentの幅は640px、#sidebarの幅は240px、合わせて880pxと計算されます。