Wants Cake０２ - 実践するWEBサイト制作

サイト構築

《products.html》
《item.html》
《拡大写真》

《products.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Wants Cake</title>

<link rel="stylesheet" href="css/style2.css" media="screen,print">

</head>
<body>
<div id="to_body">

<div id="container">

<div id="header">

<h1 class="logo1"><img src="images/logo.jpg" alt="Wants Cake"></h1>

<h2></h2>

<div id="nav">

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

</div><!-- nav_second -->
</div><!-- / nav -->
</div><!-- / header -->

<div id="wrapper">

<div id="content">

<h2><img src="images/item_title.gif" alt="商品のご紹介"></h2>
<div class="list">

<ul>
<li class="to_list">ショートケーキ</li>
<li class="to_list">バースデーケーキ</li>
<li class="to_list">洋菓子</li>
</ul>

</div>

<h3 class="tab">ショートケーキ</h3>

<div class="to_text2"><img src="images/top_item_photo1.jpg" alt="チーズスフレ" align="left" class="to_img"><span class="name">チーズスフレ<br></span><p class="name2">1個480円<br></p><span class="name3">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。<br></span><p class="name4">
<a href="item.html"><img src="images/top_moreinfo_btn.gif" alt="詳細を見る"></a>
<a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></a></p><br clear="left">
</div>

<h3 class="tab2">バースデーケーキ</h3>

<div class="to_text"><img src="images/top_item_photo2.jpg" alt="苺のバースデーケーキ" align="left" class="to_img"><span class="name">苺のバースデーケーキ</span><br><p class="name2">1個 2,480円<br></p><span class="name3">大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。<br></span><p class="name4">
<img src="images/top_moreinfo_btn.gif" alt="詳細を見る">
<img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></p><br clear="left">
</div>

<h3 class="tab2">洋菓子</h3>

<div class="to_text"><img src="images/top_item_photo3.jpg" alt="焼菓子の詰め合わせ" align="left" class="to_img"><span class="name">焼菓子の詰め合わせ<br></span><p class="name2">1箱 1,680円<br></p><span class="name3">当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。<br></span><p class="name4">
<img src="images/top_moreinfo_btn.gif" alt="詳細を見る">
<img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></p><br clear="left">
</div>

</div><!-- / wrappre -->
</div><!-- / content -->

<div id="sidebar">

<p><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら"></p>

<p class="banner"><img src="images/banner02.jpg" alt="見習いパティシエ、ユミの奮闘日記"></p>

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

<div id="to_container">

<div id="footer">

<addess>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</addess>

</div><!-- / footer -->
</div><!-- / to_container -->
</div><!-- / to_body -->

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";



/* ====================reset
 */
html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,addres,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
	"ヒラギノ角ゴ Pro w3",
	"Hiragino Kaku Gothic Pro",
	"Hiragino Kaku Gothic Pro W3",
	"メイリオ",
	Meiryo,
	Osaka,
	"ＭＳ Ｐゴシック",
	"MS PGothic",
	sans-serif;
}

table {
  border-collapse: collapse;
  border-apacing: 0;
}

ul, ol {
  list-style-type: none;
}

a {
  text-decoration: none;
}

img {
  border: 0;
}

img input {
  vertical-align: bottom;
}

/* ====================body
 */
body {  
  background-image: url(../images/bg.jpg);
}

/* ====================container
 */
#container {
  width: 680px;
  margin: 0 auto; 
  padding: 0 10px;
  background-color: #fff;
  overflow: hidden;
}

h1.logo1 {
  padding: 10px 0;}

#nav {
  width: 680px;
  height: 36px;
  background-image: url(../images/bg_h3.jpg) ;
}

#nav li {
  float: left;
}

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

li.nav1 a {
  margin-left: 68px;
  background-image: url(../images/menu_index.gif);
}

li.nav1 a:hover {
  background-position: 0 -36px;
}

li.nav2 a {
  background-image: url(../images/menu_products.gif);
}

li.nav2 a:hover {
  background-position: 0 -36px;
}

li.nav3 a {
  background-image: url(../images/menu_shop.gif);
}

li.nav3 a:hover {
  background-position: 0 -36px;
}

li.nav4 a {
  background-image: url(../images/menu_mail.gif);
}

li.nav4 a:hover {
  background-position: 0 -36px;
}

em {
  visibility: hidden;
}

#wrapper {
  margin-top: 20px;
  margin-left: 110px;
  width: 680px;
}

#content {
  float: right;
  padding-right: 110px;
  width: 475px;
}

li.to_list {
  color: rgb(106, 94, 42);
  padding-bottom: 13px;
  background-image: url(../images/mark.gif);
  background-repeat: no-repeat;
}

.list {
  font-size: 18px;
  text-indent: 1.2em;
  margin-left: 13px;
  padding-top: 8px;
}

h3 {
  text-indent: 1em;
}

h3.tab {
  color: #ffffe4;
  margin-top: 2px;
  padding-top: 8px;
  height: 25px;
  background-image: url(../images/menubar.jpg);
}

h3.tab2 {
  color: #ffffe4;
  margin-top: 19px;
  padding-top: 8px;
  height: 25px;
  background-image: url(../images/menubar.jpg);
}

.to_text2 {
  border-bottom: 1px solid #e7e1d5;
  margin-top: 15px;
}

.to_text {
  border-bottom: 1px solid #e7e1d5;
  margin-top: 15px;
}	  

img.to_img {
  margin-right: 10px;
}

span.name {
  font-weight: bolder;
  font-size: 20px;
  color: #0f5a9b;
}
  
p.name2 {
  padding: 10px 0;
}

span.name3 {
  line-height: 1.3em;
  font-size: 15px;
}

p.name4 {
  padding-top: 10px;
}

p.banner {
  margin-top: 5px;
}

#to_container {
  width: 700px;
  margin: 0 auto; 
  padding-top: 30px;
  text-align: center;
  background-color: #fff;
}

#footer {
  clear: both;
  width: 700px;
  padding-top: 25px;
  height: 35px;
  background-image: url(../images/footer_back.gif);
}

ソースコード【 HTML 】

《item.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Wants Cake</title>

<link rel="stylesheet" href="css/style3.css" media="screen,print">

</head>
<body>
<div id="to_body">

<div id="container">

<div id="header">

<h1 class="logo1"><img src="images/logo.jpg" alt="Wants Cake"></h1>

<h2></h2>

<div id="nav">

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

</div><!-- nav_second -->
</div><!-- / nav -->
</div><!-- / header -->

<div id="wrapper">

<div id="content">

<h2><img src="images/item_title.gif" alt="商品のご紹介"></h2>

<p class="photo_title">チーズスフレ</p>
<p><img src="images/item_photo01.jpg" alt="チーズスフレ"></p>
<p class="photo_menu">当店人気メニュー！</p>
<p class="sentence1">
ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます。
</p>
<p class="sentence2">
甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供にも是非どうぞ。
</p>
<p class="price"><span class="to_price">価格</span>： 480円 (税込)</p>

<p class="buy"><a href="order.html"><img src="images/buy_btn.gif" alt="この商品を購入する"></a></p>

</div><!-- / content -->
</div><!-- / wrappre -->

<div id="sidebar">

<p><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら"></p>

<p class="banner"><img src="images/banner02.jpg" alt="見習いパティシエ、ユミの奮闘日記"></p>

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

<div id="to_container">

<div id="footer">

<addess>Copyright (C) 2012 Wants Cake Corporation. All Rights Reserved.</addess>

</div><!-- / footer -->
</div><!-- / to_container -->
</div><!-- / to_body -->

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";

/* ====================reset
 */
html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,addres,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "ヒラギノ角ゴ Pro w3",
	"Hiragino Kaku Gothic Pro",
	"Hiragino Kaku Gothic Pro W3",
	"メイリオ",
	Meiryo,
	Osaka,
	"ＭＳ Ｐゴシック",
	"MS PGothic",
	sans-serif;
}

table {
  border-collapse: collapse;
  border-apacing: 0;
}

ul, ol {
  list-style-type: none;
}

a {
  text-decoration: none;
}

img {
  border: 0;
}

img input {
  vertical-align: bottom;
}

/* ====================body
 */
body {
  background-image: url(../images/bg.jpg);
}

/* ====================container
 */
#container {
  width: 680px;
  margin: 0 auto; 
  padding: 0 10px;
  background-color: #fff;
  overflow: hidden;
}

h1.logo1 {
  padding: 10px 0;}

#header {
  height: ;
  background-color: #;
}

/* =====================nav
 */
#nav {
  width: 680px;
  height: 36px;
  background-image: url(../images/bg_h3.jpg) ;
}

#nav li {
  float: left;
}

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

li.nav1 a {
  margin-left: 68px;
  background-image: url(../images/menu_index.gif);
}

li.nav1 a:hover {
  background-position: 0 -36px;
}

li.nav2 a {
  background-image: url(../images/menu_products.gif);
}

li.nav2 a:hover {
  background-position: 0 -36px;
}

li.nav3 a {
  background-image: url(../images/menu_shop.gif);
}

li.nav3 a:hover {
  background-position: 0 -36px;
}

li.nav4 a {
  background-image: url(../images/menu_mail.gif);
}

li.nav4 a:hover {
  background-position: 0 -36px;
}

em {
  visibility: hidden;
}

/* =====================wrapper
 */
#wrapper {
  margin-top: 20px;
  margin-left: 110px;
  width: 680px;
}

/* ====================content
 */
#content {
  float: right;
  padding-right: 110px;
  width: 475px;
}

.photo_title {
  font-weight: bold;
  font-size: 22px;
  text-indent: 0.6em;
  color: #024F8C;
  padding-top: 10px;
  padding-bottom: 3px;
}

.photo_menu {
  font-weight: bold;
  font-size: 18px;
  color: #F90C31;
  text-indent: 0.4em;
  margin-top: 18px;
  border-left: 5px solid #F90C31;
}

.sentence1 {
  line-height: 1.3em;
  font-size: 14px;
  margin-top: 10px;
 }

.sentence2 {
  line-height: 1.3em;
  font-size: 14px;
  margin-top: 12px;
  }

.price {
  font-size: 16px;
  margin-top: 12px;
  padding-bottom: 20px;
  border-bottom: 2px solid #E8E2D6;
  }

.to_price {
  font-weight: bold;
}

.buy {
  margin-top: 18px;
}

/* =====================sidebar
 */
#sidebar {
  float: left;
}

p.banner {
  margin-top: 5px;
}

/* ====================to_container(footer枠) */
#to_container {
  width: 700px;
  margin: 0 auto; 
  padding-top: 18px;
  text-align: center;
  background-color: #fff;
}

/* =====================footer
 */
#footer {
  clear: both;
  width: 700px;
  padding-top: 25px;
  height: 35px;
  background-image: url(../images/footer_back.gif);
}

ブラウザで表示【 Firefox 】

《products.html》

《item.html》

《拡大写真》

HTML5 Outliner【 Chrome 】

PAGE TOP