bodyタグ以外で背景色を横軸全体でかける方法
①#headerで全体に背景色の設定
全体に#containerをかけない。
#headerには幅の設定はしない。
#header内のタグに幅を設定する。
幅をつけたタグにmargin:0 auto;を設定する。
#headerに背景色を設定する。
②ナビゲーションの横に設定する方法
ulタグに幅を設定してmargin:0 auto;を設定する
ulタグの外側にdivを設定する。そのdiv
には幅は設定せずに背景色を設定する。
*今回の内容とは少し違いますが、ナビゲーションのfloatしたタグがdiv
要素の中にある場合、div横幅いっぱいに幅を設定するとmargin:0;に設定しても
中心に配置できないので注意が必要です。
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>©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>
@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;}