Wants Cake サイト構築

課題

《index.html》

  • IE6確認OK☆
  • エラーなし
  • 『おすすめ商品』の3つはリストとしてマークアップしました。
  • 画像でもli aにdisplay: block;と高さを設定しないとクリックした時にうっすらでるリンク範囲(四角い点々）がずれる。
  • nav以外の『詳細を見る』『大きな写真を見る』へのリンクはtarget="_blank"で別ウィンドウで開く。

↓完成URL
http://jewelcafe.main.jp/0529/index.html


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>Wants Cake</title>
<link href="css/base.css" rel="stylesheet" type="text/css" media="screen,print" />
<link href="css/top.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.jpg" width="260" height="47" alt="Wants Cake" /></h1>

<ul id="nav">
 <li id="nav01"><a href="#" class="stay"><em>ホーム</em></a></li>
 <li id="nav02"><a href="products.html"><em>商品のご案内</em></a></li>
 <li id="nav03"><a href="shop.html"><em>店舗案内</em></a></li>
 <li id="nav04"><a href="order.html"><em>お問い合せ</em></a></li>
</ul>
</div><!--header-->

<div id="content">
<h2><img src="images/main_photo.jpg" width="680" height="236" alt="メインイメージ" /></h2>

<div id="sidebar">
  <ul>
    <li id="order"><a href="#"><img src="images/banner01.jpg" width="195" height="175" alt="大切なあの人に" /></a></li>
    <li><a href="#"><img src="images/banner02.jpg" width="195" height="88" alt="見習いパティシエユミの奮闘日記" /></a></li>
  </ul>
</div><!--sidebar-->

<div id="about">
<h3><img src="images/news_title.gif" width="475" height="25" alt="新着情報" /></h3>
<dl class="news">
 <dt>2008.10.10</dt>
  <dd>スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span class="red_text">N.Y.チーズケーキ、レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
</dl>
 <dl class="news">
  <dt>2008.09.25</dt>
   <dd><span class="red_text">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="red_text">5%オフ</span>！</dd>
</dl>

<h3><img src="images/recommend_title.gif" width="475" height="25" alt="おすすめ商品" /></h3>
<ul>
 <li class="product">
   <p class="pr_img"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真" /></p>
   <div class="si">
   <h4>チーズスフレ</h4>
     <p>1個 480円</p>
     <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
  
    <ul class="silyousai">
       <li class="silyousai01"><a href="item.html" target="_blank"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a></li>
       <li class="silyousai02"><a href="images/item_photo01.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></li>
   </ul>
  </div><!--si--> 
 </li>
 
 <li class="product">
   <p class="pr_img"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真" /></p>
  <div class="si">
   <h4>苺のバースデーケーキ</h4>
    <p>1個 2,480円</p>
     <p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
   <ul class="silyousai">
    <li class="silyousai01"><a href="#"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a></li>
    <li class="silyousai02"><a href="images/item_photo02.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></li>
   </ul>
  </div><!--si-->
 </li>

 <li class="product">
  <p class="pr_img"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真" /></p>
   <div class="si">
    <h4>焼菓子の詰め合わせ</h4>
     <p>1箱 1,680円</p>
     <p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
    <ul class="silyousai">
    <li class="silyousai01"><a href="#"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a></li>
    <li class="silyousai02"><a href="images/item_photo03.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></li>
    </ul>
  </div><!--si-->
 </li>
</ul>
</div><!--about-->
</div><!--content-->

<div id="footer">
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>
</div><!--footer-->
</div><!--#container-->
</body>
</html>

base.css

@charset "utf-8";

/* reset */
 * {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  text-decoration: none;
}

body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  font-size: 1.0em;
  text-align: center;/*IE6でブラウザの中央表示*/
  background-color: #003456;
}

#container {
	margin: 0 auto;/*ブラウザの中央表示*/
	text-align: left;
	width: 708px;
	font-size: 0.875em;
	padding-top: 10px;
	background-color: #FFF;
}

#header {
	width: 680px;
	margin-bottom: 5px;
	margin-left: 14px;
}
#header h1 {
	margin-bottom: 10px;
}
#nav {
	width: 680px;
	height: 36px;
	background-image: url(../images/menubar.jpg);
	background-repeat: repeat-x;
}
#nav li {
	float: left;
	width: 136px;
	height: 36px;
}
em {
  visibility: hidden;
}  /*文字を不可視（透明）にする*/

#nav li a {
	display: block;
	width: 136px;
	height: 36px;
}

/* 擬似クラス */
#nav #nav01 a {
	background-image: url(../images/menu_index.gif);
}
#nav #nav02 a {
	background-image: url(../images/menu_products.gif);
}
#nav #nav03 a {
	background-image: url(../images/menu_shop.gif);	
}
#nav #nav04 a {
	background-image: url(../images/menu_mail.gif);	
}

/*マウスオーバー時*/
#nav a:hover{
    background-position: 0px -36px;
}

/* 現在位置 */
#nav a.stay {
	background-position: 0 -36px;
}

#content {
	width: 680px;
	overflow: hidden;
	margin-left: 14px;
}
	
#sidebar {
	float: left;
	width: 195px;
	margin-top: 20px;	
}
#sidebar #order {
	margin-bottom: 8px;
}

#about {
	float: right;
	width: 475px;
	margin-top: 20px;
	margin-bottom: 15px;
	line-height: 1.5;
}
#footer {
	clear: both;
	text-align: center;
	font-size: 0.75em;
	line-height: 62px;
	background-image: url(../images/footer_back.gif);
	background-repeat: repeat-x;
	font-style: normal;
}

top.css
このcssはindex.html #aboutのcss

@charset "utf-8";

/*▼新着情報*/
dl.news {
	padding-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
	
.news dt {
	font-weight: bold;
	border-left: solid 5px #E8E2D6;
	padding-left: 5px;
	margin-bottom: 5px;
}
.news dd {
	font-size: 0.9em;
	padding-left: 10px;	
}

/*▼おすすめ商品*/
.red_text {
	color: #FF0066;
	font-weight: bold;
}
ul .product {
	border-bottom: solid 1px #CCC;
	padding-top: 10px;
	padding-bottom: 10px;
	height: 120px;
}
.product .pr_img {
	float: left;
	width: 150px;
}
.product .si {
	float: right;
	width: 310px;
}
.product .si h4 {
	color: #5D92BA;
	font-size: 1.2em;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight: bold;
}
.product .si p {
	margin-top: 5px;
	margin-bottom: 7px;
	font-size: 0.9em;
}


ul.silyousai li.silyousai01 {
	float: left;
	width: 83px;
	height: 16px;
	margin-right: 5px;

}
ul.silyousai li.silyousai02 {
	float: left;
	width: 105px;
	height: 16px;
}
.silyousai li a{
	display: block;
	height: 16px;
}


《products.html》

  • 『チーズスフレ』『苺のバースデーケーキ』『焼菓子の詰め合わせ』の書体を明朝系に設定したが、滲んだように表示される。明朝系はこうなるんだろうか。。。？



products.html
異なる部分div id="about"のみ記述

<div id="about">
 <h2><img src="images/item_title.gif" alt="商品のご紹介" /></h2>
<ul id="list">
  <li><a href="item.html" target="_blank">ショートケーキ</a></li>
  <li><a href="#">バースデーケーキ</a></li>
  <li><a href="#">洋菓子</a></li>
</ul>
<ul>
 <li class="product">
 <h3>ショートケーキ</h3>
   <p class="pr_img"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真" /></p>
   <div class="si">
   <h4>チーズスフレ</h4>
     <p>1個 480円</p>
     <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>

   <ul class="silyousai">
       <li class="silyousai01"><a href="item.html" target="_blank"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a></li>
       <li class="silyousai02"><a href="images/item_photo01.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></li>
   </ul>
  </div><!--si--> 
 </li>
 
 <li class="product">
 <h3>バースデーケーキ</h3>
   <p class="pr_img"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真" /></p>
  <div class="si">
   <h4>苺のバースデーケーキ</h4>
    <p>1個 2,480円</p>
     <p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
   <ul class="silyousai">
    <li class="silyousai01"><a href="#"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a></li>
    <li class="silyousai02"><a href="images/item_photo02.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></li>
   </ul>
  </div><!--si-->
 </li>

 <li class="product">
 <h3>洋菓子</h3>
  <p class="pr_img"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真" /></p>
   <div class="si">
    <h4>焼菓子の詰め合わせ</h4>
     <p>1箱 1,680円</p>
     <p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
    <ul class="silyousai">
    <li class="silyousai01"><a href="#"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a></li>
    <li class="silyousai02"><a href="images/item_photo03.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></li>
    </ul>
  </div><!--si-->
 </li>
</ul>
</div><!--about-->

products.css

@charset "utf-8";

ul#list li {
	margin: 5px 0 5px 20px;
}
ul#list li a {
	color: #88804F;
	font-size: 0.9em;
	font-weight: bold;
	background-image: url(../images/mark.gif);
	background-repeat: no-repeat;
	padding-left: 20px;
	background-position: 0px center;
}
ul li.product {
	border-bottom: solid 1px #CCC;
	height: 185px;
	margin-bottom: 15px;
}
li.product h3 {
	padding-left: 12px;
	font-size: 1em;
	font-weight: bold;
	height: 36px;
	background-image: url(../images/menubar.jpg);
	background-repeat: repeat-x;
	line-height: 36px;
	color: #FFFFFF;
	margin-bottom: 10px;
}
.product .pr_img {
	float: left;
	width: 150px;
}
.product .si {
	float: right;
	width: 310px;
}
.product .si h4 {
	color: #5D92BA;
	font-size: 1.2em;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight: bold;
}
.product .si p {
	margin-top: 5px;
	margin-bottom: 7px;
	font-size: 0.9em;
}
ul.silyousai li.silyousai01 {
	float: left;
	width: 83px;
	height: 16px;
        margin-right: 5px;
}
ul.silyousai li.silyousai02 {
	float: left;
	width: 105px;
	height: 16px;
}
.silyousai li a{
	display: block;
	height: 16px;
}

《item.html》


item.html
異なる部分div id="about"のみ記述

<div id="about">
 <h2><img src="images/item_title.gif" alt="商品のご紹介" /></h2>
 <h3>チーズスフレ</h3>
 <p><img src="images/item_photo01.jpg" alt="チーズスフレ 商品写真" width="475" height="285" /></p>
 <h4>当店人気メニュー！</h4>

<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。</p><br />

<p>甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供にも是非どうぞ。</p><br />

<p class="price">価格： 480円 (税込)</p><br />

<h5><a href="order.html"><img src="images/buy_btn.gif" alt="この商品を購入する" /></a></h5>
</div><!--about-->

item.css

@charset "utf-8";

#about h3 {
	color: #005188;
	font-size: 1.3em;
	margin-top: 13px;
	margin-left: 10px;
	font-weight: bold;
}
#about h4 {
	font-size: 1.15em;
	color: #FC0124;
	border-left: solid 5px #FC0124;
	margin-top: 10px;
	padding-left: 5px;
	margin-bottom: 5px;
}
#about p {
	font-size: 0.9em;
	line-height: 1.5;
}
#about p.price {
	font-weight: bold;
}
#about h5 {
	padding-top: 15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ccc;
}

《order.html》

  • フォームはテーブルで組んだが必要なかったかも。。
  • inputにvertical-align: middle;を指定したが、ラジオボタンが文字に対してややずれている気がする。。


order.html
異なる部分div id="about"のみ記述

<div id="about">
 <h2><img src="images/shopping_title.gif" width="475" height="25" alt="商品のご購入" /></h2>
 <form action="#" method="post" id="myform">
 <table width="475" border="1">
   <tr><th>名前</th></tr>
   <tr><td><input type="text" name="name" size="40"></td></tr>
    <tr><th>Eメール</th></tr>
   <tr><td><input type="text" name="name" size="40"></td></tr>
     <tr><th>郵便番号</th></tr>
   <tr><td><input type="text" name="name" size="20">(ハイフンナシ)</td></tr>
     <tr><th>ご住所</th></tr>
   <tr><td><textarea name="sumai" cols="40" rows="4"></textarea></td></tr>
       <tr><th>注文商品</th></tr>
   <tr><td><input type="checkbox" name="item" value="1">チーズスフレ
   <select name="number">
      <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>      
    </select>
  </td></tr>
    <tr><td><input type="checkbox" name="item" value="1">苺のバースデーケーキ
   <select name="number">
      <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>      
    </select>
  </td></tr>
    <tr><td><input type="checkbox" name="item" value="1">洋菓子の詰め合わせ
   <select name="number">
      <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>      
    </select>
  </td></tr>
    <tr><th>当社をどこでお知りになりましたか？</th></tr>
   <tr><td>
  <input type="radio" name="place" value="search">検索サイトから
  <input type="radio" name="place" value="family">ご家族・友人から
  <input type="radio" name="place" value="advertisement">広告・チラシ等
  <input type="radio" name="place" value="others" checked>その他
  </td></tr>
 </table> 
  <p><input type="submit" value="送信する"><input type="reset" value="取り消し"></p>
</form>
</div><!--about-->

order.css

@charset "utf-8";

#myform table {
	width: 475px;
	font-size: 0.875em;
	line-height: 25px;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #ccc;
	margin-bottom: 10px;
}
#myform table th,td {
	border-style: none;	
	text-align: left;
}
#myform td input {
	vertical-align: middle;
	margin-right: 3px;
}

　

《shop.html》

  • ボーダーが2重にならない様にborder-spacing: 0;とborder-collapse: collapse;を指定する。



shop.html
異なる部分div id="about"のみ記述

<div id="about">
 <h2><img src="images/shop_title.gif" width="475" height="25" alt="店舗案内" /></h2>
 <p><img src="images/shop.jpg" width="475" height="317" alt="店内イメージ画像" /></p>
<table>
  <tr>
    <th>社名</th>
    <td>ウォンツケーキ</td>
  </tr>
  <tr>
    <th>住所</th>
    <td>ウォンツ県一途市三番町4-1-3ケーキビル1F</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 id="map"><img src="images/map01.gif" width="326" height="286" alt="地図画像" /></p>
</div><!--about-->


css/shop.css

@charset "utf-8";

#about table {
	width: 475px;
	border: 1px solid #ccc;
	font-size: 0.875em;
	line-height: 30px;
	margin-bottom: 10px;
	border-spacing: 0;/* 隣合ったボーダーの距離を指定  Mac IE 5対応*/
	border-collapse: collapse;/* 隣合ったボーダーを結合させる IE 6対応*/
}
#about table th {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: right;
	background-color: #D0C89A;
	padding-right: 10px;
}
#about table td {
	border-top: 1px solid #ccc;
	font-weight: bold;
	padding-left: 10px;
}
#about #map {
	text-align: center;
}

soratomo0714

コメントを書く