授業課題「Wants Cake」サイト
5時間の授業時間のほとんどを費やして、
テキスト等にほとんど頼らず打ち上げたのがここまで。
先生に改善点をアドバイスしていただいたので、修正する余地がある状態。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Wants Cake|ホーム</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <div id="container"> <h1><img src="images/logo.jpg" alt="Wants Cake"></h1> <div id="nav"> <ul> <li class="home"><a href="#">ホーム</a></li> <li class="pro"><a href="products.html">商品のご案内</a></li> <li class="shop"><a href="shop.html">店舗案内</a></li> <li class="order"><a href="order.html">お問い合せ</a></li> </ul> </div> <div id="bb"><img src="images/main_photo.jpg" width="680" height="236" alt="Wants Cakeイメージ"></div> <div id="wrapper"> <div id="content"> <img src="images/news_title.gif" alt="新着情報"> <dl> <dt>2008.10.10</dt> <dd>スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span class="deco">N.Y.チーズケーキ</span>、<span class="deco">レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd> <dt>2008.09.25</dt> <dd><span class="deco">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="deco">5%オフ</span>！</dd> </dl> <img src="images/recommend_title.gif" alt="おすすめ商品"> <div id="wrap_in"> <div class="ph"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真"></div> <div class="cap"> <h2>チーズスフレ</h2> <p class="price">1個 480円</p> <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a> <a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a> </div> </div> <div id="wrap_in"> <div class="ph"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真"></div> <div class="cap"> <h2>苺のバースデーケーキ</h2> <p class="price">1個 2,480円</p> <p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a> <a href="images/item_photo02.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a> </div> </div> <div id="wrap_in"> <div class="ph"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真"></div> <div class="cap"> <h2>焼菓子の詰め合わせ</h2> <p class="price">1箱 1,680円</p> <p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。 </p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a> <a href="images/item_photo03.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a> </div> </div> </div> <div id="side"> <ul> <li><img src="images/banner01.jpg"></li> <li><img src="images/banner02.jpg"></li> </ul> </div> </div> <div id="footer"><p>Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved.</p></div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /*リセット*/ * { margin: 0; padding: 0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.5em; } /*いちばんうしろ*/ body { background-color: #015790; background-image: url(images/bg.jpg); background-repeat: repeat-x; width: 800px: } /*いちばんうしろに乗ってるエリア*/ #container { margin: 0 auto; background-color: #fff; width: 720px; height: auto; } h1 { margin: 0 20px 10px; padding-top: 10px; } #bb img { margin: 0 20px; } #nav { background-image: url(images/menubar.jpg); background-repeat: repeat-x; margin: 10px 20px; width: 680px; height: 36px; } #nav ul li { display: inline; list-style-type: none; } #nav li.home{ background-image: url(images/menu_index.gif); width: 136px; height: 36px; } #nav li .home .hover { background-position: -36px; } /**/ #wrapper { margin: 10px 0; width: 720px: } #content { float:right; width: 475px; margin-bottom: 10px; } /*contentの中*/ dl { margin: 10px 10px 20px; } dt { border-left: 5px solid #e3e3e3; text-indent: 0.5em; font-weight: bold; } dd { margin-left: 13px; } dd span.deco { color: #F06; font-weight: bolder; } #wrap_in { width:475px; height: auto; margin: 10px 0; border-bottom: 2px dotted #666; } #wrap_in .cap { float:right; width: 315px; height: auto; } #wrap_in .cap h2 { font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:1.5em; color: #015790; font-weight: bold; margin-top: -7px; } #wrap_in .ph { float: left; width: 150px; margin: 0 10px 10px 0; } #wrap_in p .price { color #ccc; line-height: 2.0em; } /*ここからside*/ #side { float: left; margin: 0 10px 0 20px; width: 195px; } #side ul li { display: block; margin-bottom: 10px; } /*wrapperおわり*/ #footer { clear: both; width: 720px; height: 62px; background-image: url(images/footer_back.gif); background-repeat: repeat-x; } #footer p { font-size: 0.875em; text-align: center; padding-top:20px; }
ナビゲーションバーが苦手という致命的な欠陥が！
でも何気に中央寄せは克服済み。
