実践課題【CSS10】 おいしい卵料理レストラン Cockyolly
課題
【CSS10】
解答
実践課題【CSS10】 おいしい卵料理レストラン Cockyolly - jsdo.it - share JavaScript, HTML5 and CSS
<?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>おいしい卵料理レストラン Cockyolly</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; } #container { width: 740px; height: auto; background-image: url(http://jsrun.it/assets/A/b/v/c/Abvc8.gif); background-repeat: repeat-y; background-position: 153px 40px; } #wrapper { width: 700px; height: auto; overflow: auto; } #sidebar { width: 160px; height: 760px; float: left; background-color: #F09100; background-image: url(http://jsrun.it/assets/v/o/q/e/voqeh.gif); background-repeat: no-repeat; background-position: 40px 30px; } #content { width: 460px; height: auto; float: right; border-bottom: 2px solid #aaa; margin-bottom: 0; padding: 50px 20px; } h1 { text-align: center; } h2 { font-size: 1.275em; color: #805356; border-left: 10px solid #E37E12; padding-left: 10px; margin: 50px 0 20px; } p { font-size: 1.0em; } .menu { float: right; margin: 0 5px; } .price { font-size: 1.2em; font-weight: bold; padding-bottom: 20px; color: #f90; } ul { list-style-type: none; padding: 150px 0 0 20px; } li { padding: 5px 0; } li a { font-size: 1.1em; font-weight: bold; text-decoration: none; } li a:link,li a:visited { color: #fff; } li a:hover { color: #EDE07A; } #footer { float: right; width: 460px; text-align: center; margin: 10px 0; } address { color: #aaa; font-weight: bold; font-style: normal; } </style> </head> <body> <div id="container"> <div id="wrapper"> <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> <div id="content"> <h1><a href="#"><img src="http://jsrun.it/assets/t/g/9/U/tg9Ui.gif" alt="今月のおすすめ" title="今月のおすすめ" /></a></h1> <h2>きのこのオムライス</h2> <p><img src="http://jsrun.it/assets/d/e/q/4/deq4J.jpg" alt="きのこのオムライス" class="menu" />ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。</p> <p class="price">800円</p> <h2>シーフードスパゲッティシーフードスパゲッティバルサミコ風味</h2> <p><img src="http://jsrun.it/assets/1/B/O/B/1BOBQ.jpg" alt="シーフードスパゲッティシーフードスパゲッティバルサミコ風味" class="menu" />エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。</p> <p class="price">900円</p> </div> <div id="footer"> <address>Copyright(c)2012 Cafe Cockeyolly</address> </div> </div> </div> </body> </html>