課題 Cafe Cockeyolly
HTMLのid設定から間違っていて、先生のお手本を見ながらどうにか仕上げた。
やっぱり練習が全然足りない・・・・・
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" /> <mrta http-equiv="Content-Style-Type" content="text/css" /> <title>Cafe Cockeyolly</title> <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>シーフードスパゲッティシーフードスパゲッティ<br> バルサミコ風味</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="#">今月のおすすめ</a></li> <li><a href="#">オリジナル雑貨</a></li> <li><a href="#">マップ</a></li> <li><a href="mailto:xxx@xxx.com">メール</a></li> </ul> </div> <div id="footer"> <adress> Copyright(c)2010 Cafe Cockeyolly </adress> </div> </div> </body> </html>
@charset "UTF-8"; * { margin: 0; padding: 0; } body { color: #000; font-size: 0.9em; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS PGthic", "MS Pゴシック", sans-serif; background-color: #fff; background-image: url(../images/bg_img.gif); background-repeat: repeat-y; } ul { list-style-type: none; } img { border-style: none; } #container { width: 640px; height: auto; } #header { width: 150px; } #content { width: 460px; height: auto; margin: 0 0 0 30px; float: right; } #sidebar { width: 150px; } #footer { clear: both; text-align: center; margin: 0 0 0 170px; padding: 8px 0 0 0; border-top: 1px solid #aaa; } h1 { text-align: center; margin: 20px 0 20px 0; } h2 { text-align: center; margin: -100px 0 50px 0; } h3 { color: #7C533F; border-left: 8px solid #DA8125; line-height: 1.3; margin: 0 0 15px 0; padding: 0 0 0 10px; } p.photo { font-size: 1em; line-height: 1.6; margin: 0 0 70px 0; } p.photo img { float: right; padding: 0 0 0 10px; } #sidebar ul { line-height: 2.0; font-weight: bold; margin: 0 0 0 15px; width: 120px; float: right; float: left; } li a { color: #fff; display: block; text-decoration: none; } li a:hover { color: #FF9; } adress { color: #aaa; font-size: 0.8em; }