ブログなどで画像を一覧で表示したり、記事中に写真を埋め込んでいるのはよく見る光景です。そんな時、画像をクリックするとフローティングで拡大表示されます。また、次の写真に移動することもできるでしょう。 そんな見せ方はCSSとJavaScriptを使ってこそできるものだと思っていましたが、CSS Galleryは違います。スタイルシートだけで実現してしまうのです。

CSS Galleryの使い方

CSS Galleryのデモです。写真の並び方も格好良いです。

クリックでモーダル表示。これもスタイルシートのみです。

次の写真に切り替えもできます。

写真のリスト表示もサポートされています。

リスト表示でもモーダル表示できます。

実際に操作しているところです。

CSS Galleryが良いのはJavaScriptがオフになっていても使えるということです。JavaScriptを使えば力技で解決できますが、それをあえてスタイルシートだけで実現するところに面白さが感じられます。

CSS GalleryはCSS製のオープンソース・ソフトウェア（MIT License）です。

2015年12月11日 タイトル誤字修正

CSS Gallery SLaks/CSS-Gallery