実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>CSS Decorative Gallery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style type="text/css">
/* ---------- gallery styles start here ----------------------- */
.gallery {
list-style:none;
margin:0;
padding:0;
}
.gallery a {
text-decoration:none;
}
.gallery li {
margin:10px;
padding:0;
float:left;
position:relative;
width:240px;
height:180px;
}
/* 例1：Simple Gallery */
.gallery li.tape img {
background:#fff;
border:solid 1px #ccc;
padding:4px;
}
.gallery li.tape span {
width:77px;
height:27px;
display:block;
position:absolute;
top:-12px;
left:80px;
background:url(/content/img/css/decorative-gallery/tape.png) no-repeat;
}
/* 例2：Mini Icons */
.gallery li.mini-icons {
margin:10px;
padding:0;
float:left;
position:relative;
width:240px;
height:180px;
}
.gallery li.mini-icons img {
background:#fff;
border:solid 1px #ccc;
padding:4px;
}
.gallery li.mini-icons span {
width:20px;
height:18px;
display:block;
position:absolute;
bottom:10px;
right:10px;
}
.gallery li.mini-icons .favorite {
background:url(/content/img/css/decorative-gallery/favorite.gif) no-repeat;
}
.gallery li.mini-icons .photo {
background:url(/content/img/css/decorative-gallery/photo.gif) no-repeat;
}
.gallery li.mini-icons .video {
background:url(/content/img/css/decorative-gallery/video.gif) no-repeat;
}
.gallery li.mini-icons a:hover img {
border-color:#666;
}
.gallery li.mini-icons a:hover span {
background-position:left -22px;
}
/* 例3：Photo with CSS */
.gallery li.photo-with-text:hover img {
border-color:#000;
}
.gallery li.photo-with-text img {
background:#fff;
border:solid 1px #888;
padding:5px;
}
.gallery li.photo-with-text em {
background:#fff url(/content/img/css/decorative-gallery/grey-gradient.gif) repeat-y;
color:#000;
font-style:normal;
padding:2px 10px;
display:block;
position:absolute;
top:160px;
left:9px;
border:1px solid #999;
border-left-color:#888;
}
.gallery li.photo-with-text a:hover em {
background:#ffdb01 url(/content/img/css/decorative-gallery/orange-gradient.gif) repeat-y;
border-color:#c25b08;
}
/* 例4：Popup Text */
.gallery li.popup-text img {
background:#fff;
border:solid 1px #ccc;
padding:5px;
}
.gallery li.popup-text:hover img {
border-color:#999;
}
.gallery li.popup-text em {
width:102px;
background:url(/content/img/css/decorative-gallery/bubble.gif) no-repeat;
padding:3px 0 6px;
display:none;
position:absolute;
top:-2px;
left:80px;
line-height:1;
font-style:normal;
text-align:center;
}
..gallery li.popup-text a {
text-decoration:none;
color:#000;
}
.gallery li.popup-text a:hover em {
display:block;
}
/* 例5：Mini Paper Clip */
.gallery li.mini-paper-clip:hover img {
border-color:#000;
}
.gallery li.mini-paper-clip img {
background:#fff;
border:solid 1px #ccc;
padding:5px;
}
.gallery li.mini-paper-clip em {
background:#fff;
color:#000;
font-style:normal;
padding:2px 8px 0 22px;
display:block;
position:absolute;
top:20px;
left:5px;
border:1px solid #999;
}
.gallery li.mini-paper-clip span {
width:30px;
height:60px;
display:block;
position:absolute;
top:7px;
left:9px;
background:url(/content/img/css/decorative-gallery/paper-clip-mini.png) no-repeat;
z-index:3;
}
/* 例6：Cork Board Gallery */
.colk {
padding:10px;
margin:20px 10px;
background:transparent url(/content/img/css/decorative-gallery/cork-bg.png) repeat 0 0;
}
.gallery li.cork-board {
margin:20px 10px 5px;
padding:8px;
background:url(/content/img/css/decorative-gallery/polaroid.png) no-repeat;
float:left;
position:relative;
width:186px;
}
.gallery li.cork-board span {
background:url(/content/img/css/decorative-gallery/tape.png) no-repeat;
width:77px;
height:27px;
display:block;
position:absolute;
left:54px;
top:-12px;
}
.gallery li.cork-board em {
display:block;
padding:0 20px 0 0;
text-align:center;
color:#333;
line-height:1;
}
.gallery li.cork-board img {
width:170px; height:120px;
}
/* 例7：Cork Board With Masking Tape */
.gallery li.cork-board-with-masking-tags {
margin:20px 10px 5px;
float:left;
position:relative;
width:186px;
height:142px;
}
.gallery li.cork-board-with-masking-tags .bg {
background:url(/content/img/css/decorative-gallery/polaroid-short.png) no-repeat;
width:186px;
height:142px;
position:absolute;
left:0;
top:0;
}
.gallery li.cork-board-with-masking-tags em {
width:110px;
display:block;
padding:10px;
text-align:center;
color:#333;
line-height:1;
background:url(/content/img/css/decorative-gallery/tape2.png) no-repeat;
position:absolute;
top:-17px;
left:30px;
z-index:3;
}
.gallery li.cork-board-with-masking-tags a {
color:#666;
}
.gallery li.cork-board-with-masking-tags a:hover {
color:#000;
text-decoration:underline;
}
.gallery li.cork-board-with-masking-tags img {
position:absolute;
top:8px;
left:8px;
z-index:2;
width:170px; height:120px;
}
/* 例8：Art Gallery - Black Frame */
.gallery li.black-frame {
margin:15px;
padding:0;
float:left;
position:relative;
width:212px;
height:175px;
}
.gallery li.black-frame a {
color:#666;
}
.gallery li.black-frame a:hover {
color:#000;
text-decoration:underline;
}
.gallery li.black-frame img {
padding:20px 0 0 21px;
width:170px; height:120px;
}
.gallery li.black-frame em {
width:212px;
height:30px;
background:url(/content/img/css/decorative-gallery/picture-frame.png) no-repeat;
display:block;
position:absolute;
text-align:center;
padding-top:145px;
line-height:1;
}
/* 例9：Art Gallery - Gold Frame */
.gallery li.gold-frame {
margin:20px;
padding:0;
float:left;
position:relative;
width:212px;
height:175px;
}
.gallery li.gold-frame a {
color:#666;
}
.gallery li.gold-frame a:hover {
color:#000;
text-decoration:underline;
}
.gallery li.gold-frame img {
width:170px; height:120px;
padding:20px 0 0 21px;
}
.gallery li.gold-frame em {
width:216px;
background:url(/content/img/css/decorative-gallery/gold-frame.png) no-repeat;
display:block;
position:absolute;
top:-2px;
left:-2px;
text-align:center;
padding-top:168px;
}
/* 例10：Grungy Watercolor */
.gallery li.grungy {
margin:10px;
padding:0;
float:left;
position:relative;
width:212px;
height:175px;
}
.gallery li.grungy a {
color:#999;
}
.gallery li.grungy a:hover {
color:#000;
text-decoration:underline;
}
.gallery li.grungy img {
width:170px; height:120px;
padding:14px 12px 12px 13px;
}
.gallery li.grungy em {
width:193px;
height:25px;
display:block;
position:absolute;
top:2px;
left:2px;
background:url(/content/img/css/decorative-gallery/watercolor-mask.png) no-repeat;
text-align:center;
padding-top:140px;
line-height:1;
}
/* 例11：Glossy Style */
.gallery li.glossy {
margin:15px 10px;
padding:0 12px;
float:left;
position:relative;
width:180px;
height:130px;
background:url(/content/img/css/decorative-gallery/drop-shadow.png) no-repeat center bottom;
}
.gallery li.glossy img {
background:#fff;
border:solid 1px #ccc;
border-bottom:none;
width:170px; height:120px;
}
.gallery li.glossy a:hover img {
border-color:#000;
}
.gallery li.glossy span {
width:172px;
height:84px;
display:block;
position:absolute;
top:0px;
left:12px;
background:url(/content/img/css/decorative-gallery/glossy-gradient.png) no-repeat;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.gallery em,
.gallery .bg,
.gallery span {
behavior: url(/content/js/iepngfix.htc); cursor: pointer;
}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://www.webdesignerwall.com/tutorials/css-decorative-gallery/'>CSS Decorative Gallery</a> | 設置サンプル</h1>
<ul class="gallery cf">
<!-- 例1：Simple Gallery -->
<li class="tape"><a href="#" title="Simple Gallery"><span></span><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a></li>
<!-- 例2：Mini Icons -->
<li class="mini-icons"><a href="#" title="Mini Icons: favorite"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /><span class="favorite"></span></a></li>
<li class="mini-icons"><a href="#" title="Mini Icons: photo"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /><span class="photo"></span></a></li>
<li class="mini-icons"><a href="#" title="Mini Icons: video"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /><span class="video"></span></a></li>
<!-- 例3：Photo With Text -->
<li class="photo-with-text"><a href="#" title="Photo With Text"><em>くまさんケーキ</em><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a></li>
<!-- 例4：Popup Text -->
<li class="popup-text"><a href="#" title="Popup Text"><em>くまさんケーキ</em><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a></li>
<!-- 例5： Mini Paper Clip -->
<li class="mini-paper-clip"><a href="#" title="Mini Paper Clip"><span></span><em>くまさんケーキ</em><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a></li>
<!-- 例8：Art Gallery - Black Frame -->
<li class="black-frame"><a href="#" title="Art Gallery - Black Frame: Black Frame"><em>くまさんケーキ</em><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a></li>
<!-- 例9：Art Gallery - Gold Frame -->
<li class="gold-frame"><a href="#" title="Art Gallery - Gold Frame"><em>くまさんケーキ</em><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a></li>
<!-- 例10：Grungy Watercolor -->
<li class="grungy"><a href="#" title="Grungy Watercolor"><em>くまさんケーキ</em><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a></li>
<!-- 例11：Glossy Style -->
<li class="glossy"><a href="#" title="Glossy Style"><span></span><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a></li>
</ul>
<div class="colk">
<ul class="gallery cf">
<!-- 例6：Cork Board Gallery -->
<li class="cork-board"><a href="#" title="Cork Board Gallery"><span></span><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="image" /></a><em>くまさんケーキ</em></li>
<!-- 例7：Cork Board With Masking Tape -->
<li class="cork-board-with-masking-tags"><a href="#" title="Cork Board With Masking Tape"><em>くまさんケーキ</em><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" /></a><div class="bg"></div></li>
</ul>
</div>
</div>
</body>
</html>
くまさんケーキ