Pure CSS Lightboxについて調べた
CSSだけで写真などをポップアップしたように表示する、Pure css Lightboxというテクニックがあります。
ググると、いくつかサンプルが出てきて、しかもそれぞれ手法が違ったりして興味深いです。
もしかしたら、セキュリティ上の理由とかで頑なにjsオフというルールのある企業なり組織もあるかもで、そんな企業のPCでpure css Lightboxのサイトを開いてしまおうものなら、なにjsオンにしてデレデレLightBoxで見てやがんだ！と大変ですね。
ちょっとまとめのために、pure css lightboxのいくつかをご紹介します。
pure css lightboxの分類は、いかにしてdisplay:noneな要素をdisplay:blockにするか？にあるみたいです。display:inlineでもいいけど。
また、画像のポップアップや背景前面に透過グレーを入れるのは、画面すべてを覆う要素を用意するということで普段あまり経験しないマークアップやcssになります。
デモを見ながら、すでにあるサイトのcssとの相性やクロスブラウザに泣きながら、導入サイト用に調整していく感じでしょうか。
まず、もっともオーソドックス？なものが:target擬似クラスを使ったもの。
Pure CSS LightBox
綺麗に作られたサンプルで、pure css Lightboxを僕に強く印象づけました。IE5.5以上と他のモダンブラウザで動作。
A href="#image1"などとして div id="image1" class="popup"な部分を .popup:target { display:block}します。
ブラウザの戻るで前の画像に戻れるのが便利で（うざかったり）、画像指定でリンクが張れるのは本家LightBoxより便利かも。
:targetのないIEについては、css expressionを使ってイメージを表示させているのも特徴。
ただし、ｊｓを切るとcss expressionも無効になるけど、そのための手当てがされていない。
IE7では css expressionを有効にするためにhackが必要。
また、IE8（いまだに:targetサポートされてない！）でcss expressionを有効にするためのmetaタグが必要。
このサンプルではイメージは上下中央に配置されないな、と思ったら本家LightBoxも上下中央ではなかった。
Example from the [CSS] Ninja
http://www.thecssninja.com/css/futurebox3
フォーム用のタグを使って、:select擬似クラスに対して、display:blockをしている。
ページ内ジャンプする:targetタイプのブラウザの戻るに記憶されたり、URLが変化するといった特徴はない。
これも同じようにIE8までは動かないので別途対処が必要。
またこのサンプルでは、ポップアップが上下中央になるようにdisplay:table,display:table-cellのcssテクニックが使われている。
ただし、それらのcssのないIE8以下では別途対処が必要。。。
また、画像のようにポップアップコンテンツの高さによって下のほうでオーバーレイが切れてしまっているので、デモをそのままでは使えない。
またデモでは、画像以外のhtmlコンテンツや、iframeもポップアップさせているので、あなたは何をポップアップさせたい？なんて心のささやきが聞こえてこない。
Automatic Slideshow with CSS3 - CreativeJuiz:
http://www.creativejuiz.fr/blog/les-tutoriels/effet-lightbox-en-css3-grace-a-transition
こちらは、focus擬似クラスを使ったもので、なんとタブキーで隣の画像に移れる！
ただし、HTML5になってしまう。
またcss3のアニメーションも使われていて、cssだけでとてもリッチ。
でもhtml5になってしまう。。。
以上、http://www.net-kit.com/10-css3-lightbox-alternatives/で紹介されてるところをざザックリみてみました。
HTML5とCSS3だけでLightbox - Pure CSS3, no javascript!!
最後に、pure css lightboxは本家lightboxにとって変わるか？ということで、css3のアニメーションやトランスフォームが使えるかを見てみた。
～で、画像のサイズ（高さが）が一定の場合は、
@-webkit-keyframes grow {
from {height: 0px;}
to {height: 300px;}
}
0から300pxとかで変化させられる。
でも、height 0%～100% とか transform:scaleY(1)みたいなのを入れてやると動かなかったので、画像のサイズが不均一だとアニメーションの設定の仕方がめんどくさくなる。これってcssの仕様か？？
また、本家LightBoxのグルーピング機能のようにして、ポップアップ状態で次の画像に移る場合、アニメーションを切ることができないように思う。
ふと思って、ブラウザシェアをググって見たら、まだie6が10%強で破竹の勢いのChromeよりやや多いくらいで、IE8もずっと多い。さらに、IE6が今年の中ごろに暫増してたそうで、マイクロソフト公式のIE6は腐った牛乳発言が逆になにかに火をつけてしまったのじゃないかと。。。
最後に、Firebugがあるのでメインで使っているFirefoxと、css3のアニメーションが動くChromeを切り替えるのがめんどいよ。
ググると、いくつかサンプルが出てきて、しかもそれぞれ手法が違ったりして興味深いです。
もしかしたら、セキュリティ上の理由とかで頑なにjsオフというルールのある企業なり組織もあるかもで、そんな企業のPCでpure css Lightboxのサイトを開いてしまおうものなら、なにjsオンにしてデレデレLightBoxで見てやがんだ！と大変ですね。
ちょっとまとめのために、pure css lightboxのいくつかをご紹介します。
pure css lightboxの分類は、いかにしてdisplay:noneな要素をdisplay:blockにするか？にあるみたいです。display:inlineでもいいけど。
また、画像のポップアップや背景前面に透過グレーを入れるのは、画面すべてを覆う要素を用意するということで普段あまり経験しないマークアップやcssになります。
デモを見ながら、すでにあるサイトのcssとの相性やクロスブラウザに泣きながら、導入サイト用に調整していく感じでしょうか。
まず、もっともオーソドックス？なものが:target擬似クラスを使ったもの。Pure CSS LightBox
綺麗に作られたサンプルで、pure css Lightboxを僕に強く印象づけました。IE5.5以上と他のモダンブラウザで動作。
A href="#image1"などとして div id="image1" class="popup"な部分を .popup:target { display:block}します。
ブラウザの戻るで前の画像に戻れるのが便利で（うざかったり）、画像指定でリンクが張れるのは本家LightBoxより便利かも。
:targetのないIEについては、css expressionを使ってイメージを表示させているのも特徴。
ただし、ｊｓを切るとcss expressionも無効になるけど、そのための手当てがされていない。
IE7では css expressionを有効にするためにhackが必要。
また、IE8（いまだに:targetサポートされてない！）でcss expressionを有効にするためのmetaタグが必要。
このサンプルではイメージは上下中央に配置されないな、と思ったら本家LightBoxも上下中央ではなかった。
Example from the [CSS] Ninja
http://www.thecssninja.com/css/futurebox3
ページ内ジャンプする:targetタイプのブラウザの戻るに記憶されたり、URLが変化するといった特徴はない。
これも同じようにIE8までは動かないので別途対処が必要。
またこのサンプルでは、ポップアップが上下中央になるようにdisplay:table,display:table-cellのcssテクニックが使われている。
ただし、それらのcssのないIE8以下では別途対処が必要。。。
また、画像のようにポップアップコンテンツの高さによって下のほうでオーバーレイが切れてしまっているので、デモをそのままでは使えない。
またデモでは、画像以外のhtmlコンテンツや、iframeもポップアップさせているので、あなたは何をポップアップさせたい？なんて心のささやきが聞こえてこない。
Automatic Slideshow with CSS3 - CreativeJuiz:
http://www.creativejuiz.fr/blog/les-tutoriels/effet-lightbox-en-css3-grace-a-transition
ただし、HTML5になってしまう。
またcss3のアニメーションも使われていて、cssだけでとてもリッチ。
でもhtml5になってしまう。。。
以上、http://www.net-kit.com/10-css3-lightbox-alternatives/で紹介されてるところをざザックリみてみました。
HTML5とCSS3だけでLightbox - Pure CSS3, no javascript!!
最後に、pure css lightboxは本家lightboxにとって変わるか？ということで、css3のアニメーションやトランスフォームが使えるかを見てみた。～で、画像のサイズ（高さが）が一定の場合は、
@-webkit-keyframes grow {
from {height: 0px;}
to {height: 300px;}
}
0から300pxとかで変化させられる。
でも、height 0%～100% とか transform:scaleY(1)みたいなのを入れてやると動かなかったので、画像のサイズが不均一だとアニメーションの設定の仕方がめんどくさくなる。これってcssの仕様か？？
また、本家LightBoxのグルーピング機能のようにして、ポップアップ状態で次の画像に移る場合、アニメーションを切ることができないように思う。
ふと思って、ブラウザシェアをググって見たら、まだie6が10%強で破竹の勢いのChromeよりやや多いくらいで、IE8もずっと多い。さらに、IE6が今年の中ごろに暫増してたそうで、マイクロソフト公式のIE6は腐った牛乳発言が逆になにかに火をつけてしまったのじゃないかと。。。
最後に、Firebugがあるのでメインで使っているFirefoxと、css3のアニメーションが動くChromeを切り替えるのがめんどいよ。