CSSのみでlightboxを実装

CSS2009年3月28日

よく巷で使われているlightboxを、javascriptを使わず、CSSのみで実装する方法をご紹介いたします。

上記のでもページにてCSSのみで実装しているlightboxのサンプルが掲載されています。
javascriptなしとうたってはいますが、実際はonclick内でゴニョゴニョやっているので完全に「javascriptなし」というわけではありません。ただ、実際javascriptを読み込まず、デザインもカスタマイズ可能であり、動作も軽いですので、結構お手軽に使えるのではないでしょうか。
（個人的にはlightboxのエフェクトは不要なものだと思っています）

念のため、下記にもサンプルページを用意しました。

• CSSのみでlightboxを実装

ちなみにFirefox 2、Firefox 3、IE6、IE7、Safari(windows)で動作確認済みです。

• CSSのデバッグ方法
• CSSを自動でIE6に対応させるオンラインサービス「ie6fixer」

この記事を読んでいる方にオススメの記事

• CSSIE8における拡大縮小バグ
• CSSテキストの両端を均等にそろえるCSS
• CSSCSSを自動でIE6に対応させるオンラインサービス「ie6fixer」
• CSSCSS3でborder（ボーダー）のグラデーションを実現
• CSSfloatさせた要素を簡単にfloat解除させる「clearFix」
• CSS画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS

「CSS」の他の記事を読む

• ※承認制のため、即時には反映されません。