Kitchenware Club 完成

CSS課題

完成しました。

昨日から、1時間半作業したので合計4時間半。
ちょっと時間かかりすぎました・・・
もう少しハイペースにコーディングできないとプロになれないと痛感します。今、そこが弱いところです。
http://felica.boy.jp/kitchenware/

×つっかかったところ×
footerのフロートしたナビゲーションの中央揃え。
IE6対策をすると、ちょっと複雑なコードをかかなくてはならない。
（といっても、対策してるのはここだけｗ）

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Kitchenware Club</title>
<link rel="stylesheet" href="style.css">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Kaushan Script'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>

<body>
	<article>
	<div id="content">
		<header>
			<h1>Kitchenware Club</h1>
    		<aside id="contact"><a href="#">お問い合わせ</a></aside>
		</header>
		<div id="wrapper1">
			<nav id="headernav">
				<ul>
					<li>
						<span class="toggle"><img class="arrow" src="arrow.png" height="15px" width="15px">TOP</span>
            			<ul>
							<li><a href="#">リンク項目その1</a></li>
							<li><a href="#">リンク項目その2</a></li>
						</ul>
					</li>
					<li>
						<span class="toggle"><img class="arrow" src="arrow.png" height="15px" width="15px">TKitchenware Club</span>
            			<ul>
							<li><a href="#">リンク項目その1</a></li>
							<li><a href="#">リンク項目その2</a></li>
						</ul>
					</li>
					<li>
						<span class="toggle"><img class="arrow" src="arrow.png" height="15px" width="15px">製品情報</span>
            			<ul>
							<li><a href="#">リンク項目その1</a></li>
							<li><a href="#">リンク項目その2</a></li>
						</ul>
					</li>
					<li>
						<span class="toggle"><img class="arrow" src="arrow.png" height="15px" width="15px">会社概要</span>
            			<ul>
							<li><a href="#">リンク項目その1</a></li>
							<li><a href="#">リンク項目その2</a></li>
						</ul>
					</li>
					<li>
						<span class="toggle"><img class="arrow" src="arrow.png" height="15px" width="15px">取扱ショップ一覧</span>
            			<ul>
							<li><a href="#">リンク項目その1</a></li>
							<li><a href="#">リンク項目その2</a></li>
						</ul>
					</li>
				</ul>
			</nav>
			<script type="text/javascript" >	
				$(function(){
                $('.toggle').click(function(){
                    $(this).next().slideToggle('fast');
                });
            });

			</script>
			<div id="slider">
				<img id="billboard" src="billboard.png">
				<img id="billboard" src="billboard2.png">
				<img id="billboard" src="billboard3.png">
				<img id="billboard" src="billboard4.png">
			</div>
			<script>
				$(document).ready(function() {
					$('#slider').cycle({
					fx : 'fade', /* fade, scrollLeft, scrollUp など */
					speed : 1500, /* エフェクトのスピード */
					timeout : 4000, /* スライドの間隔 */
					easing : 'swing', /* easing */
					pager:"#nav",
					});
				});
			</script> 
		</div>
		<hr id="headline">
		<div id="left-column">
		<h2>更新情報</h2>
		<section>
			<dl><dt>2012.7.2</dt><dd><a href="#">夏の新作商品を5点追加しました。</a></dd></dl>
		</section>
		<section>
			<dl><dt>2012.6.22</dt><dd><a href="#">日本中の食器が集まるイベント"日本食器展示会"にKichinwere Clubも出品しました。</a></dd></dl>
		</section>
		<section>
			<dl><dt>2012.6.12</dt><dd><a href="#">取扱ショップ情報を更新しました。</a></dd></dl>
		</section>
		</div>
		<div id="right-column">
		<h2>新着製品</h2>
		<section>
			<div class="wrapper-left">
				<figure><img class="product" src="glass.jpg"></figure>
			</div>
			<div class="wrapper-right">
				<h3>Kitchenware Clubオリジナル</h3>
				<h4>厚手ガラスタンブラー・小 約280ml</h4>
				<figure><img class="flag" src="japan.png"></figure>
				<p>梨地の丈夫な厚手ガラスです。
				割れにくいガラスを使用しています。
				これからの季節にピッタリのタンブラーです。</p>
			</div>
		</section>
		<section>
			<div class="wrapper-left">
				<figure><img class="product" src="spoon.jpg"></figure>
			</div>
			<div class="wrapper-right">
				<h3>山崎木工</h3>
				<h4>木製 スプーン 39×155mm</h4>
				<figure><img class="flag" src="japan.png"></figure>
				<p>柔らかな形状の木製スプーンです。
				何通りもの試作品を作り、その中から
				最も手になじむ物を製品化しました。</p>
			</div>
		</section>
		<section>
			<div class="wrapper-left">
				<figure><img class="product" src="tong.gif"></figure>
			</div>
			<div class="wrapper-right">
				<h3>WAECHTERSBACH</h3>
				<h4>ステンレスマルチトング 長さ23cm</h4>
				<figure><img class="flag" src="berugi.png"></figure>
				<p>ドイツの老舗食器メーカー・べヒタフバッハから
				シンプルなステンレストングの入荷です。
				軽くてつかみやすい設計になっています。</p>
			</div>
			<aside id="past"><a href="#"><img class="arrow" src="arrow.png" height="15px" width="15px">以前の新着情報を見る</a></aside>
		</section>
		</div>
	</div>
	
		<footer>
			<nav id="footernav">
				<ul id="footerul">
    				<li>サイトマップ</li>
    				<li>プライバシーポリシー</li>
    				<li>アクセシビリティポリシー</li>
    			</ul>
    		</nav>
    		<hr id="footline">
			<small>Copyright &#169; 2012 Kitchenware Club All Rights Reserved.</small>
		</footer>
	</article>
</body>

</html>

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

body {
	border-top: 5px solid #fa5128;
	background-color: #f6f2e6;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
	color: #666;
	font-size: 13px;
}

ul {
	list-style-type: none;
}
#content {
	padding: 0 20px 0 20px;
}
article {
	width: 960px;
	margin: 0 auto 20px auto;
	padding-bottom: 20px;
	background-color: #fff;
	border: 3px solid #dbd8c7;
	border-top: 0;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
	-o-border-radius: 0 0 6px 6px;
	-ms-border-radius: 0 0 6px 6px;
}
header {
	overflow: hidden;
	padding: 10px 0 10px 0;
}
h1 {
	font-family: 'Kaushan Script', cursive;
	font-size: 30px;
	color: #868686;
	letter-spacing: 3px;
	float: left;
	padding-left: 50px;
	background-image: url(logo.png);
	background-repeat: no-repeat;
	background-position: 8px 8px;
	-webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,1));
}
#contact {
	float: right;
	padding-left: 30px;
	background-image: url(mail.png);
	background-repeat: no-repeat;
}
#wrapper1 {
	overflow: hidden;
}
#headernav {
	float: left;
	width: 200px;
	margin: 0 0 20px 20px;
}
#headernav li {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.51, #d1d1d1), color-stop(0.50, #dbdbdb), color-stop(0.00, #dcdcdc));
	background: -webkit-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -moz-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -o-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -ms-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	border: 1px solid #aaa;
	border-bottom: 0;
	
}
#headernav li:last-child {
	border: 1px solid #aaa;
}

#headernav li ul {
	display: none;
}
#headernav li ul li {
	background-image: url(pattern.png);
	border: 0;
	text-align: center;
	padding: 5px;
}
#headernav li ul li:last-child {
	border: 0;
}

.toggle {
	display: block;
	padding: 10px 0 10px 15px;
}
.subli {
	display: none;
	border: 0;
}

#slider {
	float: right;
}
#billboard {
	
	width: 670px;
	height: 300px;
	border: 2px solid #9aadbe
}
#headline {
	height: 20px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.51, #d1d1d1), color-stop(0.50, #dbdbdb), color-stop(0.00, #dcdcdc));
	background: -webkit-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -moz-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -o-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -ms-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	border: 0;
	margin-bottom: 30px;
	margin-top: 20px;
	opacity: 0.5;
}

h2 {
	border-left: 5px solid #fa5128;
	font-size: 15px;
	font-weight: normal;
	padding: 5px 0 5px 10px;
	background-image: url(pattern.png);
}
#left-column {
	width: 300px;
	float: left;
}
dl {
	border-bottom: 1px solid #ddd;
	te
}
dt {
	margin: 15px 0 0 10px;
}
dd {
	margin: 10px;
}

#right-column {
	width: 600px;
	float: right;
	margin-bottom: 50px;
}

.wrapper-left {
	width: 200px;
	float: left
}
.product {
	width: 180px;
	height: 180px;
	border: 1px solid #ddd;
}
.wrapper-right {
	width: 400px;
	float: right;
}

h4 {
	color: #a5adc4;
	float: left;
	padding-bottom: 10px;
}
.flag {
	height: 15px;
	width: 20px;
	border: 1px solid #ddd;
	float: right;
}
p {
	padding-top: 20px;
	clear: both;
	border-top: 2px solid #e7d5c1;
}

#past {
	clear: both;
	background-color: #f0f0f0;
	text-align: right;
	padding: 5px 10px 5px 0;
}
.arrow {
	vertical-align: text-bottom;
	padding-right: 5px;
}
small {
	padding: 20px;
	clear: both;
}

#footline {
	border: 0;
	border-top: 3px solid #fa5128;
	margin: 0 5px 10px 5px;
}

section {
	overflow: hidden;
	margin: 10px 0 10px 0;
}

footer {
	text-align: center;
	clear: both;
}

#footernav {
	position: relative;
	overflow: hidden;
}
#footerul {
	padding: 10px 0 10px 0;
	position: relative;
	left: 50%;
	float: left;
}
#footernav li {
	float: left;
	padding: 0 20px 0 20px;
	border-right: 1px solid #999;
	position: relative;
	left: -50%;
}
#footernav li:last-child {
	border: 0;
}