　実践演習課題13 - イチから学ぶWeb制作

演習課題H13
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="H13.css">
<title>camellia</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="img/logo.gif" width="267" height="129" alt="ロゴ">
</div><!-- /header -->
<div id="wrapper">
<div id="content">
<p class="campaign"><img src="img/campaign.gif" width="170" height="100" alt="キャンペーン"></p>
<p class="prin"><img src="img/photo01.jpg" width="160" height="160" alt="プリン"></p>
<p class="cake"><img src="img/photo02.jpg" width="160" height="160" alt="ショートケーキ"></p>
<p class="waffle"><img src="img/photo03.jpg" width="160" height="160" alt="ワッフル"></p>
<p class="coffee"><img src="img/photo04.jpg" width="80" height="80" alt="コーヒー"></p>
<p class="kyandol"><img src="img/photo05.jpg" width="80" height="80" alt="キャンドル"></p>
<p class="ichigoprin"><img src="img/photo07.jpg" width="80" height="80" alt="イチゴプリン"></p>
<p class="ichigo"><img src="img/photo06.jpg" width="80" height="80" alt="イチゴスムージー"></p>
<p class="yooglt"><img src="img/photo08.jpg" width="80" height="80" alt="ヨーグルト"></p>
<p class="light"><img src="img/photo09.jpg" width="80" height="80" alt="ライト"></p>
<p class="coffee2"><img src="img/photo10.jpg" width="80" height="80" alt="コーヒー2"></p>
</div><!-- /content -->
<div id="sidebar">
<ul>
<li class="info"><a href="#"><span>インフォメーション</span></a></li>
<li class="menu"><a href="#"><span>メニュー</span></a></li>
<li class="access"><a href="#"><span>アクセス</span></a></li>
<li class="mail"><a href="#"><span>メール</span></a></li>
</ul>
</div><!-- /sidebar -->
</div><!-- /wrapper -->
</div><!-- /container -->
</body>
</html>

CSS

@charset "utf-8";


/* リセット */
body,div,p,li,ul,img{
  margin:0;
  padding:0;
}
a{
  text-decoration:none;
}
ul{
  list-style-type:none;
}


/*全体*/

body{
  background-color:#5F3D18;
}

#container{
  width:780px;
  height:410px;
  margin:100px auto;
  position:relative;
  background:url(img/shadow.gif) #FFFFFF repeat-x left bottom;
}

/*ヘッダー*/
#header{
  position:absolute;
  left:30px;
  bottom:50px;
}

/*コンテンツ 写真*/
.campaign{
  position:absolute;
  right:-15px;
  top:-23px;
}

.prin{
  position:absolute;
  right:0;
  top:80px;
}

.cake{
  position:absolute;
  left:380px;
  bottom:6px;
}
.waffle{
  position:absolute;
  top:0;
  left:300px;
}
.coffee{
  position:absolute;
  top:160px;
  left:300px;
}
.kyandol{
  position:absolute;
  top:0;
  left:460px;
}
.ichigoprin{
  position:absolute;
  top:80px;
  right:160px;
}
.ichigo{
  position:absolute;
  top:160px;
  right:240px;
}
.yooglt{
  position:absolute;
  top:240px;
  right:160px;
}
.light{
  position:absolute;
  bottom:6px;
  right:80px;
}
.coffee2{
  position:absolute;
  top:240px;
  right:0;
}

/*サイドバー*/
#sidebar span{
  visibility:hidden;
}

#sidebar li a{
  display:block;
}
.info{
  background:url(img/m_info.gif) no-repeat;
}
.menu{
  background:url(img/m_menu.gif) no-repeat;
}
.access{
  background:url(img/m_access.gif) no-repeat;
}
.mail{
  background:url(img/m_mail.gif) no-repeat;
}

#sidebar li{
  padding-bottom:10px;
}

#sidebar ul{
  padding:20px 0 0 30px;
}

↓