現在地: Home » 初級ホームページ作成講座：目次 » CSSのカスタマイズ方法：余白の設定/padding

余白の設定/padding

「横幅を広くするには」で指定したものと同じに「幅760px」で考えます。

変更部分
  • #contents
  • #sidebar

ポイント

Web標準に準拠した表示では、「余白｜padding の幅」も全体の幅に含まれます。この事を十分に考慮して全体の幅「760px」を超えない事。Firefoxなどでレイアウトが崩れる原因のひとつです。

カスタマイズ方法-#contents部分(線なしの場合)

余白を上下方向に「20px」左右に「30px」とります。

#contents{
padding: 0;
margin: 0;
width: 580px;
float: left;
background-color: #ffffd5;
color: black;
}

/*----------下記が変更後のソース*/

#contents{
padding: 20px 30px;
margin: 0;
width: 520px;
float: left;
background-color: #ffffd5;
color: black;
}

カスタマイズサンプル

左右へ余白を「30px」つまり全部で「60px」設けました。この「60px」を#contentsの幅「580px」から差し引くのがポイントです。

▲Top

カスタマイズ方法-#sidebar部分(線なしの場合)

余白を4方向に「10px」とります。

#sidebar{
padding: 0;
margin: 0;
width: 180px;
float: right;
color: black;
background-color: #ffd5d5;
}

/*----------下記が変更後のソース*/

#sidebar{
padding: 10px;
margin: 0;
width: 160px;
float: right;
color: black;
background-color: #ffd5d5;
}

カスタマイズサンプル

余白を「10px」つまり左右で「20px」設けました。この「20px」を#sidebarの幅「180px」から差し引くのがポイントです。

▲Top

カスタマイズ方法-#contents部分(border指定ありの場合)

余白を上下方向に「20px」左右に「30px」とります。

#contents{
padding: 20px 30px;
margin: 0; 
width: 519px;
float: left;
background-color: #ffffd5;
color: black;
border-right: 1px solid #000000;
}

左右へ余白を「30px」つまり全部で「60px」設けました。この「60px」と線の指定「1px」を#contentsの幅「580px」から差し引くのがポイントです。

▲Top

高性能サーバ

低価格サーバ

無料ホームページスペース