jQueryを使ったデモサイト「Kitchenware Club」

プレビュー

↓別ウィンドウを開いて見る
Kitchenware Club

ポイント

アコーディオンパネル

jQuery UIを使用。オプションでアイコンの画像などを変更してみました。

$(function(){
  $("#nav").accordion({
    header: "h3",
    collapsible:true,
    animated: 'bounceslide' ,
    autoHeight:false,
    event: 'click',
    active:5,
    icons: {
      'header': 'ui-icon-folder-collapsed',
      'headerSelected': 'ui-icon-folder-open'
    }
  });
});

商品画像

「厚手ガラスタンブラー」「木製スプーン」「ステンレスマルチトング」で画像検索
Photoshopで画像解像度の変更
- サムネイル用：幅180px、高さ150px
- Lightbox用：幅240px、高さ240px
JPEGminiで圧縮

ビルボード画像

写真素材足成【フリーフォト、無料写真素材サイト】

キッチン用品をピックアップしてPhotoshopでサイズの変更(幅670px、高さ290px)
JPEGminiで圧縮

ロゴ画像

photoshopで作成

↓IE6でも透過pngがきちんと表示されるように変換してくれるソフト
 ImageAlpha ― lossy compression for 24-bit PNG images (like JPEG with alpha channel!)

その他画像

国旗：世界の国旗一覧
矢印アイコン：Photoshopで作成
メールアイコン：Photoshopで作成

Lightbox

Lightbox 2を使用
 Lightbox

イメージスライダー

jQueryプラグイン「Nivo Slider」を使用。
Nivo Slider - The World's Most Popular jQuery & WordPress Image Slider

$(function(){
  $('#slider').nivoSlider({
    effect:'random',
    captionOpacity:0.8,
    animSpeed:1000,
    pauseTime:3000,
    slices:7,
    startSlide:0,
    directionNav:true,
    controlNav : true, 
    pauseOnHover:true
  });
});

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Kitchenware Club</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link href="lightbox.css" rel="stylesheet">
<script src="lightbox.js"></script>
<script src="jquery.nivo.slider.pack.js"></script>
<link href="nivo-slider.css" rel="stylesheet">
<link href="themes/default/default.css" rel="stylesheet">
<!--[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]-->
<style>
	article, aside, dialog, figure, footer, header,
	hgroup, menu, nav, section { display: block; }
</style>
<script>
<!--
$(function(){
	$("#nav").accordion({
		header: "h3",
		collapsible:true,
		animated: 'bounceslide' ,
		autoHeight:false,
		event: 'click',
		active:5,
		icons: {
			'header': 'ui-icon-folder-collapsed',
			'headerSelected': 'ui-icon-folder-open'
		}
	});
});
-->
</script>
<script>
<!--
$(function(){
  $('#slider').nivoSlider({
  		effect:'random',
		captionOpacity:0.8,
		animSpeed:1000,
		pauseTime:3000,
		slices:7,
		startSlide:0,
		directionNav:true,
		controlNav : true, 
		pauseOnHover:true
    });
});
-->
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="#"><img src="logo2.png" alt="Kitchenware Club"></a></h1>  
<div id="contact">
<a href="mailto:xxxr@sample.mail">お問い合わせ</a>
</div> 
<div id="nav">
  <div>
    <h3><a href="#">TOP</a></h3>
  </div>
  <div>
    <h3><a href="#">Kitchenware Club</a></h3>
    <ul>
      <li><a href="#">リンク項目その１</a></li>
      <li><a href="#">リンク項目その２</a></li>
    </ul>
  </div>
  <div>
    <h3><a href="#">製品情報</a></h3>
    <ul>
      <li><a href="#">リンク項目その１</a></li>
      <li><a href="#">リンク項目その２</a></li>
    </ul> 
  </div>
  <div> 
    <h3><a href="#">会社概要</a></h3>
    <ul>
      <li><a href="#">リンク項目その１</a></li>
      <li><a href="#">リンク項目その２</a></li>
    </ul>
  </div>
  <div>  
    <h3><a href="#">取扱ショップ一覧</a></h3>
    <ul>
      <li><a href="#">リンク項目その１</a></li>
      <li><a href="#">リンク項目その２</a></li>
    </ul>
  </div> 
</div>
<div id="slider">
  <a href="#"><img src="01.jpg" alt="" width="670" height="290"></a>
  <a href="#"><img src="02.jpg" alt="" width="670" height="290"></a>
  <a href="#"><img src="03.jpg" alt="" width="670" height="290"></a>
  <a href="#"><img src="04.jpg" alt="" width="670" height="290"></a>
  <a href="#"><img src="05.jpg" alt="" width="670" height="290"></a>
  <a href="#"><img src="06.jpg" alt="" width="670" height="290"></a>
  <a href="#"><img src="07.jpg" alt="" width="670" height="290"></a>
  <a href="#"><img src="08.jpg" alt="" width="670" height="290"></a>
</div>
</div>
<div id="wrappaer">
<div id="sidebar">
  <h2>更新情報</h2>
  <dl>
  <dt>2012.7.2</dt>
  <dd><a href="#">夏の新作商品を5点追加しました。</a></dd>
  <dt>2012.6.22</dt>
  <dd><a href="#">日本中の食器が集まるイベント"日本食器展示会"にKichinwere Clubも出品しました。</a></dd>
  <dt>2012.6.12</dt>
  <dd><a href="#">取扱ショップ情報を更新しました。</a></dd>
  </dl>
</div>
<div id="content">
  <h2>新着製品</h2>
  <div class="product">
  <a href="tumbler_b.jpg" rel="lightbox[roadtrip]" title="厚手ガラスタンブラー・小 "><img src="tumbler.jpg" alt="" class="alignleft" width="180" height="150"></a>
  <h3>Kitchenware Clubオリジナル</h3>
  <h4>厚手ガラスタンブラー・小 約280ml</h4>
  <p>梨地の丈夫な厚手ガラスです。<br>割れにくいガラスを使用しています。<br>これからの季節にピッタリのタンブラーです。</p>
  </div>
  <div class="product">
  <a href="spoon_b.jpg" rel="lightbox[roadtrip]" title="木製 スプーン"><img src="spoon.jpg" alt="" class="alignleft" width="180" height="150"></a>
  <h3>山崎木工</h3>
  <h4>木製 スプーン 39×155mm</h4>
  <p>柔らかな形状の木製スプーンです。<br>何通りもの試作品を作り、その中から<br>最も手になじむ物を製品化しました。</p>
  </div>
  <div class="product">
  <a href="tongs_b.jpg" rel="lightbox[roadtrip]" title="ステンレスマルチトング"><img src="tongs.jpg" alt="" class="alignleft" width="180" height="150"></a>
  <h3 class="belgium">WAECHTERSBACH</h3>
  <h4>ステンレスマルチトング 長さ23cm</h4>
  <p>ドイツの老舗食器メーカー・べヒタフバッハからシンプルなステンレストングの入荷です。<br>軽くてつかみやすい設計になっています。</p>
  </div>
  <div id="archive">
  <p><a href="#">以前の新着情報を見る</a></p> 
  </div>
</div>
</div>
<div id="info">
  <ul>
  <li class="first"><a href="#">サイトマップ</a></li>
  <li><a href="#">プライバシーポリシー</a></li>
  <li><a href="#">アクセシビリティポリシー</a></li>
  </ul>
</div>
<div id="footer">
  <address>Copyright &copy; 2012 Kitchenware Club All Rights Reserved.</address>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";

/* reset */
* {
	margin:0;
	padding:0;	
}

img {
	border:none;	
}

ul {
	list-style-type:none;	
}

a {
	color:#5595D5;
}

a:hover {
	text-decoration:none;
}


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


#container {
	width:980px;
	margin:0 auto 30px;
	background-color:#fff;
	box-shadow: 1px 1px 10px #333;
	-moz-box-shadow: 1px 1px 10px #333;
	-webkit-box-shadow: 1px 1px 10px #333;
	-ms-box-shadow: 1px 1px 10px #333;
	
}

/* header */
#header {
	padding:20px;
	width:940px;
	height:370px;
	margin:0 0 20px;
}
#header h1 {
	padding:0 0 20px;
}
#contact {
	float:right;
	margin:-85px 0 0 0;
	padding:0 0 0 38px;
	background-image:url(mail.jpg);
	background-repeat:no-repeat;
	background-position:left 50%;
}
#slider {
	width:670px;
	float:left;
}


/* nav */
#nav{
	float:left;
	width:250px;
	margin:0 20px 0 0;
}

#nav ul li{
	margin:0 0 0 20px;
}

#nav ul li a {
	font-weight:bold;
	color:#5595D5;
}

/* wrappaer */
#wrappaer {
	width:940px;
	height:auto;
	overflow:auto;
	border-top:10px solid #eee;
	padding:20px 0;
	margin: 20px;
}

h2 {
	color:#AFA198;
	border-left:8px solid #f60;
	padding:10px 0 5px 10px;
	background-color:#eee;
}


/* sidebar */
#sidebar {
	width:360px;
	float:left;
	margin:0 20px 0 0;
}
#sidebar dl {
	padding:20px 0 0;
}

#sidebar dt {
	padding:0 0 0 22px;
	background-image:url(arrow.gif);
	background-repeat:no-repeat;
	background-position:left 50%;
}
#sidebar dd {
	padding:0 0 10px 13px;
	margin:10px 0;
	border-bottom:1px dotted #333;
}


/* content */
#content {
	width:560px;
	float:left;
}
.product {
	clear:both;	
	margin:20px 0;
}
.product img {
	border:2px solid #ccc;
}
.alignleft {
	float:left;
	margin:0 30px 20px 0;
	
}
#content h3 {
	color:#6E4225;
	background-image:url(japan.gif);
	background-repeat:no-repeat;
	background-position:right 50%;
}
#content h3.belgium {
	background-image:url(belgium.gif);
}
#content h4 {
	font-weight:normal;
	border-bottom:3px solid #E8D3C2;
	margin:10px 0 10px 210px;
	
}
#content .product p {
	font-size:16px;
	line-height:1.6;
}

#archive {
	float:right;
	background-color:#eee;
	width:550px;
	padding:10px 10px 10px 0;
	text-align:right;
	background-image:url(arrow.gif);
	background-repeat:no-repeat;
	background-position:67% 50%;
}


/* info */
#info {
	clear:both;	
}
#info ul {
	margin:0 0 0 228px;
}

#info ul li {
	float:left;
	padding:0 13px;
	margin:0 0 20px;
	border-left:3px solid #999;
}
#info ul li.first {
	border:none;
}
#info ul li a {
	text-decoration:none;
	color:#000;
	display:inline;
}
#info ul li a:hover {
	text-decoration:underline;
	color:#000;
}


/* footer */
#footer {
	clear:both;
	border-top:5px solid #f60;
	text-align:center;
	padding:20px 0;
	margin:0 5px;
}

#footer address {
	font-style:normal;
	font-size:14px;
}