<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/h04.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/卵カフェ/logo.gif" width="82" alt="卵料理カフェ Cockeyolly"></h1>
</div><!--header end-->
<div id="content">
<h2><img src="img/卵カフェ/title.gif" width="231" alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<p class="item"><img src="img/卵カフェ/photo01.jpg" width="185" alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：800円</p>
<h3>シーフードスパゲッティシーフードスパゲッティ<br>バルサミコ風味</h3>
<p class="item"><img src="img/卵カフェ/photo02.jpg" width="184" alt="シーフードスパゲッティ">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円</p>
</div><!--content end-->
<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><!--sidebar-->
<div id="footer">
<p><small>(c)2013 卵料理カフェ Cockeyolly</small></p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
color:#333;
font-size:14px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
background: url(../img/%E5%8D%B5%E3%82%AB%E3%83%95%E3%82%A7/bg_img.gif) repeat-y 0 0;
}
ul {
list-style:none;
}
a {
text-decoration: none;
}
img {
vertical-align: bottom;
}
#container {
width: 610px;
padding-top: 10px;
overflow: hidden;
}
#header {
width: 150px;
text-align:center;
margin-bottom: 40px;
}
#content {
width:430px;
float:right;
margin: -105px 0 0 20px;
}
#sidebar {
width:150px;
padding-left: 10px;
}
#footer {
clear: both;
}
h1 {
padding-top: 10px;
}
h2 {
text-align: center;
margin-bottom: 60px;
}
h3 {
border-left: 8px solid #FF9933;
padding-left: 10px;
margin-bottom:15px;
}
p.item{
margin-bottom:80px;
}
p.item img {
float:right;
margin-left: 10px;
}
#sidebar ul{
font-size:16px;
font-weight:bold;
color: #FFFFFF;
}
#sidebar ul li {
padding: 5px;
}
#sidebar ul li a{
color: #FFFFFF;
}
#sidebar ul li a:hover{
color: #FF9;
}
#footer p{
margin-left:180px;
padding: 10px;
text-align:center;
color:#999;
border-top: #CCC solid 2px;
}
