現在地: Home » 初級ホームページ作成講座：目次 » CSSのカスタマイズ方法：横幅を広くするには
横幅を広くするには
サンプルソースは「幅700px」となっています。これを「760px」へ変更します。
- 変更部分
-
- #wrapper部分
- #contents部分
- #sidebar部分
ポイント
#contents部分と#sidebar部分の幅が全体の幅「760px」を超えない事。簡単な足し算/引き算です。
カスタマイズ方法-#wrapper部分
外部CSSの#wrapper部分のwidth: 700px;を変更します。#wrapper部分が全体の幅を決定しているので、ここを変更すれば横幅が広がります。
#wrapper{
text-align: left;
padding: 0;
margin: 0 auto;
width: 700px;
}
/*----------下記が変更後のソース*/
#wrapper{
text-align: left;
padding: 0;
margin: 0 auto;
width: 760px;
}
カスタマイズ方法-#contents部分
全体の幅を広くしたので#contents部分も少し広くします。ここではサイドバーは変更せずに(180pxのまま)、#contents部分の幅を広くする指定です。よって、サイドバーも変更の場合は「カスタマイズ方法-#sidebar部分」を参照して下さい。
#contents{
padding: 0;
margin: 0;
width: 520px;
float: left;
background-color: #ffffd5;
color: black;
}
/*----------下記が変更後のソース*/
#wrapper{
text-align: left;
padding: 0;
margin: 0 auto;
width: 760px;
}
#contents{
padding: 0;
margin: 0;
width: 580px;
float: left;
background-color: #ffffd5;
color: black;
}
カスタマイズ方法-#sidebar部分
サイドバー部分を「180pxから200px」へ変更します。それにともない「#contents部分」は「560px」へ変更します。
#contents{
padding: 0;
margin: 0;
width: 520px;
float: left;
background-color: #ffffd5;
color: black;
}
#sidebar{
padding: 0;
margin: 0;
width: 180px;
float: right;
color: black;
background-color: #ffd5d5;
}
/*----------下記が変更後のソース*/
#wrapper{
text-align: left;
padding: 0;
margin: 0 auto;
width: 760px;
}
#contents{
padding: 0;
margin: 0;
width: 560px;
float: left;
background-color: #ffffd5;
color: black;
}
#sidebar{
padding: 0;
margin: 0;
width: 200px;
float: right;
color: black;
background-color: #ffd5d5;
}
高性能サーバ
低価格サーバ
無料ホームページスペース
