ケーキショップ
- index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Wants Cake</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> <link type="text/css" rel="stylesheet" href="css/top.css" /> </head> <body> <div id="container"> <div id="header"> <h1><img src="images/logo.jpg" alt="Wants Cakeロゴ" title="Wants Cake"/></h1> <ul> <li id="list01"><a href="index.html"><em>ホーム</em></a></li> <li id="list02"><a href="products.html"><em>商品のご案内</em></a></li> <li id="list03"><a href="item.html"><em>店舗案内</em></a></li> <li id="list04"><a href="shop.html"><em>お問い合せ</em></a></li> </ul> <img src="images/main_photo.jpg" alt="Wants Cakeビルボード" title="Wants Cake"/> </div> <div id="wrapper"> <div id="content"> <h2><img src="images/news_title.gif" alt="新着情報" title="タイトル" /></h2> <dt> <dl>2008.10.10</dl> <dd>スペシャルキャンペーン期間中、お休みを頂いておりました、<span class="recommend">N.Y.チーズケーキ</span>、<span class="recommend">レアチーズケーキ</span>のオーダー受付を開始させて頂きました。</dd> <dl>2008.09.25</dl> <dd><span class="recommend">スペシャルキャンペーン</span>実施中!人気のケーキが<span class="recommend">5%オフ!</span></dd> </dt> <h2><img src="images/item_title.gif" alt="商品のご紹介" title="商品のご紹介" /></h2> <div id="recomend_item"> <div class="item"> <div class="item_detail"> <h3>チーズスフレ</h3> <h4>1個480円</h4> <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p> <a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細をみる" title="詳細をみる" /></a> <a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></a> </div> <img src="images/top_item_photo1.jpg" alt="チーズスフレ" title="Wants Cakeのチーズスフレ" class="item_sumb" /> </div> <div class="item"> <div class="item_detail"> <h3>苺のバースデーケーキ</h3> <h4>1個2,480円</h4> <p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p> <a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細をみる" title="詳細をみる" /></a> <a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></a> </div> <img src="images/top_item_photo2.jpg" alt="苺のバースデーケーキ" title="Wants Cakeの苺のバースデーケーキ" class="item_sumb" /> </div> <div class="item"> <div class="item_detail"> <h3>焼菓子の詰め合わせ</h3> <h4>1箱 1,680円</h4> <p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p> <a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細をみる" title="詳細をみる" /></a> <a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></a> </div> <img src="images/top_item_photo3.jpg" alt="焼菓子の詰め合わせ" title="Wants Cakeの焼菓子の詰め合わせ" class="item_sumb" /> </div> </div> </div> <div id="sidebar"> <div class="banner"> <img src="images/banner01.jpg" alt="バースデーケーキ" title="Wants Cakeのバースデーケーキ" /> </div> <div class="banner"> <img src="images/banner02.jpg" alt="見習いパティシエユミの奮闘日記" title="Wants Cake 見習いパティシエユミの奮闘日記"/> </div> </div> </div> <div id="footer"> Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved. </div> </div> </body> </html>
- item.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Wants Cake</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> <link type="text/css" rel="stylesheet" href="css/item.css" /> </head> <body> <div id="container"> <div id="header"> <h1><img src="images/logo.jpg" alt="Wants Cakeロゴ" title="Wants Cake"/></h1> <ul> <li id="list01"><a href="index.html"><em>ホーム</em></a></li> <li id="list02"><a href="products.html"><em>商品のご案内</em></a></li> <li id="list03"><a href="item.html"><em>店舗案内</em></a></li> <li id="list04"><a href="shop.html"><em>お問い合せ</em></a></li> </ul> </div> <div id="wrapper"> <div id="content"> <h2><img src="images/item_title.gif" alt="商品のご紹介" title="商品のご紹介" /></h2> <h3>チーズスフレ</h3> <img src="images/item_photo01.jpg" alt="チーズスフレ" title="チーズスフレ" /> <h4>当店人気メニュー</h4> <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。<br />甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供にも是非どうぞ。<br/><br/><strong>価格: 480円 (税込)</strong></p> <img src="images/buy_btn.gif" ait="この商品を購入する" title="この商品を購入する" id="buy"/> </div> <div id="sidebar"> <div class="banner"> <img src="images/banner01.jpg" alt="バースデーケーキ" title="Wants Cakeのバースデーケーキ" /> </div> <div class="banner"> <img src="images/banner02.jpg" alt="見習いパティシエユミの奮闘日記" title="Wants Cake 見習いパティシエユミの奮闘日記"/> </div> </div> </div> <div id="footer"> Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved. </div> </div> </body> </html>
- order.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Wants Cake</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> <link type="text/css" rel="stylesheet" href="css/order.css" /> </head> <body> <div id="container"> <div id="header"> <h1><img src="images/logo.jpg" alt="Wants Cakeロゴ" title="Wants Cake"/></h1> <ul> <li id="list01"><a href="index.html"><em>ホーム</em></a></li> <li id="list02"><a href="products.html"><em>商品のご案内</em></a></li> <li id="list03"><a href="item.html"><em>店舗案内</em></a></li> <li id="list04"><a href="shop.html"><em>お問い合せ</em></a></li> </ul> <img src="images/main_photo.jpg" alt="Wants Cakeビルボード" title="Wants Cake"/> </div> <div id="wrapper"> <div id="content"> <h2><img src="images/shopping_title.gif" alt="商品のご購入" title="商品のご購入" /></h2> <form action="#" method="post" enctype="multipart/form-data" name="mailForm" id="mailForm"> <div class="form_header">お名前</div> <input type="text" name="name" id="name" size="60" class="text"/> <div class="form_header">Eメール</div> <input type="text" name="email" id="email" size="60" class="text"/> <div class="form_header">郵便番号</div> <input type="text" name="postcode" id="postcode" size="12" length="7" class="text"/> <div class="form_header">ご住所</div> <textarea name="address" id="address" cols="43" rows="5" class="textarea"></textarea> <div id="order"> <div class="form_header">注文商品</div> <div class="items"> <input type="checkbox" name="soufflé" id="soufflé" /><label for="soufflé"> チーズスフレ</label> <select name="cnt_soufflé" id="cnt_soufflé" class="select"> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> <option value="4">4個</option> <option value="5">5個</option> <option value="6">6個</option> <option value="7">7個</option> <option value="8">8個</option> <option value="9">9個</option> <option value="10">10個</option> </select> </div> <div class="items"> <input type="checkbox" name="birthday_cake" id="birthday_cake" /><label for="birthday_cake"> 苺のバースデーケーキ</label> <select name="cnt_birthday_cake" id="cnt_birthday_cake" class="select"> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> <option value="4">4個</option> <option value="5">5個</option> <option value="6">6個</option> <option value="7">7個</option> <option value="8">8個</option> <option value="9">9個</option> <option value="10">10個</option> </select> </div> <div class="items"> <input type="checkbox" name="snack" id="snack" /><label for="snack"> 洋菓子の詰め合わせ</label> <select name="cnt_snack" id="cnt_snack" class="select"> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> <option value="4">4個</option> <option value="5">5個</option> <option value="6">6個</option> <option value="7">7個</option> <option value="8">8個</option> <option value="9">9個</option> <option value="10">10個</option> </select> </div> <div class="form_header">当店をどこでお知りになりましたか?</div> <input type="radio" name="opportunity" id="op1" /><label for="op1">検索サイトから</label> <input type="radio" name="opportunity" id="op2" /><label for="op2">ご家族・ご友人から</label> <input type="radio" name="opportunity" id="op3" /><label for="op3">広告・チラシ</label> <input type="radio" name="opportunity" id="op4" checked/><label for="op4">その他</label> </div> <div id="btnArea"> <img src="images/send.png" alt="送信" title="送信する" /> <img src="images/cancel.png" alt="取り消し" title="取り消し" /> </div> </form> </div> <div id="sidebar"> <div class="banner"> <img src="images/banner01.jpg" alt="バースデーケーキ" title="Wants Cakeのバースデーケーキ" /> </div> <div class="banner"> <img src="images/banner02.jpg" alt="見習いパティシエユミの奮闘日記" title="Wants Cake 見習いパティシエユミの奮闘日記"/> </div> </div> </div> <div id="footer"> Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved. </div> </div> </body> </html>
- products.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Wants Cake</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> <link type="text/css" rel="stylesheet" href="css/products.css" /> </head> <body> <div id="container"> <div id="header"> <h1><img src="images/logo.jpg" alt="Wants Cakeロゴ" title="Wants Cake"/></h1> <ul> <li id="list01"><a href="item.html"><em>ホーム</em></a></li> <li id="list02"><a href="products.html"><em>商品のご案内</em></a></li> <li id="list03"><a href="item.html"><em>店舗案内</em></a></li> <li id="list04"><a href="shop.html"><em>お問い合せ</em></a></li> </ul> </div> <div id="wrapper"> <div id="content"><br> <h2><img src="images/item_title.gif" alt="商品のご紹介" title="商品のご紹介" /></h2> <div id="list_wrap"><!--list-style-image --> <ul> <li><a href="#short">ショートケーキ</a></li> <li><a href="#birthday">バースデーケーキ</a></li> <li><a href="#snack">洋菓子</a></li> </ul> </div> <div id="item_valuation"> <h3><a name="short">ショートケーキ</a></h3> <div class="item"> <div class="item_detail"> <h4>チーズスフレ</h3> <h5>1個480円</h4> <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p> <a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細をみる" title="詳細をみる" /></a> <a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></a> </div> <img src="images/top_item_photo1.jpg" alt="チーズスフレ" title="Wants Cakeのチーズスフレ" class="item_sumb" /> </div> <h3><a name="birthday">バースデーケーキ</a></h3> <div class="item"> <div class="item_detail"> <h4>苺のバースデーケーキ</h3> <h5>1個2,480円</h4> <p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p> <a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細をみる" title="詳細をみる" /></a> <a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></a> </div> <img src="images/top_item_photo2.jpg" alt="苺のバースデーケーキ" title="Wants Cakeの苺のバースデーケーキ" class="item_sumb" /> </div> <h3><a name="snack">洋菓子</a></h3> <div class="item"> <div class="item_detail"> <h4>焼菓子の詰め合わせ</h3> <h5>1箱 1,680円</h4> <p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p> <a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細をみる" title="詳細をみる" /></a> <a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></a> </div> <img src="images/top_item_photo3.jpg" alt="焼菓子の詰め合わせ" title="Wants Cakeの焼菓子の詰め合わせ" class="item_sumb" /> </div> </div> </div> <div id="sidebar"> <div class="banner"> <img src="images/banner01.jpg" alt="バースデーケーキ" title="Wants Cakeのバースデーケーキ" /> </div> <div class="banner"> <img src="images/banner02.jpg" alt="見習いパティシエユミの奮闘日記" title="Wants Cake 見習いパティシエユミの奮闘日記"/> </div> </div> </div> <div id="footer"> Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved. </div> </div> </body> </html>
- shop.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Wants Cake</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> <link type="text/css" rel="stylesheet" href="css/shop.css" /> </head> <body> <div id="container"> <div id="header"> <h1><img src="images/logo.jpg" alt="Wants Cakeロゴ" title="Wants Cake"/></h1> <ul> <li id="list01"><a href="index.html"><em>ホーム</em></a></li> <li id="list02"><a href="products.html"><em>商品のご案内</em></a></li> <li id="list03"><a href="item.html"><em>店舗案内</em></a></li> <li id="list04"><a href="shop.html"><em>お問い合せ</em></a></li> </ul> <img src="images/main_photo.jpg" alt="Wants Cakeビルボード" title="Wants Cake"/> </div> <div id="wrapper"> <div id="content"> <h2><img src="images/shop_title.gif" alt="店舗案内" title="店舗案内" /></h2> <img src="images/shop.jpg" alt="Wants Cake店内" title="Wants Cakeへようこそ" /> <table id="shop_info"> <tr> <th class="info_header">社名</th> <td class="info_detail">ウォンツケーキ</td> </tr> <tr> <th class="info_header">住所</th> <td class="info_detail">ウォンツ県一途市三番町4-1-3<br/>ケーキビル1F</td> </tr> <tr> <th class="info_header">TEL</th> <td class="info_detail">000-0000-0000</td> </tr> <tr> <th class="info_header">定休日</th> <td class="info_detail">水曜日</td> </tr> <tr> <th class="info_header">営業時間</th> <td class="info_detail">午前9:00〜午後8:00</td> </tr> </table> <div id="map"> <img src="images/map.png" alt="地図" title="店舗までのご案内" /> </div> </div> <div id="sidebar"> <div class="banner"> <img src="images/banner01.jpg" alt="バースデーケーキ" title="Wants Cakeのバースデーケーキ" /> </div> <div class="banner"> <img src="images/banner02.jpg" alt="見習いパティシエユミの奮闘日記" title="Wants Cake 見習いパティシエユミの奮闘日記"/> </div> </div> </div> <div id="footer"> Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved. </div> </div> </body> </html>
- common.css
@charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } body{ font-size:0.8em; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; background-color:#015790; background-image:url(../images/bg.jpg); background-repeat:repeat-x; } h1{ background-image:url(../images/logo.jpg); background-repeat:no-repeat; } img{ vertical-align:bottom } #container{ width:700px; margin:0 auto; background-color:#FFF; } #header{ height:auto; padding:0 10px; margin-bottom:10px; } #wrapper{ width:700px; padding:0 10px; margin:0 auto; } #header ul{ list-style-type:none; background-image:url(../images/menubar.jpg); background-repeat:repeat-x; height:36px; } #content{ float:right; width:500px; height:700px; overflow: auto; } #sidebar{ float:left; width:200px; } .banner{padding-bottom:10px} #footer{ clear:both; text-align:center; width:700px; height:62px; line-height:62px; background-image:url(../images/footer_back.gif); background-repeat:repeat-x; } #header em{ visibility:hidden; } #header ul li{ display:inline; width:136px; height:36px; float: left; text-align:center; } #header ul li a{ line-height:36px; text-decoration:none; } #list01 a { display:block; width:136px; line-height:36px; background-image:url(../images/menu_index.gif); } #list02 a { display:block; width:136px; line-height:36px; background-image:url(../images/menu_products.gif); } #list03 a { display:block; width:136px; line-height:36px; background-image:url(../images/menu_shop.gif); } #list04 a { display:block; width:136px; line-height:36px; background-image:url(../images/menu_mail.gif); } #list01 a:hover { background-position:0 -36px; } #list02 a:hover { background-position:0 -36px; } #list03 a:hover { background-position:0 -36px; } #list04 a:hover { background-position:0 -36px; }
- item.css
@charset "utf-8"; /* CSS Document */ #content{font-size:0.9em;} #content h3{ color:#647C96; font-size:1.6em; font-weight:bold; margin-top:10px; } #content h4{ color:#FF2144; font-size:1.6em; font-weight:bold; border-left:3px solid #FF2144; margin:10px 0; padding-left:5px; } #content p{ border-bottom:1px solid #999; padding:0 10px 10px 10px; margin-bottom:10px; width:450px; } #buy{ padding-top:10px; }
- order.css
@charset "utf-8"; /* CSS Document */ #content{font-size:1.2em;} #content form{margin:10px;} .form_header{font-weight:bold;} .text{ border:1px solid #333; height:1.4em; margin:10px 0; } .textarea{ border:1px solid #333; margin:10px 0; } .items{padding-top:7px;} .select{ border:1px solid #333; } #order{ width:460px; padding-bottom:20px; border-bottom:1px solid #666; } #btnArea{ padding:10px; }
- products.css
/* CSS Document */ #content{font-size:0.9em;} #list_wrap,#item_valuation{width:480px;} #content h3{ background-image:url(../images/bg_h3.jpg); line-height:34px; } #content h4{ color:#00354E; font-weight:bold; } #content ul{ padding:10px; } #content ul li{ display:block; padding:3px; list-style-image: url(../images/mark.gif); } #list_wrap{ width:500px; } .item{ width:auto; height:150px; border-bottom:1px solid #999; position:relative; } .item_detail{ position:absolute; width:300px; top:10px; right:0; } .item_detail p{ margin-bottom:35px; } .item_sumb{ position:relative; top:10px; left:5px; }
- shop.css
@charset "utf-8"; /* CSS Document */ #content{ font-size:1.2em; height:900px; } #content form{margin:10px;} .form_header{font-weight:bold;} #shop_info{ border:2px solid #666; border-collapse:collapse; width:475px; } .info_header{ width:150px; border:2px solid #666; background-color:#D0C89A; } .info_detail{ width:369px; border:2px solid #666; } #map{ text-align:center; }
- top.css
@charset "utf-8"; /* CSS Document */ #content{font-size:0.9em;} #recomend_item{width:480px;} #content dl{ padding:10px; border-left:5px solid #E8E2D6; font-size:1.0em; font-weight:bold; } #content dd{ padding:10px; } .recommend{ font-weight:bold; color:#FF0066; } .item{ width:auto; height:150px; border-bottom:1px solid #999; position:relative; } .item_detail{ position:absolute; width:300px; top:10px; right:0; } .item_detail p{ margin-bottom:30px; } .item_sumb{ position:relative; top:10px; left:5px; }
サイト構築にカンニングしようとしたらアップしてなくてびっくりw