支援訓練 25日目 - ichisemasashi's blog

架空のサイト作り

カンプ(仕上がり見本)から画像を切り出す。
Fireworks
Webレイヤーにスライスを作っていく。
選択したスライスを書き出す。

floatしたら、親要素に「overflow: hidden」

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウォンツケーキ店 | テンプレート</title>

<link href="css/base.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
<div  id="contents">
  <div id="header">
    <h1><a href="index.html"><em>ウォンツケーキ店 | TOPページ</em></a></h1>
    <ul id="menu">
      <li><a href="index.html" class="menu_index"><span>ホーム</span></a></li>
      <li><a href="products.html" class="menu_products"><span>商品のご紹介</span></a></li>
      <li><a href="shop.html" class="menu_shop"><span>店舗案内</span></a></li>
      <li><a href="order.html" class="menu_order"><span>商品のご購入</span></a></li>
    </ul>
  </div>
  <!-- #header -->
  <div id="container">
    <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 -->
    <div id="main"> </div>
    <!-- #main --> 
  </div>
  <!-- #container -->
  <div id="footer"><address>Copyright&nbsp;(c)2013&nbsp;Wants&nbsp;Cake&nbsp;Corporation.All&nbsp;Right&nbsp;Reserved.</address> </div>
  <!-- #footer --> 
</div>
<!-- #contents  -->
</body>
</html>

@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: right;
  margin-bottom: 10px;
}
div#footer {
  clear:both;
  width: 680px;
  text-align: center;
  height: 62px;
  line-height: 62px;
  background:url(../images/footer_back.gif) repeat-x;
}

/* header */
h1 a {
    display: block;
    width: 252px;
    height: 37px;
    background:url(../images/logo.gif) no-repeat;
}
h1 a em{
  visibility:hidden;
}
ul#menu {
  height:36px;
  background:url(../images/menubar.gif) repeat-x;
  overflow: hidden;
}
ul#menu li {
  float:left;
}
ul#menu li a{
  display:block;
  width: 136px;
}
ul#menu li a span{
  visibility:hidden;
}
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_order {
  background: url(../images/menu_mail.gif) no-repeat;
}
ul#menu li a:hover {
  background-position: 0 -36px;
}