サイト練習:卵料理カフェ
卵料理カフェ Cockeyolly:完成版にリンク
★難しかったところ
文章と写真をdivで囲い、写真を右上に表示するためには、写真と文章をpタグで囲い、写真を前にもってくる。それに float: right; を指定する。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="sidebar"> <h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1> <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--> <div class="main"> <div class="food"> <h2><img src="img/title.gif" alt="今月のおすすめ"></h2> <h3 id="kinoko">きのこのオムライス</h3> <p class="photo"><img src="img/photo01.jpg" alt="きのこのオムライス"></p> <p class="detail">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span class="price">800円</span></p> </div><!--food--> <div class="food"> <h3 id="seafood"> シーフードスパゲッティ<br> バルサミコ風味</h3> <p class="photo"><img src="img/photo02.jpg" alt="シーフードスパゲッティ"></p> <p class="detail">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span class="price">900円</span></p> </div><!--food--> </div><!--main--> </div><!--container--> <div id="footer"> <small><p>2014 © 卵料理カフェ Cockeyolly</p></small> </div><!--footer--> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,h3,div,p,ul,li,small { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sana-serif; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } body { font-size: 16px; background: #FFF url(img/bg_body.png) repeat-y; } /*-------------------------------------------*/ /*layout*/ #container { width: 720px; overflow: hidden; } .main { width: 520px; float: right; } .sidebar { width: 136px; float: left; } #footer { width: 480px; margin-left: 200px; text-align: center; border-top: 1px solid #999; padding: 14px; } /*-------------------------------------*/ h1 { text-align: center; margin: 30px 0 40px 0; } ul { color: #FFF; } li { padding: 10px 0 10px 15px; } li a{ color: #FFF; font-weight: bold; } li a:hover, li a.this { color: #FF3; font-weight: bold; } /*-------------------------------------*/ h2 { text-align: center; padding: 60px 0 50px 0; } h3#kinoko { line-height: 1.8em; margin-bottom: 16px; padding-left: 10px; color: #633422; border-left: 15px solid #F09100; } h3#seafood { line-height: 1.2em; margin-bottom: 16px; padding-left: 10px; color: #633422; border-left: 15px solid #F09100; } .detail { width: 520px;; padding: 0 30px 20px 0; line-height: 1.5; float: righ; } .price { font-weight: bold; color: #600; } .food { width: 520px; margin-bottom: 40px; overflow: hidden; } .photo { float: right; margin-left: 2em; }