確認テスト（企業サイト製作）解答

授業まとめ

共通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 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{
	clear:both;
	width:700px;
	margin-bottom:10px;
	overflow:auto;
}

#header ul{
	list-style-type:none;
	background-image:url(../images/menubar.jpg);
	background-repeat:repeat-x;
	margin-bottom:10px;
	height:36px;
}

#content{
	float:right;
	width:485px;
	height:800px;
  margin:0;
	padding:0;
	overflow: auto;
}

#sidebar{
	float:left;
	width:205px;
	padding-left:10px;
}

.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; }

トップページ

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="shop.html"><em>店舗案内</em></a></li>
      	<li id="list04"><a href="mailto:test@sample.com"><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">５％オフ！</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>
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:310px;
	top:10px;
	right:0;
}

.item_detail p{
	margin-bottom:30px;
}

.item_sumb{
	position:relative;
	top:10px;
	left:5px;
}

商品のご案内

product.css
/* CSS Document */

#content{font-size:0.9em;}

#list_wrap{
	width:485px;
}

#item_valuation{
	width:485px;
}

#content h3{
  color:#FFF;
	background-image:url(../images/bg_h3.jpg);
	line-height:34px;
	padding-left:10px;
}

#content h4{
	color:#00354E;
	font-weight:bold;
}

#content ul{
	margin:10px 20px;
	padding:10px;
list-style-type:none;
}



#content ul li{
	background: url(../images/mark.gif) no-repeat 0 1px;
	margin-bottom:10px;
}

#content ul li a{
	text-decoration:none;
	display:block;
	height:16px;
	width:100px;
	padding-left:15px;
}

.item{
	width:480px;
	height:200px;
	border-bottom:1px solid #999;
	position:relative;
}

.item_detail{
	position:absolute;
  width:300px;
	top:38px;
	right:0;
}
.item_detail p{
	margin-bottom:35px;
}

.item_sumb{
	position:relative;
	top:10px;
	left:5px;
}
product.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="index.html"><em>ホーム</em></a></li>
      	<li id="list02"><a href="products.html"><em>商品のご案内</em></a></li>
      	<li id="list03"><a href="shop.html"><em>店舗案内</em></a></li>
      	<li id="list04"><a href="mailto:test@sample.com"><em>お問い合せ</em></a></li>
      </ul>
    </div>
    <div id="wrapper">
      <div id="content">
      	<h2><img src="images/item_title.gif" alt="商品のご紹介" title="商品のご紹介" ></h2>
				<div id="list_wrap">
        	<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">
        	<div class="item">
          	<h3><a name="short">ショートケーキ</a></h3>
            <div class="item_detail">
              <h4>チーズスフレ</h4>
              <h5>1個480円</h5>
              <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
              <a href="item.html"><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">
	        	<h3><a name="birthday">バースデーケーキ</a></h3>
            <div class="item_detail">
              <h4>苺のバースデーケーキ</h4>
              <h5>1個2,480円</h5>
              <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">
          	<h3><a name="snack">洋菓子</a></h3>
            <div class="item_detail">
              <h4>焼菓子の詰め合わせ</h4>
              <h5>1箱 1,680円</h5>
              <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.css
@charset "utf-8";
/* CSS Document */

#content{
	font-size:1.2em;
}

#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;
}
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="shop.html"><em>店舗案内</em></a></li>
      	<li id="list04"><a href="mailto:test@sample.com"><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>

商品詳細

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;
}
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="shop.html"><em>店舗案内</em></a></li>
      	<li id="list04"><a href="mailto:test@sample.com"><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>
        <a href="order.html"><img src="images/buy_btn.gif" ait="この商品を購入する" title="この商品を購入する" id="buy"/></a>
      </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.css
@charset "utf-8";
/* CSS Document */

#content{font-size:1.2em;}

#content form{margin:10px;}

.form_header{
	font-weight:bold;
	line-height:1.2em;
	padding:10px 0;
}

.text{
	border:1px solid #333;
	height:1.4em;
	margin:10px 0;
}

.textarea{
	border:1px solid #333;
	margin:10px 0;
}

.items{padding-bottom:3px;}

.select{
	border:1px solid #333;
}

#order{
	width:460px;
	padding-bottom:20px;
	border-bottom:1px solid #666;
}

#btnArea{
	padding:10px;
}
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="shop.html"><em>店舗案内</em></a></li>
      	<li id="list04"><a href="mailto:test@sample.com"><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">Ｅメール</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&#233;" id="souffl&#233;" /><label for="souffl&#233;">&nbsp;チーズスフレ</label>&nbsp;&nbsp;
              <select name="cnt_souffl&#233;" id="cnt_souffl&#233;" 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">&nbsp;苺のバースデーケーキ</label>&nbsp;&nbsp;
              <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">&nbsp;洋菓子の詰め合わせ</label>&nbsp;&nbsp;
              <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>