96's blog

WEBサイト制作科 6ヶ月コース

実践演習課題H13C13

HTML

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>H13C13</title>
<linkrel="stylesheet"href="css/H13C13.css">
</head>
<body>
<divid="container">
<divid="wrapper">
<divid="content">
<h1><imgsrc="img/13/logo.gif"width="267"height="129"alt="Patisserie camellia"></h1>
<divid="nav">
<ul>
<liid="info"><ahref="#">info</a></li>
<liid="menu"><ahref="#">menu</a></li>
<liid="access"><ahref="#">access</a></li>
<liid="mail"><ahref="#">mail</a></li>
</ul>
</div><!--/nav-->
</div><!--/content-->
<divid="sidebar">
<imgsrc="img/13/photo03.jpg"width="160"height="160"alt="ワッフル">
<imgsrc="img/13/photo05.jpg"width="80"height="80"alt="コーヒー">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/photo07.jpg"width="80"height="80"alt="イチゴスムージー">
<imgclass="right"src="img/13/photo01.jpg"width="160"height="160"alt="プリン">
<imgsrc="img/13/photo04.jpg"width="80"height="80"alt="コーヒー">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/photo06.jpg"width="80"height="80"alt="イチゴプリン">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/photo02.jpg"width="160"height="160"alt="ショートケーキ">
<imgsrc="img/13/photo08.jpg"width="80"height="80"alt="ヨーグルト">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/photo10.jpg"width="80"height="80"alt="コーヒー">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
<imgsrc="img/13/photo09.jpg"width="80"height="80"alt="ライト">
<imgsrc="img/13/white.gif"width="80"height="80"alt="">
</div><!--/sidebar-->
</div><!--/wrapper-->
<divid="campaign">
<ahref="#"><imgsrc="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;
}

f:id:webtm2013:20130827105211p:image

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