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」

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

• CSSfont-familyの指定
• CSSfloatを使わずに、横並びのリストを実装
• CSSデフォルトで記述しておくと便利なCSS(スタイルシート)
• CSSCSSで垂直方向の中央表示を実装
• CSSFirefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御
• CSSレスポンシブWebデザインについて

「CSS」の他の記事を読む

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