ウェブ学のすすめ

Study of Web Design & Programing

サイト構築〜HTML&CSSの仕上げ〜｜Wants Cake

CSS

Wants Cake

長い記事になったので目次を付けてみました。

目次

リンクをクリックすると記事内の指定箇所に移動できます。

HTML
CSS

index.html


↓画像をクリックすると作成したページに飛びます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen,print">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print">
<title>Wants Cake</title>
</head>
<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header"><h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" width="260" height="55"></a></h1></div>
<!-- ▲#header -->
<!-- ▼#nav -->
<div id="nav">
<ul>
<li id="nav01"><a href="index.html" class="stay">ホーム</a></li>
<li id="nav02"><a href="products.html">商品のご案内</a></li>
<li id="nav03"><a href="shop.html">店舗案内</a></li>
<li id="nav04"><a href="mailto:xxxx@xxxx.jp">お問い合わせ</a></li>
</ul>
</div>
<!-- ▲#nav -->
<!-- ▼#mainimage -->
<div id ="mainimage" >
<img src="images/main_photo.jpg" width="680" height="236" alt="メインイメージ">
</div>
<!-- ▲#mainimage -->
<!-- ▼#wrapper -->
<div id="wrapper">
<!-- ▼#content -->
<div id="content">
<h2><img src="images/news_title.gif" width="475" height="25" alt="新着情報"></h2>
<dl>
<dt>2008.10.10</dt>
<dd>スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<br><span style="color: #FE2F75; font-weight: bold;">N.Y.チーズケーキ</span>、<span style="color: #FE2F75; font-weight: bold;">レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
<dt>2008.09.25</dt>
<dd><span style="color: #FE2F75; font-weight: bold;">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span style="color: #FE2F75; font-weight: bold;">5%オフ</span>！</dd>
</dl>
<h2><img src="images/recommend_title.gif" width="475" height="25" alt="おすすめ商品"></h2>
<!-- ▼.product -->
<div class="product">
<p class="top_item"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真"></p>
<h4>チーズスフレ</h4>
<p>1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<p><a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a>
<img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></p>
</div>
<div class="product">
<p class="top_item"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真"></p>
<h4>苺のバースデーケーキ</h4>
<p>1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<p><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る">
<img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></p>
</div>
<div class="product">
<p class="top_item"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真"></p>
<h4>焼菓子の詰め合わせ</h4>
<p>1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<p><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る">
<img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></p>
</div>
<!-- ▲.product -->
</div>
<!-- ▲#content -->
<!-- ▼#sidebar -->
<div id="sidebar">
<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>
<!-- ▲#sidebar -->
</div>
<!-- ▲#wrapper -->
<!-- ▼#footer -->
<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">
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen,print">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print">
<title>Wants Cake</title>
</head>
<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header"><h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" width="260" height="55"></a></h1></div>
<!-- ▲#header -->
<!-- ▼#nav -->
<div id="nav">
<ul>
<li id="nav01"><a href="index.html">ホーム</a></li>
<li id="nav02"><a href="products.html" class="stay">商品のご案内</a></li>
<li id="nav03"><a href="shop.html">店舗案内</a></li>
<li id="nav04"><a href="mailto:xxxx@xxxx.jp">お問い合わせ</a></li>
</ul>
</div>
<!-- ▲#nav -->
<!-- ▼#wrapper -->
<div id="wrapper">
<!-- ▼#content -->
<div id="content">
<h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介"></h2>
<!-- ▼#item_list -->
<div id="item_list">
<ul>
<li><a href="item.html">チーズケーキ</a></li>
<li><a href="#">バースデーケーキ</a></li>
<li><a href="#">洋菓子</a></li>
</ul>
</div>
<!-- ▲#item_list -->
<!-- ▼.product -->
<div class="product">
<h3>ショートケーキ</h3>
<p class="top_item"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真"></p>
<h4>チーズスフレ</h4>
<p>1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<p><a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a>
<img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></p>
</div>
<div class="product">
<h3>バースデーケーキ</h3>
<p class="top_item"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真"></p>
<h4>苺のバースデーケーキ</h4>
<p>1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<p><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る">
<img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></p>
</div>
<div class="product">
<h3>洋菓子</h3>
<p class="top_item"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真"></p>
<h4>焼菓子の詰め合わせ</h4>
<p>1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<p><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る">
<img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></p>
</div>
<!-- ▲.product -->
</div>
<!-- ▲#content -->
<!-- ▼#sidebar -->
<div id="sidebar">
<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>
<!-- ▲#sidebar -->
</div>
<!-- ▲#wrapper -->
<!-- ▼#footer -->
<div id="footer">
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>
</div>
<!-- ▲#footer -->
</div>
<!-- ▲#container -->
</body>
</html>

item.html


↓画像をクリックすると作成したページに飛びます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen,print">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print">
<title>Wants Cake</title>
</head>
<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header"><h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" width="260" height="55"></a></h1></div>
<!-- ▲#header -->
<!-- ▼#nav -->
<div id="nav">
<ul>
<li id="nav01"><a href="index.html">ホーム</a></li>
<li id="nav02"><a href="products.html" class="stay">商品のご案内</a></li>
<li id="nav03"><a href="shop.html">店舗案内</a></li>
<li id="nav04"><a href="mailto:xxxx@xxxx.jp">お問い合わせ</a></li>
</ul>
</div>
<!-- ▲#nav -->
<!-- ▼#wrapper -->
<div id="wrapper">
<!-- ▼#content -->
<div id="content">
<h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介"></h2>
<div class="product">
<h4 class="item">チーズスフレ</h4>
<img src="images/item_photo01.jpg" width="475" height="285" alt="チーズスフレ 商品写真">
<h5>当店人気メニュー！</h5>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。</p>
<p>甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供にも是非どうぞ。</p>
<p><span style=" font-weight: bold;">価格</span>： 480円 (税込)</p>
</div>
<div id="purchase">
<a href="order.html"><img src="images/buy_btn.gif"  width="120"  height="20" alt="この商品を購入する"></a>
</div>
</div>
<!-- ▲#content -->
<!-- ▼#sidebar -->
<div id="sidebar">
<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>
<!-- ▲#sidebar -->
</div>
<!-- ▲#wrapper -->
<!-- ▼#footer -->
<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">
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen,print">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print">
<title>Wants Cake</title>
</head>
<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header"><h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" width="260" height="55"></a></h1></div>
<!-- ▲#header -->
<!-- ▼#nav -->
<div id="nav">
<ul>
<li id="nav01"><a href="index.html">ホーム</a></li>
<li id="nav02"><a href="products.html">商品のご案内</a></li>
<li id="nav03"><a href="shop.html">店舗案内</a></li>
<li id="nav04"><a href="mailto:xxxx@xxxx.jp">お問い合わせ</a></li>
</ul>
</div>
<!-- ▲#nav -->
<!-- ▼#wrapper -->
<div id="wrapper">
<!-- ▼#content -->
<div id="content">
<h2><img src="images/shopping_title.gif" width="475" height="25" alt="商品のご購入"></h2>
<div id="formlist">
<form action="#" method="post" id="myform">
<p>
<label for="name">お名前</label>
<input type="text" id="name" name="name" size="35">
</p>
<p>
<label for="mail">Eメール</label>
<input type="text" id="mail" name="mailaddress" size="35">
</p>
<p>
<label for="postal">郵便番号</label>
<input type="text" id="postal" name="postalcode"  size="13">
（ハイフンなし）</p>
<p>
<label for="address">ご住所</label>
<textarea id="address" name="address" rows="5" cols="38"></textarea>
</p>
<p>
<label>注文商品</label>
</p>
<ul>
<li><input type="checkbox" name="cheese" id="cheese" value="cheese">チーズスフレ
<select name="cheese">
<option value="1" selected>1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
</select></li>

<li><input type="checkbox" name="strawberry" id="strawberry" value="strawberry">苺のバースデーケーキ
<select name="strawberry">
<option value="1" selected>1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
</select></li>

<li><input type="checkbox" name="pastry" id="pastry" value="pastry">洋菓子の詰め合わせ
<select name="pastry">
<option value="1" selected>1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
</select></li>
</ul>
<p>
<label>当店をどこでお知りになりましたか？</label>
<input type="radio" name="know" id="kensaku" value="kensaku">検索サイトから
<input type="radio" name="know" id="family" value="family">ご家族・ご友人から
<input type="radio" name="know" id="ad" value="ad">広告・チラシ等
<input type="radio" name="know" id="other" value="other" checked>その他
</p>
</form>
</div>
<div id="formbutton">
<form action="#" method="post" id="myform2">
<input type="submit" value="送信する" id="submit" class="btn"><input type="reset" value="取り消し" id="reset" class="btn">
</form>
</div>

</div>
<!-- ▲#content -->
<!-- ▼#sidebar -->
<div id="sidebar">
<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>
<!-- ▲#sidebar -->
</div>
<!-- ▲#wrapper -->
<!-- ▼#footer -->
<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">
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen,print">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print">
<title>Wants Cake</title>
</head>
<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header"><h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" width="260" height="55"></a></h1></div>
<!-- ▲#header -->
<!-- ▼#nav -->
<div id="nav">
<ul>
<li id="nav01"><a href="index.html">ホーム</a></li>
<li id="nav02"><a href="products.html">商品のご案内</a></li>
<li id="nav03"><a href="shop.html" class="stay">店舗案内</a></li>
<li id="nav04"><a href="mailto:xxxx@xxxx.jp">お問い合わせ</a></li>
</ul>
</div>
<!-- ▲#nav -->
<!-- ▼#wrapper -->
<div id="wrapper">
<!-- ▼#content -->
<div id="content">
<h2><img src="images/shop_title.gif" width="475" height="25" alt="店舗案内"></h2>
<div id="shopimage">
<img src="images/shop.jpg" width="475" height="317" alt="店内写真">
</div>
<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 class="last">営業時間</th><td>午前9:00〜午後8:00</td></tr>
</table>
<div id="map">
<img src="images/map.png" width="326" height="286" alt="地図">
</div>
</div>
<!-- ▲#content -->
<!-- ▼#sidebar -->
<div id="sidebar">
<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>
<!-- ▲#sidebar -->
</div>
<!-- ▲#wrapper -->
<!-- ▼#footer -->
<div id="footer">
<address>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</address>
</div>
<!-- ▲#footer -->
</div>
<!-- ▲#container -->
</body>
</html>

base.css


正当なCSSです!

@charset "UTF-8";

/* reset */
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo,
		"メイリオ",
		Osaka,
		"MS PGothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	background-color: #00578D;
}
img {
	border: 0;
}
#container {
	width: 700px;
	margin: 0 auto;
	background-color: #fff;
}
h1 {
	padding: 10px;
}
/* nav */
#nav {
	width: 680px;
	height: 36px;
	background-image:url(../images/menubar.jpg);
	background-repeat:repeat-x;
	overflow: hidden;
	margin-left: 10px;
}
#nav ul{
	list-style-type: none;
}
#nav li{
	float: left;
	width: 136px;
	height: 36px;
}
#nav li a {
	display: block;
	padding: 36px 0 0;
	height: 0;
}
#nav01 a { background-image: url(../images/menu_index.gif); }
#nav02 a { background-image: url(../images/menu_products.gif); }
#nav03 a { background-image: url(../images/menu_shop.gif); }
#nav04 a { background-image: url(../images/menu_mail.gif); }

#nav01 a.stay { background-position: 0 36px; }
#nav02 a.stay { background-position: 0 36px; }
#nav03 a.stay { background-position: 0 36px; }

#nav01 a:hover { background-position: 0 36px; }
#nav02 a:hover { background-position: 0 36px; }
#nav03 a:hover { background-position: 0 36px; }
#nav04 a:hover { background-position: 0 36px; }

#wrapper {
	width: 700px;
	margin-top: 20px;
}
#content {
	width: 475px;
	float: right;
	margin-right: 10px;
	padding-bottom: 40px;
}

/* sidebar */
#sidebar {
	float: left;
	width: 195px;
	margin: 0 0 0 10px;
}
#sidebar ul{
	list-style-type: none;
}
#sidebar li{
	margin-bottom: 10px;
}

#footer {
	clear: both;
	width: 700px;
	height: 62px;
	background-image: url(../images/footer_back.gif);
	background-repeat: repeat-x;
}
address {
	text-align: center;
	font-style: normal;
	padding: 19px;
	font-size: 0.8em;
}

style.css


正当なCSSです!

@charset "UTF-8";

#mainimage{
	margin: 5px 10px 0;
}

/* 新着 */
dl {
	padding: 10px 0 10px 10px;
}
dt {
	border-left: 5px solid #E8E2D4;
	padding-left: 10px;
	font-weight: bold;
}
dd {
	padding: 5px 30px 5px 15px;
	font-size: 0.8em;
	line-height: 1.4;
	margin-bottom: 10px;
}

/* トップページ */
.product {
	border-bottom: 1px solid #ccc;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
}
.top_item {
	float: left;
	margin-right: 10px;
}
h4 {
	color: #00578d;
	font-size: 1.1em;
}
h4.item {
	padding-left: 10px;
	font-size: 1.4em;
}
p {
	font-size: 0.875em;
	line-height: 1.5;
	margin: 5px 0;
}
h3 {
	background-image: url(../images/bg_h3.jpg);
	background-repeat: repeat-x;
	color: #fff;
	font-size: 0.875em;
	padding: 5px 20px;
	height: 32px;
}
h5 {
	font-size: 1.2em;
	color: #ff0d39;
	border-left: 5px solid #ff0d39;
	padding-left: 15px;
	margin-top: 15px;
}

/* 商品 */
#item_list { 
	padding: 10px;
}
#item_list ul { 
	list-style-type: none;
}
#item_list li { 
	background-image: url(../images/mark.gif);
	background-repeat: no-repeat;
	background-position: 0% 50%;
	padding-left: 20px;
}
#item_list li a { 
	text-decoration: none;
	color: #776f41;
	font-weight: bold;
}
#item_list li a:hover { 
	text-decoration: underline;
}

#shopimage {
	margin-top: -12px;
}

#map {
	text-align: center;
	margin-top: 15px;
}

/* テーブル */
table {
	border-collapse: collapse;
	margin-top: -6px;
	font-size: 0.875em;
}
th {
	text-align: right;
	width: 130px;
	background-color: #cfc89a;
	padding-right: 15px;
	border: 1px solid #ccc;
	border-bottom: 1px solid #fff;
}
td {
	width: 345px;
	padding-left: 15px;
	border: 1px solid #ccc;
}
th.last {
	border-bottom: 1px solid #ccc;
}

/* フォーム */
#formlist {
	border-bottom: 1px solid #ccc;
	margin: -12px 0 20px 15px;
	padding: 0 0 20px 0;
}
#formbutton {
	margin: 0 0 0 15px;
}
#myform label {
    font-weight: bold;
    display: block;
		margin-bottom: 10px;
}
#myform ul {
   list-style-type: none;
}
.btn {
	width: 70px;
	margin-right: 10px;
}