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

サイト構築

《index.html》

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

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

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

<div id="container">

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

<h2 class="logo2"><img src="images/main_photo.jpg" alt="Wants Cake_index"></h2>
</div>

<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">

<h3><img src="images/news_title.gif" alt="新着情報画像"></h3>

<dl>
<dt>2008.10.10</dt>
<dd>スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span>N.Y.チーズケーキ、レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
<dt>2008.09.25</dt>
<dd><span>スペシャルキャンペーン</span>実施中！ 人気のケーキが5%オフ！</dd>
</dl>

<h3 class="tab"><img src="images/recommend_title.gif" alt="おすすめ商品画像"></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">
<img src="images/top_moreinfo_btn.gif" alt="詳細を見る">
<img src="images/top_morelook_btn.gif" alt="大きな写真を見る"></p><br clear="left">
</div>

<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>

<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 {
  margin: 0 auto;    
  background-image: url(../images/bg.jpg);
}

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

.bill {
  position: relative;
  width: 680px;
  height: auto;}

h1.logo1 {
  padding: 10px 0;}

h2.logo2 {
  position:absolute;
  top: 120px;
  left: 0;
}

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

#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: 250px;
  margin-left: 110px;
  width: 680px;
}

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

dt {
  font-weight: bolder;
  padding-top: 3px;
  margin: 13px 0 10px 12px;
  font-size: 19px;
  border-left: 6px solid #e7e1d5;
  text-indent: 0.5em;
}

dd {
  line-height: 1.1em;
  margin-left: 26px;
}

h3.tab {
  margin-top: 19px;
}

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


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

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

#sidebar {
  float: left;
  width: ;
}

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;
  margin: 0 auto;
  padding-top: 25px;
  height: 35px;
  background-image: url(../images/footer_back.gif);
}

ブラウザで表示【 Firefox 】

HTML5 Outliner【 Chrome 】

PAGE TOP