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

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

Positionを使ったレイアウト2

CSS

夏休みの宿題

見本
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">
<div id="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>
</div>
<div id="image-box">
<ul>
<li id="camp"><img src="img/campaign.gif" alt="キャンペーン情報"></li>
<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>
</ul>
</div>
</div>  <!--/container-->
</body>
</html>

スタイルシート

@charset "utf-8";
/*   -リセット-  */
html, body, div, h1, h2, h3, h4, h5, h6,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;
  margin:50px auto 0;
  position: relative;
}
#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;
}

#image-box {
	width: 480px;
	height: 400px;
	position: absolute;
	top: 0;
	right: 0;
}

#image-box li {
	position: absolute;
}
li#camp {
	width: 170px;
	height: 100px;
	top: -23px;
	right: -15px;
}
li#ph01 {
  width: 160px;
  height: 160px;
	top: 80px;
	left: 320px;

}
li#ph02 {
  width: 160px;
  height: 160px;
	bottom: 0;
	left: 80px;
}
li#ph03 {
  width: 160px;
  height: 160px;
  left: 0;
  top: 0;
}
li#ph04 {
  width: 80px;
  height: 80px;
  left: 0;
  top: 160px;
}
li#ph05 {
  width: 80px;
  height: 80px;
  top: 0;
  left: 160px;
}
li#ph06 {
	width: 80px;
	height: 80px;
  left: 160px;
  top: 160px;
}
li#ph07 {
	width: 80px;
	height: 80px;
  left: 240px;
  top: 80px;
}
li#ph08 {
	width: 80px;
	height: 80px;
  left: 240px;
  top: 240px;
}
li#ph09 {
	width: 80px;
	height: 80px;
  left: 320px;
  bottom: 0;
}
li#ph10 {
	width: 80px;
	height: 80px;
  top: 240px;
	right: 0px;
}

http://yachin29.com/photoshop/position.zip