サイト構築

CSS 課題

架空のケーキ屋、Wants Cakeを構築

作ったページ
http://puisto.moo.jp/wants_cake/index.html

index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Wants cake |ホーム</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="css/style1.css" type="text/css" media="screen, print" />
</head>

<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.gif" alt="Wants Cake" width="260" height="47" /></h1>
</div>

<div id="nav">
<ul>
<li id="nav1"><a class="stay" href="index.html">ホーム</a></li>
<li id="nav2"><a href="products.html">商品のご案内</a></li>
<li id="nav3"><a href="shop.html">店舗案内</a></li>
<li id="nav4"><a href="order.html">お問い合せ</a></li>
</ul>
</div>
<p><img src="images/main_photo.jpg" alt="メインイメージ" width="680" height="236" /></p>

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

<div id="main">
<h2><img src="images/recommend_title.gif" alt="おすすめ商品" width="475" height="25" /></h2>
<div class="item1">
<h3 class="first">チーズスフレ</h3>
<p>1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<div class="btn">
<h4><a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る" width="83" height="16" /></a></h4>
<h4><a href="item.html"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" width="105" height="16" /></a></h4>
</div>
<p><img src="images/top_item_photo1.jpg" alt="チーズスフレ 商品写真" width="150" height="120" /></p>
</div>
<div class="item">
<h3>苺のバースデーケーキ</h3>
<p>1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<div class="btn">
<h4><a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る" width="83" height="16" /></a></h4>
<h4><a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" width="105" height="16" /></a></h4>
</div>
<p><img src="images/top_item_photo2.jpg" alt="苺のバースデーケーキ 商品写真" width="150" height="120" /></p>
</div>
<div class="item">
<h3>焼菓子の詰め合わせ</h3>
<p>1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<div class="btn">
<h4><a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る" width="83" height="16" /></a></h4>
<h4><a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" width="105" height="16" /></a></h4>
</div>
<p><img src="images/top_item_photo3.jpg" alt="焼菓子の詰め合わせ 商品写真" width="150" height="120" /></p>
</div>
</div>
</div>

<div id="sidebar">
<p><a href="#"><img src="images/banner01.jpg" alt="バースデーケーキの注文はこちら" width="195" height="175" /></a></p>
<p><a href="#"><img src="images/banner02.jpg" alt="見習いパティシエ ユミの奮闘日記" width="195" height="88" /></a></p>
</div>
</div>
</div>
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>

</body>
</html>
base
@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-style: normal;
}
img {
	vertical-align: text-top;
}
body {
	font-size: 0.9em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.7;
	width: auto;
  background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	background-color: #015790;
}
#container {
    overflow: auto;
	width: 680px;
    height: auto;
	margin: 0 auto;
	padding: 0 15px;
	background-color: #fff;
}
#header {
	padding: 10px 0;
}
#nav ul {
	width: 680px;
	height: 36px;
  margin-bottom: 20px;
	background-image: url(../images/menubar.gif);
	background-repeat: repeat-x;
}
#nav li {
	display: inline;
	float: left;
}
#nav li a {
  display: block;
	width: 136px;
	height: 0;
	padding-top: 36px;
	overflow: hidden;
}
#nav li#nav1 a {
	background-image: url(../images/menu_index.gif);
	background-position: 0 0px;
}
#nav li#nav2 a {
	background-image: url(../images/menu_products.gif);
	background-position: -136px 0px;
}
#nav li#nav3 a {
	background-image: url(../images/menu_shop.gif);
	background-position: -272px 0px;
}
#nav li#nav4 a {
	background-image: url(../images/menu_mail.gif);
	background-position: -408px 0px;
}
#nav li#nav1 a.stay {
	background-image: url(../images/menu_index.gif);
	background-position: 0 -36px;
}
#nav li#nav2 a.stay {
	background-image: url(../images/menu_products.gif);
	background-position: -136px -36px;
}
#nav li#nav3 a.stay {
	background-image: url(../images/menu_shop.gif);
	background-position: 0 -36px;
}
#nav li#nav4 a.stay {
	background-image: url(../images/menu_mail.gif);
	background-position: 0 -36px;
}
#wrapper {
	overflow: auto;
	width: 680px;
	margin: 10px 0;
  clear: both;
}
#content {
	width: 475px;
	float: right;
  padding-bottom: 20px;
}
#sidebar {
	width: 195px;
	float: left;
}
#sidebar p {
  margin-bottom: 10px;
}
address {
	font-size: 0.875em;
	text-align: center;
	width: 710px;
	height: 62px;
    margin: 0 auto;
	padding: 20px 0 0 0;
	background-image: url(../images/footer_back.gif);
	background-repeat: repeat-x;
}

@charset "UTF-8";
#nav ul {
  margin-bottom: 5px;
}
#content {
  padding-bottom: 40px;
}
dl dt {
  font-size: 1em;
  font-weight: bold;
  margin: 15px 0 5px 15px;
  border-left: 5px solid #e6e2d6;
  padding-left: 10px;
}
dd {
  margin: 5px 0 15px 15px;
}
span.em {
  color: #f95c86;
  font-weight: bold;
}
.item1 {
  overflow: auto;
  width: 475px;
  padding: 5px 0 20px 0;
  border-bottom: 1px solid #ccc;
}
.item {
  overflow: auto;
  width: 475px;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #ccc;
}
h3 {
  font-size: 1.2em;
  color: #015c91;
  font-family: serif;
}

h3, h3 + p, h3 + p + p, .btn {
  width: 315px;
  float: right;
}
.btn {
  overflow: auto;
  width: 193px;
  margin-right: 120px;
}
.btn h4 {
  float: left;
  width: 83px;
}
.btn h4 + h4 {
  float: right;
 width: 105px;
}
products
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Wants cake |商品のご案内</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen, print" />
</head>

<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.gif" alt="Wants Cake" width="260" height="47" / ></h1>
</div>
<div id="nav">
<ul>
<li id="nav1"><a href="index.html">ホーム</a></li>
<li id="nav2"><a class="stay" href="products.html">商品のご案内</a></li>
<li id="nav3"><a href="shop.html">店舗案内</a></li>
<li id="nav4"><a href="order.html">お問い合せ</a></li>
</ul>
</div>

<div id="wrapper">
<div id="content">
<div id="list">
<h2><img src="images/item_title.gif" alt="商品のご紹介" width="475" height="25" /></h2>
<ul>
<li><a href="#">ショートケーキ</a></li>
<li><a href="#">バースデーケーキ</a></li>
<li><a href="#">洋菓子</a></li>
</ul>
</div>

<div id="main">
<h3 class="first">ショートケーキ</h3>
<div class="item">
<h4>チーズスフレ</h4>
<p>1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<div class="btn">
<h5><a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る" width="83" height="16" /></a></h5>
<h5><a href="item.html"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" width="105" height="16" /></a></h5>
</div>
<p><img src="images/top_item_photo1.jpg" alt="チーズスフレ 商品写真" width="150" height="120" /></p>
</div>
<h3>バースデーケーキ</h3>
<div class="item">
<h4>苺のバースデーケーキ</h4>
<p>1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<div class="btn">
<h5><a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る" width="83" height="16" /></a></h5>
<h5><a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" width="105" height="16" /></a></h5>
</div>
<p><img src="images/top_item_photo2.jpg" alt="苺のバースデーケーキ 商品写真" width="150" height="120" /></p>
</div>
<h3>洋菓子</h3>
<div class="item">
<h4>焼菓子の詰め合わせ</h4>
<p>1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<div class="btn">
<h5><a href="#"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る" width="83" height="16" /></a></h5>
<h5><a href="#"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る" width="105" height="16" /></a></h5>
</div>
<p><img src="images/top_item_photo3.jpg" alt="焼菓子の詰め合わせ 商品写真" width="150" height="120" /></p>
</div>
</div>
</div>

<div id="sidebar">
<p><a href="#"><img src="images/banner01.jpg" alt="バースデーケーキの注文はこちら" width="195" height="175" /></a></p>
<p><a href="#"><img src="images/banner02.jpg" alt="見習いパティシエ ユミの奮闘日記" width="195" height="88" /></a></p>
</div>
</div>
</div>
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>

</body>
</html>

@charset "UTF-8";
#content {
  padding-bottom: 40px;
}
#list ul  {
   padding: 5px 0 5px 15px;
   }
#list li {
   background-image: url(../images/mark.gif);
   background-repeat: no-repeat;
   background-position: 0 2.5px;
  padding-left: 20px;
}
#list li a, #list li a:visited {
  text-decoration: none;
  color: #a57e44;
  font-weight: bold;
}
h3.first {
  margin-top: 10px;
}
h3 {
  color: #fff;
  padding: 5px 10px;
  margin: 20px 0 0 0;
  background-image: url(../images/bg_h3.jpg);
  background-repeat: repeat-x;
}
.item {
  overflow: auto;
  width: 475px;
  padding: 5px 0 20px 0;
  border-bottom: 1px solid #ccc;
}
h4 {
  color: #015c91;
  font-size: 1.2em;
  font-family: serif;
}
h4, h4 + p, h4 + p + p, .btn {
  width: 315px;
  float: right;
}
.btn {
  overflow: auto;
  width: 193px;
  margin-right: 120px;
}
.btn h5 {
  float: left;
  width: 83px;
}
.btn h5 + h5 {
  float: right;
  width: 105px;
}
.btn h5 + p {
  margin-bottom: 15px;
  }
item
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Wants cake |商品のご案内</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="css/style3.css" type="text/css" media="screen, print" />
</head>

<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.gif" alt="Wants Cake" width="260" height="47" / ></h1>
</div>

<div id="nav">
<ul>
<li id="nav1"><a href="index.html">ホーム</a></li>
<li id="nav2"><a class="stay" href="products.html">商品のご案内</a></li>
<li id="nav3"><a href="shop.html">店舗案内</a></li>
<li id="nav4"><a href="order.html">お問い合せ</a></li>
</ul>
</div>

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

<div id="sidebar">
<p><a href="#"><img src="images/banner01.jpg" alt="バースデーケーキの注文はこちら" width="195" height="175" /></a></p>
<p><a href="#"><img src="images/banner02.jpg" alt="見習いパティシエ ユミの奮闘日記" width="195" height="88" /></a></p>
</div>
</div>
</div>
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>

</body>
</html>

@charset "UTF-8";
#main {
  padding-bottom: 20px;
}
h3 {
   color: #015c91;
   font-size: 1.6em;
   padding: 5px 0 0 10px;
}
h4 {
  color: #ff2144;
  font-size: 1.3em;
  border-left: 5px solid #ff2144;
  padding-left: 5px;
}
h4 + p {
  padding: 10px 0;
}
h4 + p + p {
	padding: 0 0 10px 0;
}
p.last {
	padding: 0 0 20px 0;
	border-bottom: 1px solid #ccc;
}
p em {
  font-weight: bold;
}
h5 {
	padding-top: 20px;
}
order
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Wants cake |お問い合わせ</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="css/style4.css" type="text/css" media="screen, print" />
</head>

<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.gif" alt="Wants Cake" width="260" height="47" / ></h1>
</div>

<div id="nav">
<ul>
<li id="nav1"><a href="index.html">ホーム</a></li>
<li id="nav2"><a href="products.html">商品のご案内</a></li>
<li id="nav3"><a href="shop.html">店舗案内</a></li>
<li id="nav4"><a class="stay" href="order.html">お問い合せ</a></li>
</ul>
</div>

<div id="wrapper">
<div id="content">
<h2><img src="images/shopping_title.gif" alt="商品のご購入" width="475" height="25" /></h2>
<form action="#" method="post" id="shopform">
<p class="em">
<label for="name">お名前</label>
<input type="text"id="name" name="name" size="40" maxlength="10">
</p>
<p class="em">
<label for="email">Eメール</label>
<input type="text" id="email" name="emailaddress" size="40">
</p>
<p class="em">
<label for="postnum">郵便番号</label>
<input type="text" id="postnum" name="postnumber" size="20" maxlength="7"> (ハイフンなし)
</p>
<p class="em">
<label for="address">ご住所</label>
<textarea id="address" name="address" rows="3" cols="40"></textarea>
</p>
<p class="em">注文商品</p>
<p>
<label for="item"><input type="checkbox"id="item"name="item" value="1">チーズスフレ</label>
<select name="number_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></p>
<p class="select"><select name="number_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>
<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="3">洋菓子の詰め合わせ</label></p>
<p class="select"><select name="number_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 class="em">当店をどこでお知りになりましたか？</p>
<p class="radio">
<label for="seachsite"><input type="radio" name="how" value="1" id="searchsite" checked>
検索サイトから</label>
<label for="people"><input type="radio" name="how" value="2" id="people">
ご家族・友人から</label>
<label for="advertise"><input type="radio" name="how" value="3" id="advertise">
広告・チラシ等</label>
<label for="others"><input type="radio" name="how" value="4" id="others">
その他</label>
</p>
<p class="submit"><input type="submit" value="送信する" ><input type="submit" value="取り消す">
</form>
</div>

<div id="sidebar">
<p><a href="#"><img src="images/banner01.jpg" alt="バースデーケーキの注文はこちら" width="195" height="175" /></a></p>
<p><a href="#"><img src="images/banner02.jpg" alt="見習いパティシエ ユミの奮闘日記" width="195" height="88" /></a></p>
</div>
</div>
</div>
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>

</body>
</html>

@charset "UTF-8";

#content p {
		font-size: 0.9em;
}
#shopform {
	padding-left: 15px;
}
#shopform label, #shopform .radio {
	margin-bottom: 2px;
	display: block;
}
#item {
	font-size: 1em;
}
p.em {
	font-weight: bold;
	font-size: 1em;
}
select {
	float: right;
	width: 50px;
}
.radio {
	padding-bottom: 10px;
	border-bottom: solid 1px #ccc;
}
.submit {
	padding: 10px 0 0 0;
}
shop
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Wants cake |店舗案内</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="css/style5.css" type="text/css" media="screen, print" />
</head>

<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.gif" alt="Wants Cake" width="260" height="47" / ></h1>
</div>

<div id="nav">
<ul>
<li id="nav1"><a href="index.html">ホーム</a></li>
<li id="nav2"><a href="products.html">商品のご案内</a></li>
<li id="nav3"><a class="stay" href="shop.html">店舗案内</a></li>
<li id="nav4"><a href="order.html">お問い合せ</a></li>
</ul>
</div>

<div id="wrapper">
<div id="content">
<h2><img src="images/shop_title.gif" alt="店舗案内" width="475" height="25" /></h2>
<h3><img src="images/shop.jpg" alt="店内写真" width="475" height="317" /></h3>
<table>
<tr>
<th>社名</th><td>ウォンツケーキ</td>
</tr>
<tr>
<th>住所</th><td>ウォンツ県一途市三番町4-1-3<br />ケーキビル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><img src="images/map.gif" alt="地図" width="462" height="365" /></p>
</div>

<div id="sidebar">
<p><a href="#"><img src="images/banner01.jpg" alt="バースデーケーキの注文はこちら" width="195" height="175" /></a></p>
<p><a href="#"><img src="images/banner02.jpg" alt="見習いパティシエ ユミの奮闘日記" width="195" height="88" /></a></p>
</div>
</div>
</div>
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>

</body>
</html>

@charset "UTF-8";
table {
	width: 475px;
	border: collapse;
}
th {
	text-align: right;
	width: 150px;
	padding: 5px 15px 5px 0;
	background-color: #d0C89a;
	border: 1px solid #ccc;
}
td {
	padding: 5px 0 5px 15px;
	background-color: #fff;
	border: 1px solid #ccc;
}
#content p {
	text-align: center;
}

お問い合わせ 購入フォームのボタン類を横並びにできませんでした。
5ページ作ったことで課題がたくさん出てきました。
特に、どこをdivで囲むかよく考えることと、強引でないCSSを組めるようになりたいです。