CSSレイアウト演習＆Photoshop素材作成
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="CSS/style1.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/logo.gif" width="82" height="78" alt="卵料理カフェ Cockeyolly"></h1> <div id="nav"> <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="xxx@xxxx.com">メール</a></li> </ul> </div><!--nav--> </div><!--header--> <div id="content"> <h2><img src="img/title.gif" alt="今月のおすすめ" width="231" height="49"></h2> <h3>きのこのオムライス</h3> <p><img src="img/photo01.jpg" alt="きのこのオムライス" width="185" height="129">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：800円</p> <h3>シーフードスパゲッティバルサミコ風味</h3> <p><img src="img/photo02.jpg" alt="シーフードスパゲッティ" width="184" height="130">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円</p> </div><!--content--> <div id="footer"> <p>(c)2014 卵料理カフェ Cockeyolly</p> </div><!--footer--> </div><!--container--> </body> </html>
@charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, h1, h2, p, ul, li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic Pro",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: bottom;
}
/* body */
body {
font-size: 16px;
background: url(../img/01.png) repeat-y;
}
/* layout*/
#container {
width: 660px;
overflow: hidden;
}
#header {
float: left;
width: 160px;
}
#content {
float: right;
width: 470px;
clear: right;
}
#footer {
clear: both;
margin-left: 160px;
text-align: center;
}
#header h1 {
margin: 20px 0 60px 30px;
}
#content h2 {
margin: 48px 110px 165px 0;
}
#content h3 {
border-left: 6px solid #D58400;
font-size: 18px;
padding-left: 10px;
line-height: 1.2;
color: #A95600
}
#content p {
line-height: 1.5;
margin-bottom: 80px;
}
#content img {
float: right;
margin-left: 14px;
}
#nav {
margin-left: 11px;
}
nav li {
line-height: 1.6;
}
#nav li a {
color: #FFF;
font-weight: bold;
}
#nav li a:hover, #nav li.this a {
color: #6F2F00;
}
