webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

Positionを使ったレイアウト

見本
f:id:yachin29:20150206105158j:plain


作例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Patisserie camellia</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1>Patisserie camellia</h1>
<ul>
<li id="info"><a href="#">Information</a></li>
<li id="menu"><a href="#">Menu</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="mail"><a href="#">Mail</a></li>
</ul>
</header>
<div id="content">
<ul>
<li id="ph01"><img src="img/photo01.jpg" alt="プリン"></li>
<li id="ph02"><img src="img/photo02.jpg" alt="ショートケーキ"></li>
<li id="ph03"><img src="img/photo03.jpg" alt="ワッフル"></li>
<li id="ph04"><img src="img/photo04.jpg" alt="コーヒー"></li>
<li id="ph05"><img src="img/photo05.jpg" alt="キャンドル"></li>
<li id="ph06"><img src="img/photo06.jpg" alt="イチゴプリン"></li>
<li id="ph07"><img src="img/photo07.jpg" alt="イチゴスムージー"></li>
<li id="ph08"><img src="img/photo08.jpg" alt="ヨーグルト"></li>
<li id="ph09"><img src="img/photo09.jpg" alt="ライト"></li>
<li id="ph10"><img src="img/photo10.jpg" alt="コーヒー"></li>
<li id="camp"><img src="img/campaign.gif" alt="キャンペーン情報"></li>
</ul>
</div>
</div>  <!--/container-->
</body>
</html>


スタイルシート

@charset "utf-8";
/*   -リセット-  */
html, body, div, h1,p,ul, ol, li, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;  /* 画像の下の隙間を無くす */
}

/*   -レイアウト-  */
body {
  background: #5B3E1C;
}
#container {
  background: #FFF url(img/shadow.gif) repeat-x left bottom;
  width: 800px;
  height: 410px;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}
header {
	width: 300px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 0;
}
h1 {
  width: 267px;
  height: 129px;
  background: url(img/logo.gif) no-repeat;
  position: absolute;
  left: 30px;
  top: 240px;
	/*隠し文字*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
header ul {
	width: 94px;
	height: 100px;
  position: absolute;
  left: 30px;
  top: 25px;
}
header ul li a {
  display: block;
	width: 94px;
	height: 25px;	
  /*隠し文字*/
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;


}
li#info a {
	background: url(img/info.gif) no-repeat;
}
li#info a:hover {
	background: url(img/info_h.gif) no-repeat;
}
li#menu a{
	background: url(img/menu.gif) no-repeat;
}
li#menu a:hover{
	background: url(img/menu_h.gif) no-repeat;
}
li#access a {
	background: url(img/access.gif) no-repeat;
}
li#access a:hover {
	background: url(img/access_h.gif) no-repeat;
}
li#mail a {
	background: url(img/mail.gif) no-repeat;
}
li#mail a:hover {
	background: url(img/mail_h.gif) no-repeat;
}


#content {
	width: 480px;
	height: 400px;
	position: absolute;
	top: 0;
	right: 0;
}

#content li {
	position: absolute;
}

li#photo1 {
  width: 160px;
  height: 160px;
	top: 80px;
	left: 320px;

}
li#photo2 {
  width: 160px;
  height: 160px;
	bottom: 0;
	left: 80px;
}
li#photo3 {
  width: 160px;
  height: 160px;
  left: 0;
  top: 0;
}
li#photo4 {
  width: 80px;
  height: 80px;
  left: 0;
  top: 160px;
}
li#photo5 {
  width: 80px;
  height: 80px;
  top: 0;
  left: 160px;
}
li#photo6 {
	width: 80px;
	height: 80px;
  left: 160px;
  top: 160px;
}
li#photo7 {
	width: 80px;
	height: 80px;
  left: 240px;
  top: 80px;
}
li#photo8 {
	width: 80px;
	height: 80px;
  left: 240px;
  top: 240px;
}
li#photo9 {
	width: 80px;
	height: 80px;
  left: 320px;
  bottom: 0;
}
li#photo10 {
	width: 80px;
	height: 80px;
  top: 240px;
	right: 0px;
}
li#cam {
	width: 170px;
	height: 100px;
	top: -23px;
	right: -15px;
}