[CSS]シンプルなHTMLで画像ギャラリーを実装するスタイルシート
Post on:2009年7月28日
sponsors
クリックで画像がかわる、軽快な画像ギャラリーを実装するスタイルシートをdevirtuosoから紹介します。
How to Build a CSS Image Viewer the Clever Way
demo
画像ギャラリーの構造は、左のサムネイル一覧がリスト要素、右の拡大画像がそれぞれdiv要素で実装されています。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <ul> <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li> <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li> <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li> <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li> </ul> <div id="images"> <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div> <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div> <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div> <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div> </div> </div> </textarea> |
スタイルシートは、下記のようになります。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<textarea name="code" class="css" cols="60" rows="5"> /* CSS Reset */ * { margin: 0; padding: 0; border: 0; outline: 0; } /* Setup Tabs */ ul{ background:#000; width:125px; /* Width of Tab Image */ float: left; list-style: none; border-right:8px solid black; } ul li{ height:75px; /* Height of Tab Image */ } /* Setup Tab so normal opacity is 40 and rollover is 100 */ ul li a img{ /* for IE */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); /* CSS3 standard */ opacity:0.4; } /* Change Opacity to 100% on roll over */ ul li a:hover img{ /* for IE */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); /* CSS3 standard */ opacity:1.0; } /* Places images to the right of the tabs, and hides non selected images */ #images{ width:500px; height:300px; overflow:hidden; /* Hides the non selected images */ float:left; } /* Places a black border around the entire viewer and centers it on the screen */ #wrapper{ width:633px; height:300px; border:8px solid black; margin:0px auto; } </textarea> |
拡大画像が表示される右のエリアはdiv要素なのでリンクを設定したり、divに高さを指定することでテキストなどのコンテンツを配置するなど打ち出しっぽく使用することもできそうです。
対応ブラウザの明記はありませんが、IE6でも動作しました。
sponsors
