[CSS]シンプルなHTMLで画像ギャラリーを実装するスタイルシート

クリックで画像がかわる、軽快な画像ギャラリーを実装するスタイルシートをdevirtuosoから紹介します。

実装のイメージ

How to Build a CSS Image Viewer the Clever Way
demo

画像ギャラリーの構造は、左のサムネイル一覧がリスト要素、右の拡大画像がそれぞれdiv要素で実装されています。

HTML

スタイルシートは、下記のようになります。

CSS

拡大画像が表示される右のエリアはdiv要素なのでリンクを設定したり、divに高さを指定することでテキストなどのコンテンツを配置するなど打ち出しっぽく使用することもできそうです。

対応ブラウザの明記はありませんが、IE6でも動作しました。

sponsors

top of page

©2018 coliss