Restaurant & Interior shop

Project

Restaurant

Project Site▲

HTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN" "http://www.w3.org//TR/xhtml1/DTD/xhtml1-
strict.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>課題１：今月のおすすめ</title>
<link href="../css/restaurant.css" rel="stylesheet" type="text/css" 
media="screen, print" />
</head>
<body>
<!--▼#container-->
<div id="container">
<!--▼#header-->
<div id="header">
<h1><img src="../images/logo.gif" width="82" height="78" 
alt="おいしい卵料理レストラン　Cockyolly" /></h1>
</div>
<!--▲#header-->
<!--▼#content-->
<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>シーフードスパゲッティ<br />
バルサミコ風味</h3>
<p class="photo"><img src="../images/photo02.jpg" width="184" 
height="130" alt="シーフードスパゲッティ&lt;br /&gt;バルサミコ風味"/>
エビ･イカ･アサリ･の入ったシェフご自慢のスパゲッティです。バルサミコ
酢と生クリームで作ったさっぱりソースをお楽しみ下さい。：900円</p>
</div>
<!--▲#content-->
<!--▼#sidebar-->
<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>
<!--▲#sidebar-->
<!--▼#footer-->
<div id="footer">
<address>Copyright(c)2010 cafeCockeyolly</address>
</div>
<!--▲#footer-->
</div>
<!--▲#container-->
</body>
</html>

CSS

@charset "UTF-8";

/* reset */

*[Design][Design][Design] {
    margin: 0;
    padding: 0;
}

/* layout */

body {
    font-family: 
        sans-serif;
    font-size: 0.9em;	
    background-image: url(../images/bg_img.gif);
    background-repeat: repeat-y;
    background-color: #FFF;
}

#container {
    width: 640px;
    height: auto;
}

#header {
    width: 150px;
}

#content {
    width: 460px;
    float: right;
    margin: 0 0 0 30px;
}

#sidebar {
    width: 150px;
    float: left;
}

#footer {
    clear: both;
    text-align: center;
    margin: 0 0 0 170px;
    padding: 10px 0 0 0;
    border-top: 1px solid #999;
}

/* header */
#header h1 {
    text-align: center;
    margin: 20px 0 60px 0;
}

/* content */

#content h2{
    text-align: center;
    margin: -105px 0 60px 0; /* ネガティブマージン */
}

#content h3 {
    COLOR: #7C533F;
    line-height: 1.3;
    margin: 0 0 15px 0;
    padding: 0 0 0 0.5em;
    border-left: 8px solid #DA8125;
}

#content p.photo {
   font-size: 1em;
   line-height: 1.6;
   margin:0 0 80px 0;
}

#content p.photo img {
    float: right;
    margin :0 0 0 1em;
}

/* sidebaer */

#sidebar ul {
    list-style-type: none;
    font-weight: bold;
    line-height :2;
    margin: 0 0 0 18px;
}

#sidebar li a {
     color: #FFF;
     text-decoration: none;
}

sidebar ul li this {
    color: #FF9;
}

/* footer */

#footer {
    color: #999;
    font-style: normal;
    font-size: 0.8em;
}
/* hoverは記述してもよい */