<html>
<head>
<meta charset="utf-8">
<title>wonder land～ハンドメイドアクセサリー～</title>
<link rel="stylesheet" href="css/screen.css" media="screen,print">
<link rel="stylesheet" href="css/lightbox-0.5.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>作品集</h1>
<p>オーダー品などを含め、今までの作品の紹介ページです。画像をクリックすると大きく表示されます。</p>
</div>
<div id="content">
<h2>Gallery</h2>
<div id="gallery">
<ul>
<li>
<a href="img/IMG_0200.jpg" rel="lightbox" title="黒ウサギのパールネックレス">
<img src="img/IMG_0200_2.jpg" width="150" height="200" alt="黒ウサギのパールネックレス">
</a></li>
<li>
<a href="img/IMG_0248.jpg" rel="lightbox" title="コットンパールのエッフェル塔ブレスレット">
<img src="img/IMG_0248_2.jpg" width="150" height="200" alt="コットンパールのエッフェル塔ブレスレット">
</a></li>
<li>
<a href="img/IMG_0336.jpg" rel="lightbox" title="アリスのウサギイヤリング">
<img src="img/IMG_0336_2.jpg" width="150" height="200" alt="アリスのウサギイヤリング">
</a></li>
<li>
<a href="img/IMG_2484.jpg" rel="lightbox" title="レースの姫猫ブローチ">
<img src="img/IMG_2484_2.jpg" width="150" height="200" alt="レースの姫猫ブローチ">
</a></li>
<li>
<a href="img/IMG_2112.jpg" rel="lightbox" title="時計ウサギのブローチ">
<img src="img/IMG_2112_2.jpg" width="150" height="200" alt="時計ウサギのブローチ">
</a></li>
<li>
<a href="img/IMG_4541.jpg" rel="lightbox" title="ビックな天使ネックレス">
<img src="img/IMG_4541_2.jpg" width="150" height="200" alt="ビックな天使ネックレス">
</a></li>
<li>
<a href="img/IMG_1561.jpg" rel="lightbox" title="ラブリーウサギの麦わら帽子">
<img src="img/IMG_1561_2.jpg" width="150" height="200" alt="ラブリーウサギの麦わら帽子">
</a></li>
<li>
<a href="img/IMG_9746.jpg" rel="lightbox" title="キラキラ夜空ネックレス">
<img src="img/IMG_9746_2.jpg" width="150" height="200" alt="キラキラ夜空ネックレス">
</a></li>
<li>
<a href="img/IMG_1593.jpg" rel="lightbox" title="淡水パールとカルセドニーのブレス">
<img src="img/IMG_1593_2.jpg" width="150" height="200" alt="淡水パールとカルセドニーのブレス">
</a></li>
<li>
<a href="img/IMG_9057.jpg" rel="lightbox" title="レースと時計ウサギのブローチ">
<img src="img/IMG_9057_2.jpg" width="150" height="200" alt="レースと時計ウサギのブローチ">
</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$( '#gallery a' ).lightBox();
});
</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
background: #FFF;
}
a {
text-decoration: none;
}
#container{
width:960px;
height:auto;
}
#header{
width:960px;
height:auto;
}
#content{
width:960px;
height:auto;
}
#gallery{
background-color:#FFC;
padding: 10px;
width: 960px;
}
#gallery ul{
list-style: none;
}
#gallery ul li{
display: inline;
}
#gallery ul img{
border: 5px solid #FFF;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img{
border: 5px solid #FFC;
border-width: 5px 5px 20px;
color: #FFC;
}
#gallery ul a:hover{
color:#FFF;
}
