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

サイト構築

《shop.html》

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

<link rel="stylesheet" href="css/style5.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">

<h3><img src="images/shop_title.gif" alt=""></h3>

<p><img src="images/shop.jpg" alt=""></p>

<table class="shop" summary="ショップ情報">

<tr>

<th class="first">社名</th><td class="first2">ウォンツケーキ</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 class="map"><em>道順</em></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;}

/* =====================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;
}

/* ====================table
 */
table.shop {
  maggin-top: -10px 0 0 0;
  border-collapse: separate;
  border-spacing-: 0.5px 0 0 0;
}

.shop th {
  text-align: right;
  width: 145px;
  border-right: 2px solid #D5D5D5;
  border-bottom: 2px solid #D5D5D5;
  border-left: 2px solid #D5D5D5;
  padding-right: 16px;
  background-color: #D0C89A;
}

th.first {
  border-top: 2px solid #D5D5D5;
}

.shop td {
  width: 330px;
  font-size: 14px;
  line-height: 1.3em;
  padding: 5px 0 5px 14px;
  border-right: 2px solid #D5D5D5;
  border-bottom: 2px solid #D5D5D5;
}

td.first2 {
  border-top: 2px solid #D5D5D5;
}
 
p.map {
  width: 475px;
  height: 300px;
  background-image: url(../images/02.gif);
  background-repeat: no-repeat;
  background-position: 10px center;
}

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

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

/* ====================to_container(footer枠) */
#to_container {
  width: 700px;
  margin: 0 auto; 
  padding-top: 45px;
  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 】

HTML5 Outliner【 Chrome 】

PAGE TOP