CSSテンプレート

カスタマイズ方法-#header部分

上下左右の余白を指定します。

/*----------枠なし*/
#header {
  padding: 20px 20px 10px;
}

/*----------枠あり*/
#header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #cccccc;
}

上下左右共通
padding: 10px; [10px 10px 10px 10px;]

上下共通 左右共通
padding: 10px 20px; [10px 20px 10px 20px;]

左右共通
padding: 10px 20px 20px; [10px 20px 20px 20px;]

個別
padding: 20px 10px 30px 20px;

カスタマイズ方法-#contents部分

余白を広げる場合

/*----------枠なし*/
#contents {
  float: right;
  width: 540px;
  padding: 4em 30px 4em 30px;
}

/*----------枠あり*/
#contents {
  float: right;
  width: 540px;
  padding: 4em 30px 4em 29px;
  border-left: 1px solid #cccccc;
}

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

/*----------枠なし*/
#contents {
  float: right;
  width: 500px;
  padding: 4em 50px 4em 50px;
}

/*----------枠あり*/
#contents {
  float: right;
  width: 500px;
  padding: 4em 50px 4em 49px;
  border-left: 1px solid #cccccc;
}

余白を小さくする場合

/*----------枠なし*/
#contents {
  float: right;
  width: 560px;
  padding: 4em 20px 4em 20px;
}

/*----------枠あり*/
#contents {
  float: right;
  width: 560px;
  padding: 4em 20px 4em 19px;
  border-left: 1px solid #cccccc;
}

上記は全体の幅800pxでサイドバー部分200pxの場合の解説です。#contents部分は600pxである点に気をつけましょう。余白とボーダーを足した合計が600px以内である事が必要です。

カスタマイズ方法-#sidebar部分

余白を広げる場合

#sidebar {
  float: left;
  width: 180px;
  padding: 4em 10px 2em;
}

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

#sidebar {
  float: left;
  width: 170px;
  padding: 4em 15px 2em;
}

余白を小さくする場合

/*----------左右同幅*/
#sidebar {
  float: left;
  width: 190px;
  padding: 4em 5px 2em;
}

/*----------左右別幅*/
#sidebar {
  float: left;
  width: 185px;
  padding: 4em 5px 2em 10px;
}

上記は全体の幅800pxでコンテンツ部分600pxの場合の解説です。#sidebar部分は200pxである点に気をつけましょう。余白を足した合計が200px以内である事が必要です。