線で囲むには｜スタイルシートのカスタマイズ方法

現在地: Home » 初級ホームページ作成講座：目次 » CSSのカスタマイズ方法：線で囲むには

線で囲むには

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

変更部分

すべて

ポイント

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

カスタマイズ方法-#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;
border: 1px solid #000000;
}

カスタマイズサンプル

▲Top

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

#header{
padding: 0;
margin: 0;
height: 100px;
background-color: silver;
color: black;
}

#header p{
padding: 0;
margin: 0;
}

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

#header{
padding: 0;
margin: 0;
height: 100px;
background-color: silver;
color: black;
border-bottom: 1px solid #000000;
}

#header p{
padding: 0;
margin: 0;
}

カスタマイズサンプル

▲Top

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

#contents部分は「580px」でしたが、線｜borderを指定したので「1px」差し引いた「579px」としなければなりません。

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

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

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

カスタマイズサンプル

▲Top

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

今回変更はありません。

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

#footer{
text-align: center;
padding: 0;
margin: 0;
clear: both;
width: 100%;
background-color: silver;
color: black;
}

#footer p{
padding: 0;
margin: 0;
}

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

#footer{
text-align: center;
padding: 0;
margin: 0;
clear: both;
width: 100%;
background-color: silver;
color: black;
border-top: 1px solid #000000;
}

#footer p{
padding: 0;
margin: 0;
}

カスタマイズサンプル

▲Top