Cafe Cockeylly

課題

html



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <title>Cafe Cockeyolly</title>
  <link rel="shortcut icon" href="images/favicon3.png" /> 
  <link href="css/base1.css" rel="stylesheet" type="text/css" media="screen, print" />
</head>
<body>
<div id="container">
  <div id="header">
    <h1>
      <img src="images/logo.gif" width="82" height="78" alt="おいしい卵料理レストラン Cockyolly" />
    </h1>
  </div>
  <div id="content">
    <h2><img src="images/title.gif" width="231" height="49" alt="今月のおすすめ" /></h2>
    <h3>きのこのオムライス</h3>
    <p class="photo">
    <img src="images/photo01.jpg" width="185" height="129" alt="きのことオムライスの写真" />
    ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。 ：800円
    </p>
    <h3>シーフードスパゲッティ・バルサミコ風味</h3>
    <p class="photo">
    <img src="images/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="#" class="this">今月のおすすめ</a></li>
      <li><a href="#">オリジナル雑貨</a></li>
      <li><a href="#">マップ</a></li>
      <li><a href="">メール</a></li>
    </ul>
  </div>
  <div id="footer">
    <address>Copyright(c)2010 Cafe Cockeylly</address>
  </div>
</div>
</body>
</html>

css



@charset "UTF-8";
body, div, h1, h2, h3, p, a, img, ul, li{
  margin: 0;
  padding: 0;
}
body {
  font-family:
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3",
    Meiryo,
    Osaka,
    "MS P Gothid",
    "ＭＳ Pゴシック",
    sans-serif;
  line-height: 1.0;
  background: url(../images/bg_img.gif) repeat-y left;
}
div#container {
  width: 640px;
  padding: 20px 0 0 0;
  overflow: hidden;

}
div#header {
  text-align: center;
  width: 150px;
  margin: 0 0 43px 0;
}
div#content {
  width: 450px;
  margin: -125px 0 0 40px;
  float: right;
  display: inline;
}
div#sidebar {
  width: 150px;	
}
div#footer {
  clear: both;
}
div#content h2 {
  text-align: center;
  margin: 0 0 80px 0;
}
div#content h3 {
  color: #7c533f;
  line-height: 1.3;
  margin: 0 0 10px 0;
  padding: 0 0 0 0.5em;
  border-left: 8px solid #cc6600;
}
div#content p.photo {
  font-size: 1em;
  line-height: 1.5;
  margin: 0 0 90px 0;
}
div#content p.photo img {
  margin: 0 0 0 1em;
  float: right;
  display: inline;
}
div#sidebar ul {
  list-style-type: none;
  font-weight: bold;
  line-height: 2em;
  margin: 0 0 0 18px;
}
div#sidebar li a {
  color: #ffffff;
  text-decoration: none;
}
div#sidebar li a:hover {
  color: #ffff99;
  text-decoration: none;
}
div#sidebar .this {
  color: #ffff99;
}
div#footer address {
  color: #666666;
  font-size: 0.8em;
  font-style: normal;
  text-align: center;
  margin: 0 0 0 190px;
  padding-top: 10px;
  border-top: 1px solid #999999;
}