読者です 読者をやめる 読者になる 読者になる

bodyタグ以外で背景色を横軸全体でかける方法

①#headerで全体に背景色の設定

全体に#containerをかけない。

#headerには幅の設定はしない。

#header内のタグに幅を設定する。

幅をつけたタグにmargin:0 auto;を設定する。

#headerに背景色を設定する。

 

②ナビゲーションの横に設定する方法

ulタグに幅を設定してmargin:0 auto;を設定する

ulタグの外側にdivを設定する。そのdiv

には幅は設定せずに背景色を設定する。

 

 

今回の内容とは少し違いますが、ナビゲーションのfloatしたタグがdiv

要素の中にある場合、div横幅いっぱいに幅を設定するとmargin:0;に設定しても

中心に配置できないので注意が必要です。

 

f:id:paris1204:20160217111042p:plain

f:id:paris1204:20160217111047p:plain

 

 

HTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="background.css">

<title>コンテイナーを使わずに画像を中心にして個別に背景を設定する方法</title>
</head>

<body>
<div id="header">
<h1>aaaaa</h1>
</div>

<div id="nav1back">
<ul id="nav1">
<li><a href="aaa.html" class="this">aaaa</a></li>
<li><a href="bbb.html">aaaa</a></li>
<li><a href="ccc.html">aaaa</a></li>
<li><a href="ddd.html">aaaa</a></li>
<li><a href="eee.html">aaaa</a></li>

</ul>
</div><!--#nav1back-->

<div id="wrapper">
<div id="content">
<p>左右の背景色はbodyに設定してあるもの</p>
</div><!--#content-->
</div><!--#wrapper-->


<div id="footer">
<p>&copy;aaaaaa</p>
<ul id="nav2">
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>

</ul>

</div><!--footer-->

</body>
</html>

 

 

 

 

 

 

CSS

 

@charset "UTF-8";
/* CSS Document */
/*reset*/
html,body,h1,ul,li,p{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;}
a{text-decoration:none;}

ul{list-style:none;}
/*body*/
body{font-size:16px;
background:#D4E841;}

/*#header*/

div#header{background:#78E6E8;
height:100px;
}

#header h1{line-height:100px;
width:1000px;
text-align:center;
margin:0 auto;}

/*navigation*/
#nav1back{background:#F5A0A2;}


ul#nav1{width:800px;
margin:0 auto;
padding:20px 0;
overflow:hidden;
}

ul#nav1 li{width:160px;
background:#FFFFFF;
text-align:center;
height:60px;
float:left;}

ul#nav1 li a{line-height:58px;
display:block;
color:#444444;
border-top:1px #181395 solid;
border-right:1px #181395 solid;
border-bottom:1px #181395 solid;}
ul#nav1 li:first-child a{border-left:1px #181395 solid;}

ul#nav1 li a:hover,ul#nav1 li a.this{background:#C0EED5;}

 

/*#wrapper*/
#wrapper{width:1000px;
margin:0 auto;
background:white;}

#content p{line-height:1000px;
text-align:center;
font-size:50px;}


/*#footer*/
#footer{
background:#A76F2F;}

#footer p{line-height:30px;
width:1000px;
margin:0 auto;
text-align:center;}

ul#nav2{width:800px;
margin:0 auto;
padding:20px 0;
overflow:hidden;
}

ul#nav2 li{width:160px;
background:#FFFFFF;
text-align:center;
height:60px;
float:left;}

ul#nav2 li a{line-height:58px;
display:block;
color:#444444;
border-top:1px #181395 solid;
border-right:1px #181395 solid;
border-bottom:1px #181395 solid;}
ul#nav2 li:first-child a{border-left:1px #181395 solid;}