[CSS]スクリプト無しで、クリックで画像を拡大するスタイルシート
Lightboxなどのスクリプトを使用しないで、スタイルシートで実装する画像を拡大するテクニックをCSSplayから紹介します。
デモではギャラリー風に配置された各画像をクリックすると、下記のように拡大画像が表示されます。
画像を拡大表示
拡大画像を消すのは、右上のアイコンです。
仕組みは簡単に説明すると、サムネイル画像と拡大画像（テキスト含む）をインライン要素として配置し、focusとactive時にdisplayやpositionなどを変更しています。
対応ブラウザは、Safari(PC), Google Chromeとのことですが、上記キャプチャはFirefox3.5です。
IE6でも動作するバージョンは「CSS Light Box - Click version」です。
このテクニックは画像ギャラリーだけでなく、商品写真の拡大などにも応用がきくものとなっています。
商品写真をクリックすると、拡大します。
画像を拡大表示
Post on:2010年1月14日
Comments
[CSS]スクリプト無しで、クリックで画像を拡大するスタイルシート | コリス « とっても！ ちゅどん（雑記帳）
on 2010年1月14日
[...] [CSS]スクリプト無しで、クリックで画像を拡大するスタイルシート | コリス [CSS]スクリプト無しで、クリックで画像を拡大するスタイルシート | コリス [...]