サイトの構築ウォンツケーキ - 思い描いたものをかたちにする

サイトの構築

ページ構成を図にする
各ページの、共通部分を作る。(見出し、ナビゲーション、サイドメニュー）
各ページ毎の、内容部分を作る。(コンテンツ）

自分めも。次は・・・

構成をつかむ。図にするとき。サイトが大きくなるほど、全体と個別になる部分を押さえておく。
サイズを決めるとき(今回は画像サイズからコンテンツ幅を出した）基準にするものを決める
- (実寸で見ないとわからない方なので、Psに並べてサイズを決める)
共通部分が出来たらDwのテンプレート使ってみる。

ブラウザ表示

HTMLファイル

index.html
products.html
- item_a.html
- item_b.html
- item_c.html
access.html
order.html

index.html

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;Charset=UTF-8" />
<title>洋菓子のウォンツケーキ</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="洋菓子のウォンツケーキです。商品のご紹介、店舗案内、お問い合わせ。" />
<meta name="keywords" content="洋菓子,ケーキ,ウォンツケーキ" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="container">

<div id="header">
<h1><img src="images/logo.jpg" width="260" height="55" alt="ウォンツケーキ" /></h1>
</div><!--header-->
 
<div id="navigation">
<ul>
<li id="home"><a href="index.html">ホーム</a></li>
<li id="item"><a href="products.html">商品</a></li>
<li id="shop"><a href="access.html">店舗案内</a></li>
<li id="order"><a href="order.html">お問い合わせ</a></li>
</ul>
</div><!--navigation-->

<div id="imgbox">
<p><img src="images/main_photo.jpg" width="680" height="236" alt="ウォンツの洋菓子をご案内します" /></p>
</div><!--imgbox-->

<div id="wrapper">

<div id="sidemenu">
  <ul>
    <li><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><!--sidemenu-->

<div id="contents">

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

<h2><img src="images/recommend_title.gif" width="475" height="25" alt="おすすめ商品" /></h2>

<ul>
<li>
<h3>チーズスフレ</h3>
<p class="price">1個 480円</p>
<p class="note">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<p class="button"><a href="item_a.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a> <a href="images/item_photo01.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></p>
<p class="image"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ商品写真" /></p>
</li>

<li>
<h3>苺のバースデーケーキ</h3>
<p class="price">1個 2,480円</p>
<p class="note">大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<p class="button"><a href="item_b.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a>&nbsp;<a href="images/item_photo02.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></p>
<p class="image"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="イチゴのバースデーケーキ商品写真" /></p>
</li>

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

</div><!--contents-->

</div><!--wrapper-->

</div><!--container-->

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


</body>
</html>

products.html

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;Charset=UTF-8" />
<title>洋菓子のウォンツケーキ</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="洋菓子のウォンツケーキです。商品のご紹介、店舗案内、お問い合わせ。" />
<meta name="keywords" content="洋菓子,ケーキ,ウォンツケーキ" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="products.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.jpg" width="260" height="55" alt="ウォンツケーキ" /></h1>
</div>
 
<div id="navigation">
<ul>
<li id="home"><a href="index.html">ホーム</a></li>
<li id="item"><a href="products.html">商品</a></li>
<li id="shop"><a href="access.html">店舗案内</a></li>
<li id="order"><a href="order.html">お問い合わせ</a></li>
</ul>
</div>

<div id="wrapper">

<div id="sidemenu">
  <ul>
    <li><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>

<div id="contents">

<h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介" /></h2>
<ul id="conmenu">
<li><a href="#cakes">ショートケーキ</a></li>
<li><a href="#birth">バースデーケーキ</a></li>
<li><a href="#yougashi">焼き菓子</a></li>
</ul>
<ul>
<li>
<h3 id="cakes">ショートケーキ</h3>
<h4>チーズスフレ</h4>
<p class="price">1個 480円</p>
<p class="note">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<p class="button"><a href="item_a.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a> <a href="images/item_photo01.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></p>
<p class="image"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ商品写真" /></p>
</li>

<li>
<h3 id="birth">バースデーケーキ</h3>
<h4>苺のバースデーケーキ</h4>
<p class="price">1個 2,480円</p>
<p class="note">大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<p class="button"><a href="item_b.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /> </a>&nbsp;<a href="images/item_photo02.jpg" target="_blank"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a></p>
<p class="image"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="イチゴのバースデーケーキ商品写真" /></p>
</li>

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

</div><!--contents-->
</div><!--wrapper-->
</div><!--container-->

<div id="footer">
  <address>
  Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.
  </address>
</div>


</body>
</html>

access.html

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;Charset=UTF-8" />
<title>洋菓子のウォンツケーキ</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="access.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>
<img src="images/logo.jpg" width="260" height="55" alt="ウォンツケーキ" /></div>
<div id="navigation">
<ul>
<li id="home"><a href="index.html">ホーム</a></li>
<li id="item"><a href="products.html">商品</a></li>
<li id="shop"><a href="access.html">店舗案内</a></li>
<li id="order"><a href="order.html">お問い合わせ</a></li>
</ul>
</div>

<div id="wrapper">

<div id="sidemenu">
<ul>
<li><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>

<div id="contents">
<h2><img src="images/shop_title.gif" width="475" height="25" alt="店舗案内" /></h2>
<p class="image">
  <img src="images/shop.jpg" width="475" height="317" alt="店内の様子" /> </p>
<table width="475" summary="ウォンツケーキの住所と営業時間">
  <tr>
    <th scope="row">社名</th>
    <td>ウォンツケーキ</td>
  </tr>
  <tr>
    <th scope="row">住所</th>
    <td>ウォンツ県一途市三番町4-1-3<br />ケーキビル1F</td>
  </tr>
  <tr>
    <th scope="row">TEL</th>
    <td>000-0000-0000</td>
  </tr>
  <tr>
    <th scope="row">定休日</th>
    <td>水曜日</td>
  </tr>
  <tr>
    <th scope="row">営業時間</th>
    <td>午前9:00〜午後8:00</td>
  </tr>
</table>
<p class="image">
  <img src="images/map.png" width="326" height="286" alt="◎△駅からウォンツケーキまでのアクセス" /> </p>

</div>
<!--contents--> 
</div>
<!--wrapper--> 
</div>
<!--container-->

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

item_a.html

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;Charset=UTF-8" />
<title>洋菓子のウォンツケーキ</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="洋菓子のウォンツケーキです。商品のご紹介、店舗案内、お問い合わせ。" />
<meta name="keywords" content="洋菓子,ケーキ,ウォンツケーキ" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="item.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.jpg" width="260" height="55" alt="ウォンツケーキ" /></h1>
</div>
 
<div id="navigation">
<ul>
<li id="home"><a href="index.html">ホーム</a></li>
<li id="item"><a href="products.html">商品</a></li>
<li id="shop"><a href="access.html">店舗案内</a></li>
<li id="order"><a href="order.html">お問い合わせ</a></li>
</ul>
</div>

<div id="wrapper">

<div id="sidemenu">
  <ul>
    <li><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>

<div id="contents">

<h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介" /></h2>
<div class="item">
<h3>チーズスフレ</h3>
<p class="image"><img src="images/item_photo01.jpg" width="475" height="285" alt="チーズスフレ商品写真" /></p>
<h4>当店人気メニュー！</h4>
<p class="note">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<p class="note">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。</p>
<p class="note">甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供にも是非どうぞ。</p>
<p class="price">1個 480円</p>
<p class="button"><a href="order.html"><img src="images/buy_btn.gif" width="105" height="16" alt="この商品を購入する" /></a></p>
</div><!--item-->

</div><!--contents-->
</div><!--wrapper-->
</div><!--container-->

<div id="footer">
  <address>
  Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.
  </address>
</div>


</body>
</html>

order.html

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;Charset=UTF-8" />
<title>洋菓子のウォンツケーキ</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="洋菓子のウォンツケーキです。商品のご紹介、店舗案内、お問い合わせ。" />
<meta name="keywords" content="洋菓子,ケーキ,ウォンツケーキ" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="order.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.jpg" width="260" height="55" alt="ウォンツケーキ" /></h1>
</div>
<div id="navigation">
<ul>
<li id="home"><a href="index.html">ホーム</a></li>
<li id="item"><a href="products.html">商品</a></li>
<li id="shop"><a href="access.html">店舗案内</a></li>
<li id="order"><a href="order.html">お問い合わせ</a></li>
</ul>
</div>
<div id="wrapper">

<div id="sidemenu">
<ul>
<li><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>
<div id="contents">
<h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご購入" /></h2>

<form action="#" method="post" name="orderform" id="orderform">

<h3><label for="name">お名前</label></h3>
<p><input name="name" type="text" id="name" value=" " /></p>
<h3><label for="mail">Eメール</label></h3>
<p><input name="mail" type="text" id="mail" value=" " /></p>
<h3><label for="postnum">郵便番号</label></h3>
<p><input name="postnum" type="text" id="postnum" value=" " /></p>
<h3><label for="address">ご住所</label></h3>
<p><textarea name="address" cols="46" rows="5" id="address">&nbsp;</textarea></p>

<h3>注文商品</h3>
<p><input type="checkbox" name="itemlist" value="cheese" id="itemlist_0" />
<label for="itemlist_0">チーズスフレ</label>
<select name="sumcheese" size="1">
<option value="1" selected="selected">１個</option>
<option value="2">２個</option>
<option value="3">３個</option>
<option value="4">４個</option>
<option value="5">５個</option>
</select></p>


<p><input type="checkbox" name="itemlist" value="birth" id="itemlist_1" />
<label for="itemlist_1">イチゴのバースデーケーキ</label>
<select name="sumichigo" size="1">
<option value="1" selected="selected">１個</option>
<option value="2">２個</option>
<option value="3">３個</option>
<option value="4">４個</option>
<option value="5">５個</option>
</select></p>


<p><input type="checkbox" name="itemlist" value="box" id="itemlist_2" />
<label for="itemlist_2">洋菓子の詰め合わせ</label>
<select name="sumbox" size="1">
<option value="1" selected="selected">１個</option>
<option value="2">２個</option>
<option value="3">３個</option>
<option value="4">４個</option>
<option value="5">５個</option>
</select></p>

<h3>当店をどこでお知りになりましたか</h3>
<p>
<input name="from" type="radio" value="web" id="web" checked="checked" /><label for="web">検索サイトから</label>
<input name="from" type="radio" value="fam" id="fam" /><label for="fam">ご家族・ご友人</label>
<input name="from" type="radio" value="reef" id="reef" /><label for="reef">広告・チラシ等</label>
<input name="from" type="radio" value="ano" id="ano" /><label for="ano">その他</label>
</p>

<p class="button">
<input type="submit" value="送信" /> <input type="reset" value="取り消し" />
</p>
</form>
</div>
<!--contents--> 
</div>
<!--wrapper--> 
</div>
<!--container-->

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

スタイルシート

style.css
- index.css
- products.css
- item.css
- access.css
- order.css

全ファイル共通　style.css

@charset "UTF-8";
body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,li,dt,dd,address,table,th,td,tr,a,img{
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	text-decoration: none;
	font-style: normal;
}
body {
	font-family: 
 "Hiragino Kaku Gothic Pro",  "ヒラギノ角ゴ Pro W3",  Meiryo,  "メイリオ",  Osaka,  "MS P Gothic",  "ＭＳ Ｐゴシック",  sans-serif;
	font-size: 14px;
	line-height: 1.4em;
	background: url(images/bg.png);
}

/*ブロック構成*/
div#container{
	width: 700px;
	height: auto;
	margin: 0 auto;
	background: #ffffff;
}

#header{
	width: 680px;
	height: auto;
	padding: 10px;
}

#navigation{
	width: 680px;
	height: 36px;
	margin: 0;
	padding: 0 10px;
}
/*index.htmlのみイメージ画像*/
#imgbox{
	margin: 5px 0;
	padding: 0 10px;
}

#wrapper{
	width: 680px;
	height: auto;
	overflow: auto;
	padding: 0 10px;
}
#sidemenu{
	float: left;
	width: 195px;
	height: auto;
	margin:0 10px 0 0;
}

#contents{
	float: left;
	width: 475px;
	height: auto;
	margin:0;	
}
#footer{
	width: 700px;
	clear: both;
	margin: 0 auto;
}


/*header*/
h1{
width: 680px;
height: 55px;
}
/*navigation*/
#navigation ul{
	float: left;
	width: 680px;
	height: 36px;
	background: url(images/menubar.jpg) repeat-x;
}
#navigation li{
	width: 136px;
	height: 36px;
	float: left;
}
#home a{
	display: block;
	width: 136px;
	height: 36px;
	background: url(images/menu_index.gif) left 0 no-repeat;
}
#home a:hover{
	background: url(images/menu_index.gif) left -36px no-repeat;
}
#item a{
	display: block;
	width: 136px;
	height: 36px;
	background: url(images/menu_products.gif) left 0 no-repeat;
}
#item a:hover{
	background: url(images/menu_products.gif) left -36px no-repeat;
}
#shop a{
	display: block;
	width: 136px;
	height: 36px;
	background: url(images/menu_shop.gif) left 0 no-repeat;
}
#shop a:hover{
	background: url(images/menu_shop.gif) left -36px;
}
#order a{
	display: block;
	width: 136px;
	height: 36px;
	background: url(images/menu_mail.gif) left 0 no-repeat;
}
#order a:hover{
	background: url(images/menu_mail.gif) left -36px no-repeat;
}
/*リストの文字消去*/
#home,
#item,
#shop,
#order{
	text-indent: -9999px;
}


/*sidemenu*/
#sidemenu li{
	margin: 0 0 5px 0;
}

/*footer*/
#footer address{
	width: 700px;
	height: 42px;
	text-align: center;
	font-size: 0.6em;
	padding: 20px 0 0 0;
	background: url(images/footer_back.gif) repeat-x;
}

トップページ　index.css

@charset "UTF-8";
/*indexページスタイル*/
/*ナビゲーション現在地*/
#home a{
	background: url(images/menu_index.gif) left -36px no-repeat;
}

/*indexpage　コンテンツ新着情報*/
#contents h2{
	margin: 0 0 10px 0;
}
#contents dl{
	width: 455px;
	height: auto;
	padding: 0 0 0 10px;
}
#contents dt{
	width: 450px;
	margin: 0 0 5px 0;
	border-left: solid 5px #867638;
	text-indent: 10px;
	font-weight: bold;
}
#contents dd{
	width: 435px;
	height: auto;
	margin: 0 0 10px 0;
	padding: 0 0 0 20px;
}
#contents a{
	color: #b80725;
}

/*indexpage　コンテンツおすすめ*/
#contents li{
	width: 475px;
	height: auto;
	margin: 0 0 10px 0;
	border-bottom: dotted 1px gray;
}
/*li内のposition配置用*/
#contents h3,
#contents .price,
#contents .note,
#contents .button{
	width: 315px;
	margin-left: 160px;
	margin-bottom: 10px;
}
#contents li{
	position: relative;
}
#contents .image{
	position: absolute;
	top: 0;
	left: 0;
}

#contents h3{
	font-family: serif;
	color: navy;
}
#contents .price{
	font-size: 0.9em;
}

商品のご案内　products.css

@charset "UTF-8";
/*products商品紹介ページスタイル*/
/*index以外のページのナビ下余白*/
#navigation{
	width: 680px;
	height: 36px;
	margin: 0 0 20px 0;
	padding: 0 10px;
}
/*ナビゲーション現在地*/
#item a{
	background: url(images/menu_products.gif) left -36px no-repeat;
}

/*コンテンツ*/
#contents h2{
	margin: 0 0 10px 0;
}

#contents #conmenu li{
	margin: 0 0 5px 10px;
	line-height: 1em;
	list-style: url(images/mark.gif) inside;
	border: none;
}
#contents #conmenu li a{
	color: #867638;
}
#contents #conmenu li a:hover{
	color: gray;
}


#contents li{
	width: 475px;
	height: auto;
	margin: 0 0 10px 0;
	border-bottom: dotted 1px gray;
}
/*li内のposition配置用*/
#contents h3{
	width: 445px;
	height: 16px;
	margin: 20px 0 10px 0;
	background: url(images/bg_h3.jpg) repeat-x;
	font-size: 16px;
	padding: 8px 0 8px 20px;
	color: #ffffff;
}

#contents h4,
#contents .price,
#contents .note,
#contents .button{
	width: 315px;
	margin-left: 160px;
	margin-bottom: 10px;
}
#contents li{
	position: relative;
}
#contents .image{
	position: absolute;
	top: 42px;
	left: 0;
}

#contents h4{
	font-family: serif;
	color: navy;
	font-size: 16px;
}
#contents .price{
	font-size: 0.9em;
}

商品の詳細　item.css

@charset "UTF-8";
/*商品紹介からリンクするitemページスタイル*/
/*index以外のページのナビ下余白*/
#navigation{
	width: 680px;
	height: 36px;
	margin: 0 0 20px 0;
	padding: 0 10px;
}
/*navigation現在地*/
#item a{
	background: url(images/menu_products.gif) left -36px no-repeat;
}

/*コンテンツ*/
#contents h2{
	margin: 0 0 10px 0;
}

#contents .item{
	width: 475px;
	height: auto;
	margin: 0 0 10px 0;
}

#contents h3{
	font-family: serif;
	color: navy;
	font-size: 18px;
	margin: 0 0 10px 0;
}
#contents .image{
	width: 445px;
	margin: 10px 0;
}
#contents h4{
	margin: 0 0 10px 0;
	font-size: 18px;
	color: red;
	border-left: solid 5px red;
	text-indent: 10px;
}
#contents .note{
	margin: 0 0 10px 0;
}
#contents .price{
	font-size: 0.9em;
	margin: 0 0 10px 0;
}
#contents .button{
	margin: 10px 0 0 0;
	padding: 20px 0;
	border-top: dotted 1px gray;
}

ショップ　access.css

@charset "UTF-8";

/*index以外のページのナビ下余白*/
#navigation{
	width: 680px;
	height: 36px;
	margin: 0 0 20px 0;
	padding: 0 10px;
}
/*nabigation現在地*/
#shop a{
	display: block;
	width: 136px;
	height: 36px;
	background: url(images/menu_shop.gif) left -36px no-repeat;
}
/*コンテンツ*/
#contents h2{
	margin: 0;
}
#contents table{
	margin: 0 0 30px 0;
	border-collapse: separate;
	border: none;
}
#contents th {
	text-align: right;
	width: 100px;
	padding:  5px 10px 5px 0;
	border: none;
	background: #867638;
}
#contents td {
	width: 365px;
	padding:  5px 0 5px 10px;
	border: solid 1px #867638;
}
.image{
	width: 475px;
	height: 317px;
	text-align: center;
}

お問い合わせ　order.css

@charset "UTF-8";
/*order問い合わせページスタイル*/
/*index以外のページのナビ下余白*/
#navigation{
	width: 680px;
	height: 36px;
	margin: 0 0 20px 0;
	padding: 0 10px;
}
/*navigation現在地*/
#order a{
	background: url(images/menu_mail.gif) left -36px no-repeat;
}

/*コンテンツ*/
#contents h2{
	margin: 0 0 10px 0;
}

h3{
	margin: 10px 0 5px 0;
	font-size: 14px;
	font-weight: bold;
}
#contents .button{
	margin: 10px 0 0 0;
	padding: 10px 0 20px 0;
	border-top: dotted 1px gray;
}

サイトの構築

自分めも。次は・・・

ブラウザ表示

HTMLファイル

index.html

products.html

access.html

item_a.html

order.html

スタイルシート

全ファイル共通 style.css

トップページ index.css

商品のご案内 products.css

商品の詳細 item.css

ショップ access.css

お問い合わせ order.css

全ファイル共通　style.css

トップページ　index.css

商品のご案内　products.css

商品の詳細　item.css

ショップ　access.css

お問い合わせ　order.css