実践演習課題H13C13

課題

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>H13C13</title>
<link rel="stylesheet" href="css/H13C13.css">
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="content">
<h1><img src="img/13/logo.gif" width="267" height="129" alt="Patisserie camellia"></h1>
<div id="nav">
<ul>
<li id="info"><a href="#">info</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><!--/nav-->
</div><!--/content-->
<div id="sidebar">
<img src="img/13/photo03.jpg" width="160" height="160" alt="ワッフル">
<img src="img/13/photo05.jpg" width="80" height="80" alt="コーヒー">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/photo07.jpg" width="80" height="80" alt="イチゴスムージー">
<img class="right" src="img/13/photo01.jpg" width="160" height="160" alt="プリン">
<img src="img/13/photo04.jpg" width="80" height="80" alt="コーヒー">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/photo06.jpg" width="80" height="80" alt="イチゴプリン">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/photo02.jpg" width="160" height="160" alt="ショートケーキ">
<img src="img/13/photo08.jpg" width="80" height="80" alt="ヨーグルト">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/photo10.jpg" width="80" height="80" alt="コーヒー">
<img src="img/13/white.gif" width="80" height="80" alt="">
<img src="img/13/photo09.jpg" width="80" height="80" alt="ライト">
<img src="img/13/white.gif" width="80" height="80" alt="">
</div><!--/sidebar-->
</div><!--/wrapper-->
<div id="campaign">
<a href="#"><img src="img/13/campaign.gif" width="170" height="100" alt="キャンペーン情報"></a>
</div><!--/campaign-->
</div><!--/container-->
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body , div, h1, ul, li, img{
  padding: 0;
  margin: 0;
}
ul{
 list-style: none;
}
#container{
  width:800px;
  background: #5f3d18 ;
  padding: 40px 40px 30px 40px;
  margin: 50px auto;
  position: relative;
}
#wrapper{
  height:410px;
  background: #ffffff url(../img/13/shadow.gif) repeat-x left bottom;
  overflow: hidden;
}
#content{
  width:260px;
  height: 360px;
  padding: 20px 30px;
  float:left;
  position: relative;
}
h1{
  position: absolute;
  left: 30px;
  bottom: 20px;
}
#nav{
  margin-bottom: 110px;
}
#nav ul{
}
#nav ul li{
  margin-bottom: 5px;
}
#nav ul li a{
  width:95px;
  height: 25px;
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
#nav ul li#info a{
  background:url(../img/13/m_info.gif) no-repeat;
}
#nav ul li#menu a{
  background:url(../img/13/m_menu.gif) no-repeat;
}
#nav ul li#access a{
  background:url(../img/13/m_access.gif) no-repeat;
}
#nav ul li#mail a{
  background:url(../img/13/m_mail.gif) no-repeat;
}
#sidebar{
  width: 480px;
  height: 400px;
  overflow:hidden;
  float:right;
}
#sidebar .white{
  background:#CCC;
}
#sidebar img,#sidebar .white{
  float:left;
}
#sidebar img.right{
  float: right;
}
#campaign{
  width:170px;
  height:100px;
  position: absolute;
  right: 25px;
  top: 17px;
}
#campaign img{
  border:none;
}

  • h1をpositionでnavより下に配置。親は#content。
  • ケーキ等の画像はfloatで配置。空白部分は白い四角の画像を作成して埋めた。
  • キャンペーン情報はposition配置。親は#container。