サイト構築「Wants Cake」
バックアップ用に、トップページをアップします。
http://web-study.lolipop.jp/felica/0525_Cake/index1.html
メモ
スペルミス、指定の間違いが多い
codaのバグ？に注意
footer→containerに入れずに,margin: 0 auto; , width:700px指定
新着情報の上に空きができてしまったので。margin: -6px
背景の画像を引き伸ばす。
課題ページ
http://d.hatena.ne.jp/web-css-design/20120528/p1
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>ケーキのおいしいお店：WantsCake</title> <link href="a.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <!-- ▼▼▼▼▼▼▼▼container▼▼▼▼▼▼▼▼ --> <div id="container"> <div id="header"> <h1><img src="images/logo.jpg" alt="logo"></h1> </div> <div id="nav"> <ul> <li id="nav1"><a href="#"></a></li> <li id="nav2"><a href="#"></a></li> <li id="nav3"><a href="#"></a></li> <li id="nav4"><a href="#"></a></li> </ul> </div> <h1><img src="images/main_photo.jpg" alt="チーズケーキ" width="" height="" /></h1> <!-- ▼▼▼▼▼▼▼▼wrapper▼▼▼▼▼▼▼▼ --> <div id="wrapper"> <div id="banner"> <div id="banner1"> <img src="http://web-study.lolipop.jp/felica/0525_Cake/images/banner01.jpg"> </div> <div id="banner2"> <img src="http://web-study.lolipop.jp/felica/0525_Cake/images/banner02.jpg"> </div> </div> <!-- ▼▼▼▼▼▼▼▼content▼▼▼▼▼▼▼▼ --> <div id="content"> <h3 class="index1_h3"><img src="http://web-study.lolipop.jp/felica/0525_Cake/images/news_title.gif" alt="新着情報"></h3> <dl> <dt>2008.10.10</dt> <dd> スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<font color="red">N.Y.チーズケーキ</font>、<font color="red">レアチーズケーキ</font>のオーダー受付を再開させて頂きました。 </dd> <dt>2008.09.25</dt> <dd><font color="red">スペシャルキャンペーン</font>実施中！ 人気のケーキが<font color="red">5%オフ！</font></dd> </dl> <h3 class="index1_h3"><img src="http://web-study.lolipop.jp/felica/0525_Cake/images/recommend_title.gif" alt="おすすめ商品"></h3> <!-- ▼▼▼▼▼▼▼▼item1▼▼▼▼▼▼▼▼ --> <div id="item1"> <div class="item"> <h3 class="index1_h3"> <img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_item_photo1.jpg"></h3> </div> <div class="content1"> <h2 class="index1_h2">チーズスフレ</h2> <p class="price">1個 480円</p> <p class="word">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p> <div id="btn_top"> <a href="#"><img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_moreinfo_btn.gif" alt="詳細を見る"></a> <a href="http://web-study.lolipop.jp/felica/0525_Cake/images/item_photo01.jpg"><img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_morelook_btn.gif" alt="チーズスフレ 紹介写真"></a> </div> </div> </div> <!-- ▲▲▲▲▲▲▲▲item1▲▲▲▲▲▲▲▲ --> <!-- ▼▼▼▼▼▼▼▼item2▼▼▼▼▼▼▼▼ --> <div id="item2"> <div class="item"> <h3 class="index1_h3"> <img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_item_photo2.jpg"></h3> </div> <div class="content1"> <h2 class="index1_h2">苺のバースデーケーキ</h2> <p class="price">1個 2,480円</p> <p class="word">大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p> <div id="btn_top"> <a href="#"><img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_moreinfo_btn.gif" alt="詳細を見る"></a> <a href="#"><img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_morelook_btn.gif" alt="苺のバースケーキ 商品紹介"></a> </div> </div> </div> <!--▲▲▲▲▲▲▲▲item2▲▲▲▲▲▲▲▲--> <!--▼▼▼▼▼▼▼▼item3▼▼▼▼▼▼▼▼--> <div id="item2"> <div class="item"> <h3 class="index1_h3"> <img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_item_photo3.jpg"></h3> </div> <div class="content1"> <h2 class="index1_h2">焼菓子の詰め合わせ</h2> <p class="price">1箱 1,680円</p> <p class="word">当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p> <div id="btn_top"> <a href="#"><img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_moreinfo_btn.gif" alt="詳細を見る"></a> <a href="#"><img src="http://web-study.lolipop.jp/felica/0525_Cake/images/top_morelook_btn.gif" alt="焼菓子の詰め合わせ 商品写真"></a> </div> </div> </div> <!-- ▲▲▲▲▲▲▲▲item3▲▲▲▲▲▲▲▲ --> </div> <!-- ▲▲▲▲▲▲▲▲content▲▲▲▲▲▲▲▲ --> </div> <!-- ▲▲▲▲▲▲▲▲wrapper▲▲▲▲▲▲▲▲ --> </div> <div id="footer"> <address>Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved.</address> </div> </body> </html>
/* CSS Document */ @charset "UTF-8" a{}/* codaの？バグで一番上は無視されるので、その対策 */ * { margin: 0; padding: 0; } body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; background-image: url(http://web-study.lolipop.jp/felica/0525_Cake/images/bg.jpg); } #container { width: 680px; margin: 0px auto; background-color: #fff; padding: 10px; } #nav { overflow: auto; background-image: url(http://web-study.lolipop.jp/felica/0525_Cake/images/menubar.jpg); background-repeat: repeat-x; background-color: black; padding: 0; width: 680px; margin-bottom: 5px; } #nav ul { list-style-type: none; padding: 0; } #nav li { float: left; display: inline; } #nav li a { display: block; width: 136px; height: 36px; } #nav1 a{ background-image: url(images/menu_index.gif); background-repeat: no-repeat; background-position: 0 0; } #nav2 a{ background-image: url(http://web-study.lolipop.jp/felica/0525_Cake/images/menu_products.gif); background-repeat: no-repeat; background-position: 0 0; } #nav3 a{ background-image: url(http://web-study.lolipop.jp/felica/0525_Cake/images/menu_shop.gif); background-repeat: no-repeat; background-position: 0 0; } #nav4 a{ background-image: url(http://web-study.lolipop.jp/felica/0525_Cake/images/menu_mail.gif); background-repeat: no-repeat; background-position: 0 0; } #nav1 a:hover { background-position: 0 -36px; } #nav2 a:hover { background-position: 0 -36px; } #nav3 a:hover { background-position: 0 -36px; } #nav4 a:hover { background-position: 0 -36px; } dl { padding: 7px 15px; } dt { border-left: 5px solid #F3F0E8; padding: 3px 5px; font-weight: bold; font-size: 0.8em; } dd { padding-left: 10px; margin: 3px 0 10px 0; font-size: 0.9em; } #wrapper { overflow: auto; margin: 10px 0 30px 0; } #banner { float: left; display: inline; } #banner1 { margin-bottom: 10px; } #content { float: right; display: inline; width: 475px; margin-top: -6px; /*空きができてしまったので*/ } .index1_h2 { color: #044A88; font-size: 1.1em; } .index1_h3 { margin-top: 6px; } .price { color: gray; font-size: 0.8em; margin: 5px 0; } .word { font-size: 0.8em; } #item1 { overflow: auto; border-bottom: solid 1px #d0d4d1; padding-bottom: 18px; } #item2 { overflow: auto; border-bottom: solid 1px #d0d4d1; padding: 18px 0 18px 0; } .item { float: left; display: inline; overflow: auto; } .content1 { float: right; display: inline; overflow: auto; width: 310px; margin-left: 10px; } #content2 { float: right; display: inline; overflow: auto; width: 310px; margin-left: 10px; } #btn_top { margin-top: 13px; } #footer { background-image: url(http://web-study.lolipop.jp/felica/0525_Cake/images/footer_back.gif); background-repeat: repeat-x; height: 62px; width: 700px; line-height: 62px; text-align: center; margin: 0 auto; clear: both;/*フロートをリセット*/ overflow: auto; } address { font-style: normal; font-size: 0.8em; }
