[CSS]シンプルなHTMLで画像ギャラリーを実装するスタイルシート

クリックで画像がかわる、軽快な画像ギャラリーを実装するスタイルシートをdevirtuosoから紹介します。

How to Build a CSS Image Viewer the Clever Way
demo

画像ギャラリーの構造は、左のサムネイル一覧がリスト要素、右の拡大画像がそれぞれdiv要素で実装されています。

HTML

<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>

スタイルシートは、下記のようになります。

CSS

/* 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;
    }

拡大画像が表示される右のエリアはdiv要素なのでリンクを設定したり、divに高さを指定することでテキストなどのコンテンツを配置するなど打ち出しっぽく使用することもできそうです。

対応ブラウザの明記はありませんが、IE6でも動作しました。

Post on:2009年7月28日