サイト構築

作ってみた

ウォンツケーキ店




  • index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウォンツ ケーキ店 トップページ</title>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1>
<div id="nav">
<ul>
<li><a href="index.html" class="menu_index" style="background-position: 0px -36px;"></a></li>
<li><a href="products.html" class="menu_products"></a></li>
<li><a href="shop.html" class="menu_shop"></a></li>
<li><a href="mailto:xxx@wants.jp" class="menu_mail"></a></li>
</ul>
</div><!-- /#nav -->
<img src="images/main_photo.jpg" width="680" height="236" alt="メインイメージ" class="main_image">
</div><!-- /#header -->
<div id="content">
<div id="main">
<h2><img src="images/news_title.gif" width="475" height="25" alt="新着情報"></h2>
<dl class="news_date">
<dt>2008.10.10</dt>
<dd class="news_content">スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span class="news_keyword">N.Y.チーズケーキ</span>、<span class="news_keyword">レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
<dt>2008.09.25</dt>
<dd class="news_content"><span class="news_keyword">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="news_keyword">5%オフ</span>！</dd>
</dl>
<h2><img src="images/recommend_title.gif" width="475" height="25" alt="おすすめ商品"></h2>
<div class="product">
<img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真" class="product_item">
<p class="product_name"><a href="item.html">チーズスフレ</a></p>
<p class="product_price">1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a>
<a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a>
</div><!-- /.product -->
<div class="product">
<img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真" class="product_item">
<p class="product_name"><a href="item.html">苺のバースデーケーキ</a></p>
<p class="product_price">1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a>
<a href="images/item_photo02.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a>
</div><!-- /.product -->
<div class="product">
<img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真" class="product_item">
<p class="product_name"><a href="item.html">焼菓子の詰め合わせ</a></p>
<p class="product_price">1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a>
<a href="images/item_photo03.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a>
</div><!-- /.product -->
</div><!-- /#main -->
<div id="sidebar">
<a href="order.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a>
<a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a>
</div><!-- /#sidebar -->
</div><!-- /#content -->
<div id="footer">
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>


  • products.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウォンツ ケーキ店 商品のご案内</title>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1>
<div id="nav">
<ul>
<li><a href="index.html" class="menu_index"></a></li>
<li><a href="products.html" class="menu_products" style="background-position: 0px -36px;"></a></li>
<li><a href="shop.html" class="menu_shop"></a></li>
<li><a href="mailto:xxx@wants.jp" class="menu_mail"></a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#header -->
<div id="content">
<div id="main">
<h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご案内"></h2>
<ul>
<li><a href="#">ショートケーキ</a></li>
<li><a href="#">バースデーケーキ</a></li>
<li><a href="#">洋菓子</a></li>
</ul>
<h3 class="product_category">ショートケーキ</h3>
<div class="product">
<img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真" class="product_item">
<p class="product_name"><a href="item.html">チーズスフレ</a></p>
<p class="product_price">1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a>
<a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a>
</div><!-- /.product -->
<h3 class="product_category">バースデーケーキ</h3>
<div class="product">
<img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真" class="product_item">
<p class="product_name"><a href="item.html">苺のバースデーケーキ</a></p>
<p class="product_price">1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a>
<a href="images/item_photo02.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a>
</div><!-- /.product -->
<h3 class="product_category">洋菓子</h3>
<div class="product">
<img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真" class="product_item">
<p class="product_name"><a href="item.html">焼菓子の詰め合わせ</a></p>
<p class="product_price">1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a>
<a href="images/item_photo03.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a>
</div><!-- /.product -->
</div><!-- /#main -->
<div id="sidebar">
<a href="order.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a>
<a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a>
</div><!-- /#sidebar -->
</div><!-- /#content -->
<div id="footer">
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>


  • shop.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウォンツ ケーキ店 店舗のご案内</title>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1>
<div id="nav">
<ul>
<li><a href="index.html" class="menu_index"></a></li>
<li><a href="products.html" class="menu_products"></a></li>
<li><a href="shop.html" class="menu_shop" style="background-position: 0px -36px;"></a></li>
<li><a href="mailto:xxx@wants.jp" class="menu_mail"></a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#header -->
<div id="content">
<div id="main">
<h2><img src="images/shop_title.gif" width="475" height="25" alt="店舗のご案内"></h2>
<p><img src="images/shop.jpg" alt="店内イメージ" width="475" height="317" /></p>
<table summary="店舗情報" id="shopInfo">
<tr>
<th>社名</th>
<td>ウォンツケーキ</td>
</tr>
<tr>
<th>住所</th>
<td>
<p>ウォンツ県一途市三番町4-1-3</p>
<p>ケーキビル1F</p>
</td>
</tr>
<tr>
<th>TEL</th>
<td>000-0000-0000</td>
</tr>
<tr>
<th>定休日</th>
<td>水曜日</td>
</tr>
<tr>
<th>営業時間</th>
<td>午前9:00〜午後8:00</td>
</tr>
</table>
<p class="map"><img src="images/map.png" width="326" height="286" alt="所在地図" /></p>
</div><!-- /#main -->
<div id="sidebar">
<a href="order.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a>
<a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a>
</div><!-- /#sidebar -->
</div><!-- /#content -->
<div id="footer">
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>


  • item1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウォンツ ケーキ店 当店人気メニューのチーズスフレ</title>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1>
<div id="nav">
<ul>
<li><a href="index.html" class="menu_index"></a></li>
<li><a href="products.html" class="menu_products" style="background-position: 0px -36px;"></a></li>
<li><a href="shop.html" class="menu_shop"></a></li>
<li><a href="mailto:xxx@wants.jp" class="menu_mail"></a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#header -->
<div id="content">
<div id="main">
<h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご案内"></h2>
<h3 class="product_name">チーズスフレ</h3>
<img src="images/item_photo01.jpg" width="475" height="285" alt="チーズスフレ 商品写真">
<p class="product_popular">当店人気メニュー！</p>
<div class="product">
<p class="product_detail">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。</p>
<p class="product_detail">甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供にも是非どうぞ。</p>
<p><b>価格</b>： 480円 (税込)</p>
</div>
<a href="order.html"><img src="images/buy_btn.gif" width="120" height="20" alt="この商品を購入する"></a>
</div><!-- /#main -->
<div id="sidebar">
<a href="order.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a>
<a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a>
</div>
</div><!-- /#content -->
<div id="footer">
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>


  • order.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウォンツ ケーキ店 商品のご購入</title>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1>
<div id="nav">
<ul>
<li><a href="index.html" class="menu_index"></a></li>
<li><a href="products.html" class="menu_products" style="background-position: 0px -36px;"></a></li>
<li><a href="shop.html" class="menu_shop"></a></li>
<li><a href="mailto:xxx@wants.jp" class="menu_mail"></a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#header -->
<div id="content">
<div id="main">
<h2><img src="images/shopping_title.gif" width="475" height="25" alt="商品のご購入"></h2>
<form action="#" method="post" id="shopform">
<p><label for="name"><span class="em">お名前</span></label>
<input type="text "id="name" name="name" size="40" maxlength="10"></p>
<p><label for="email"><span class="em">Eメール</span></label>
<input type="text" id="email" name="emailaddress" size="40">
</p>
<p><label for="postnum"><span class="em">郵便番号</label>
<input type="text" id="postnum" name="postnumber" size="20" maxlength="7"> (ハイフンなし)</p>
<p><label for="address"><span class="em">ご住所</span></label>
<textarea id="address" name="address" rows="3" cols="40"></textarea></p>
<p><span class="em">注文商品</span></p>
<label for="order"><input type="checkbox" id="item" name="order" value="1">チーズスフレ</label>
<select name="num_cheese">
<option value="1" selected="selected">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></p>
<p><label for="item"><input type="checkbox" id="item" name="item" value="2">苺のバースデーケーキ</label>
<select name="num_strawberry">
<option value="1" selected="selected">1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
<option value="4">4個</option>
<option value="5">5個</option>
</select></p>
<p><label for="item"><input type="checkbox" id="item"name="item" value="3">洋菓子の詰め合わせ</label>
<select name="num_assort">
<option value="1" selected="selected">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></p>
<p><span class="em">当店をどこでお知りになりましたか？</span></p>
<p><input type="radio" name="how" value="1" id="searchsite">
検索サイトから<input type="radio" name="how" value="2" id="people">ご家族・友人から<input type="radio" name="how" value="3" id="advertise">広告・チラシ等<input type="radio" name="how" value="4" id="others" checked>その他</p>
<p><input type="submit" value="送信する" ><input type="submit" value="取り消す"></p>
</form>
</div><!-- /#main -->
<div id="sidebar">
<a href="order.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a>
<a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a>
</div><!-- /#sidebar -->
</div><!-- /#content -->
<div id="footer">
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>



@chaset "UTF-8";

/*----- reset -----*/
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3",
    Meiryo, 
    "メイリオ", 
    Osaka, 
    "MS P Gothic", 
    "ＭＳ Ｐゴシック", 
    sans-serif;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}
body{
  font-size: 14px;
  line-height: 1.0;
  background-color: #00558D;
  background-image: url(images/bg.jpg);
  background-repeat: repeat-x;
  overflow-y: scroll;
}
p{
  line-height: 1.3;
  margin: 8px 0 11px 0;
}
a{
  color: #015790;
}

/*----- layout -----*/
#container {
  width: 700px;
  margin: 0px auto;
  background-color: #FFFFFF;
}
#header {
  padding: 10px 10px 20px;
  background-color: #FFFFFF;
}
#nav {
  background-image:url(images/menubar.jpg);
  background-repeat: repeat-x;
  height: 36px;
}
#content {
  clear: left;
  overflow: hidden;
}
#main {
  width: 475px;
  margin: 0 10px 0 0;
  float: right;
}
#sidebar {
  width: 195px;
  margin: 0 0 0 10px;
  float: left;
}
#footer {
  font-size: 12px;
  line-height: 62px;
  text-align: center;
  height: 62px;
  margin-top: 20px;
  background-color: #EEEEEE;
  background-image: url(images/footer_back.gif);
  background-repeat: repeat-x;
  clear: both;
}

/*----- header -----*/
h1 {
  margin: 0 0 10px 0;
}

/*----- nav -----*/
#nav li {
  float: left;
}
#nav li a {
  display: block;
  width: 136px;
  height: 36px;
  background-repeat: no-repeat;
}
#nav a:hover{
  background-position: 0px -36px;
}
a.menu_index{
  background-image: url(images/menu_index.gif);
}
a.menu_products{
  background-image: url(images/menu_products.gif);
}
a.menu_shop{
  background-image: url(images/menu_shop.gif);
}
a.menu_mail{
  background-image: url(images/menu_mail.gif);
}

/*----- sidear -----*/
a.banner {
  display: block;
  margin-bottom: 10px;
}

/*----- footer -----*/
address {
  font-style: normal;
  padding: 25px 0 0 0;
}



@chaset "UTF-8";

/*----- home -----*/
#main dl.news_date {
  margin: 15px 1em 20px;
}
#main dl.news_date dt {
  font-weight: bold;
  margin-bottom: 5px;
  padding: 4px 4px 4px 8px;
  border-left: 5px solid #E8E2D6;
}
#main dl.news_date dd.news_content {
  margin-bottom: 18px;
  margin-left: 1em;
  line-height: 1.3;
}
img.main_image {
  margin-top: 5px;
}
img.product_item {
  float: left;
  margin: 5px 10px 0 0;
}
p.news_date {
  font-weight: bold;
  text-decoration: underline;
  letter-spacing: 1px;
  margin-bottom: 3px;
  padding-left: 10px;
}
p.news_content {
  font-size: 13px;
  line-height: 17px;
  margin-top: 0px;
  padding-left: 10px;
}
span.news_keyword {
  color: #FF084A;
  font-weight: bold;
}

/*----- product -----*/
#main ul {
  margin: 15px 0 20px 1em;
  font-weight: bold;
  font-size: 1em;
}
#main ul li {
  margin: 0 0 16px;
}
#main ul li a {
  color: #746224;
  text-decoration: none;
  background-image: url(images/mark.gif);
  background-repeat: no-repeat;
  background-position: left top;
  padding: 0 0 5px 20px;
}
#main ul li a:hover {
  color: #ae2d56;
  text-decoration: underline;
}

/*----- item -----*/
p.product_popular {
  font-size: 1.4em;
  font-weight: bold;
  color: #F03;
  margin: 20px 0 0 0;
  padding: 0 0 0 8px;
  border-left: 5px solid #F03;
}
.product {
  border-bottom: dotted 1px #C0C0C0;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
h3.product_category {
  background-color: #9F8638;
  color: white;
  font-size: 16px;
  background-image: url(images/bg_h3.jpg);
  background-repeat: no-repeat;
  height: 33px;
  line-height: 33px;
  padding-left: 1em;
}
h3.product_category a {
  color: white;
}
h3.product_name {
  margin: 15px 0 6px 10px;
  font-size: x-large;
  color: #015790;
}
p.product_name a {
  font-size: 18px;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
  text-decoration: none;
}
p.product_name a:hover {
  color: #ae2d56;
  text-decoration: underline;
}
p.product_price {
  font-size: 12px;
}

/*----- shop -----*/
table {
  width: 476px;
  margin-top: -10px;
}
td {
  border-right: 1px #B2B2B2 solid;
  border-bottom: 1px #B2B2B2 solid;
  width: 70%;
  background-color: #FFF;
  padding: 7px 5px 5px 1em;
  line-height: 1.3;
}
th {
  text-align: right;
  vertical-align: middle;
  width: 30%;
  border-right: 1px #B2B2B2 solid;
  border-bottom: 1px #B2B2B2 solid;
  background-color: #D0C89B;
  padding: 6px 1em 5px 5px;
}
p.map {
  text-align: center;
}

/*----- order -----*/
form {
  margin: 0 0 0 10px;
}
form #shopform {
  margin: 0 0 6px 0;
}
#shopform label	{
  display: block;
}
span.em {
  font-weight: bold;
}