Positionレイアウト　その2 - WEBサイト制作の勉強

f:id:yachin29:20150304131112p:plain

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Positionでのレイアウト</title>
<link href="css/style2.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header">
<h1>四季の花</h1>
<ul id="nav">
<li id="sp"><a href="#">spring</a></li>
<li id="su"><a href="#">summer</a></li>
<li id="fa"><a href="#">fall</a></li>
<li id="wi"><a href="#">winter</a></li>
</ul>
</div><!--/header-->
<div id="wrap">
<ul>
<li id="ph01"><img src="img/01.JPG" alt="花"></li>
<li id="ph02"><img src="img/02.JPG" alt="花"></li>
<li id="ph03"><img src="img/03.JPG" alt="花"></li>
<li id="ph04"><img src="img/04.JPG" alt="花"></li>
<li id="ph05"><img src="img/05.JPG" alt="花"></li>
<li id="ph06"><img src="img/06.JPG" alt="花"></li>
<li id="ph07"><img src="img/07.JPG" alt="ひまわり"></li>
</ul>
</div><!--/wrap-->
</div><!--/container-->
</body>
</html>

style.css

@charset "utf-8";
/*リセット*/
body, div, h1, ul, li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none; /* マーカーを消す */
}
img {
  vertical-align: bottom; /*画像の下の空きを無くす*/
}

/*レイアウト*/
body {
  background: #666;
}
#container {
  width: 1200px;
  margin: 0 auto;
  background: #FFF;
  position: relative;
}
#header {
  width: 200px;
  height: 800px;
  background:#FFFFFF;
  position: absolute;
  top: 0;
  left: 0;
}
h1 {
  width: 200px;
  height: 200px;
  background: url(../img/logo.jpg) no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  
  /*隠し文字*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

ul#nav {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 200px;
  left: 0;
}
ul#nav li {
  width: 200px;
  height: 50px;
}
ul#nav li a {
  display: block;
  width: 200px;
  height: 50px;
  
  /*隠し文字*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
ul#nav li#sp a {
  background: url(../img/nav01.gif) no-repeat;
}
ul#nav li#sp a:hover {
  background:url(../img/nav01_h.gif) no-repeat;
}
ul#nav li#su a {
  background: url(../img/nav02.gif) no-repeat;
}
ul#nav li#su a:hover {
  background: url(../img/nav02_h.gif) no-repeat;
}
li#fa a {
  background: url(../img/nav03.gif) no-repeat;
}
li#fa a:hover {
  background: url(../img/nav03_h.gif) no-repeat;
}
li#wi a {
  background: url(../img/nav04.gif) no-repeat;
}
li#wi a:hover {
  background: url(../img/nav04_h.gif) no-repeat;
}

#wrap {
  width: 1000px;
  height: 800px;
  margin: 0 auto;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  right: 0;
}
#ph01 {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 200px;
  left: 200px;
}
#ph02 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
#ph03 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 400px;
  left: 0;
}
#ph04 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 200px;
}
#ph05 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 600px;
}
#ph06 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 600px;
}
#ph07 {
  width: 200px;
  height: 400px;
  position: absolute;
  top: 200px;
  right: 0;
}