演習課題４ - イチから学ぶWeb制作

実践演習課題H04
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="h04.css">
<title>卵料理カフェ Cockeyolly</title>
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.gif" width="82" height="78" alt="cokeyolly"></h1>
</div>
<div id="content">
<h2><img src="img/title.gif" width="231" height="49" alt="タイトル"></h2>
<h3>きのこのオムライス</h3>
<p class="photo"><img src="img/photo01.jpg" width="185" height="129" alt="オムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：800円</p>

<h3>シーフードスパゲッティシーフードスパゲッティ<br>
バルサミコ風味</h3>
<p class="photo"><img src="img/photo02.jpg" width="184" height="130" alt="パスタ">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円</p>
</div>
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</div>
<div id="footer">
<p><small>(c)2013  卵料理カフェ Cockeyolly</small></p>
</div>
</div><!-- /container -->
</body>
</html>

CSS

@charset "UTF-8";

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

/*全体*/
body{
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.5;
  background: url(./img/bg_img.gif)repeat-y;
  color: #333333;
}

#container{
  width: 650px;
  height: auto;
  padding-top: 20px;
  overflow: hidden;
}

/*ヘッダー*/
#header{
  width: 150px;
  margin-left: 30px;
}

/*コンテンツ*/
#content{
  width: 460px;
  margin:-130px 0 0 30px;
  float: right;
}
#content h2{
  text-align: center;
  margin-bottom: 80px;
}
#content h3{
  border-left: 10px solid #FF9900;
  color: #009966;
  padding-left: 10px;
}
p img{
  float: right;
  margin-left: 10px;
}
.photo{
  padding-bottom: 100px;
  font-weight: bold;
}

/*サイドバー*/
#sidebar {
  width: 150px;
  margin: 50px 0 0 10px;
}
#sidebar ul{
  line-height: 2.0;
  font-weight: bold;
  color: #FFFFFF;
}

#sidebar li a:hover,#sidebar li a:active{
  color: #FFFF66;
}

/*フッター*/
#footer{
  width: 460px;
  clear: both;
  color: #66CC99;
  border-top: 2px solid #66CC99;
  margin: 0 0 30px 160px;
  text-align: center;
  padding-top: 10px;
}

ポイント
・ネガティブマージンを使い、お店のロゴと見出しの位置を合わせる。
・#contentにfloat:rightを指定し、中の画像(img)にもfloat:rightを指定する。
・フッターに clear: bothを指定しfloatを解除する。