DesignWalkerさんのScriptを使わないCSSエフェクト、Tipsいろいろというエントリーの中に、「Scriptを使わないLightbox」というのがありました。本当にCSSのみで実現させていて、すごいなぁと思ったのでやり方を紹介します。

実装にはtarget疑似クラスを用います。IEとOperaがサポートしていなので、まだまだ実用的ではないと思うのですが、CSS3レベルのセレクタをうまく使えばこんなこともできるんだなーと感動しました。

具体的なコードは以下のような感じ。

<div id="thumb01">
    <a href="#large01"><img src="sample_s.jpg" alt="sample" /></a>
</div>

<div id="large01" class="lightbox">
    <a href="#thumb01"><img src="sample_l.jpg" alt="拡大画像 サンプル" /></a>
</div>

div.lightbox {
    display: none;
}

div.lightbox:target {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: url('screen.png');
    position: fixed;
    padding: 2em;
}

DEMO

IE、Operaではtarget疑似クラスをサポートしてないので動作しません。FirefoxかSafariで確認できると思います。

まず拡大画像を非表示にしておいて、target疑似クラスが有効なときに表示にするスタイルを設定しておきます。そして、サムネイル画像に#拡大画像のid名というリンク先を指定すると、サムネイル画像をクリックしたときに、拡大画像が表示されるわけです。拡大画像を消す時は拡大画像のリンク先に#サムネイル画像のidを指定すれば、拡大画像のクリックで拡大画像は非表示になり、サムネイル画像の位置に戻ります。考えた人はすごいなぁ。