cake shopサイト作成 - gomiichan's diary

～練習の為の架空サイトの作成～

まず、FLASHにて画像の切り出し作業の後

レイアウトをもとにHTMLの作成
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウォンツケーキ店 | テンプレート</title>

<link href="css/base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contents">
<div id="header">

 <h1><a href="index.html">ウォンツケーキ店 | Topページ</a></h1>
  <ul id="menu">
  <li><a href="index.html" class="menu_index">ホーム</a></li>
  <li><a href="products.html" class="menu_products">商品のご紹介</a></li>
  <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
  <li><a href="order.html" class="menu_order">商品のご購入</a></li>
  </ul>
<div><!--header end-->

<div id="container">

<div id="main">
</div><!--main end-->
<div id="sidebar">
 <a href="item2.html" class="banner" title="バースデーケーキのご注文はこちら"><img src="images/banner01.jpg" width="195" height="175" alt="バースデーケーキのご注文はこちら"></a>
 <a href="yumi.html" class="banner" title="ユミの奮闘日記"><img src="images/banner02.jpg" width="195" height="88" alt="ユミの奮闘日記"></a>
</div><!--sidebar end-->
</div><!--container end-->
</div><!--contents end-->
<div id="footer">
<address>Copyright&nbsb;(c)2013&nbsp;Wants&nbsp;cake&nbsp;coporation.All&nbsp;Right&nbsp;Reserved.</address>
</div><!--footer end-->
</body>
</html>

その後、CSS作成

@charset "utf-8";
/* css reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}  
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

/*    ////////    ☆Wants Cake テンプレート☆///// 　*/

body {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.7;
   color: #333;
   font-size:14px;
   background: #b82456;
   }
   div#contents {
     width: 680px;
     margin:0 auto;
     padding: 0 10px;
     background: #fff;
   }
   div#header {
     margin:0 auto;
     padding:0;
   }
   div#container{
     padding-top:10px;
     overflow:hidden;
   }
   div#sidebar{
     float:left;
     width:195px;
     margin-right:10px;
   }
   div#main{
     float:left;
     margin-bottom:10px;
   }
   div#footer{
     clear:both;
     width: 680px;
     text-align:center;
     height:62px;
     line-height:62px;
     background:url(../images/footer_back.png) repeat-x;
   }
  
   /*--header--*/
   h1 a {
     display:block;
     width:252px;
     height:37px;
     margin-bottom:10px;
     text-indent: -333em;
     background:url(../images/logo.gif) no-repeat;
   }
   
   ul#menu{
     height:36px;
     background:url(../images/menubar.png) repeat-x;
     /*overflow:hidden;*/
   }
   ul#menu li {
     float:left;
   }
   
   
     ul#menu li a{
       display:block;
       width: 136px;
       text-indent: -333em;
     }
 ul#menu li a.menu_index{
         background:url(../images/menu_index.gif) no-repeat;
       }
 ul#menu li a.menu_products{
         background:url(../images/menu_products.gif) no-repeat;
       }
 ul#menu li a.menu_shop{
         background:url(../images/menu_shop.gif) no-repeat;
       }
 ul#menu li a.menu_mail{
         background:url(../images/menu_mail.gif) no-repeat;
       }
 
 ul#menu li a:hover{
         background-position: 0px -36px;
       }
 #menu li a.menu_indexOn{
         background: url(../images/menu_index.gif) 0px -36px;
       }
 #menu li a.menu_productsOn{
         background: url(../images/menu_products.gif) 0px -36px;
       }
 #menu li a.menu_shopOn{
         background: url(../images/menu_shop.gif) 0px -36px;
       }
 #menu li a.menu_mailOn{
         background: url(../images/menu_mail.gif) 0px -36px;
       }

       h2{
       margin:bottom: 15px
       }

 ||<