CSS だけでフォトギャラリー

CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。

(X)HTML は下記のように、画像を順不同のリストで並べている。

<ul id="gallery">
  <li><a href="#empty-anchor"><img src="01.png" /></a></li>
  <li><a href="#empty-anchor"><img src="02.png" /></a></li>
  <li><a href="#empty-anchor"><img src="03.png" /></a></li>
  <li><a href="#empty-anchor"><img src="04.png"" /></a></li>
  <li><a href="#empty-anchor"><img src="05.png" /></a></li>
  <li><a href="#empty-anchor"><img src="06.png" /></a></li>
  <li><a href="#empty-anchor"><img src="07.png" /></a></li>
  <li><a href="#empty-anchor"><img src="08.png" /></a></li>
  <li><a href="#empty-anchor"><img src="09.png" /></a></li>
  <li><a href="#empty-anchor"><img src="10.png" /></a></li>
</ul>

ポイントとしては、z-index を使ってレイヤーの階層を明示してあげないと、サムネールと拡大画像とかがぐちゃぐちゃになっちゃってヒドスな状態になる。ちなみに、:active や :focus の疑似クラスを使って拡大画像を固定させるんだけど、Opera とか Safari あたりはクリックを離すと active と focus の状態を維持してくんないので拡大画像が固定されない :-(

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/69

Another Life's Flavor - The scales fall from my eyes. (2005年11月10日 14:03)

CSSだけでフォトギャラリー(Lucky bag::blogさん発) すごいー。いつ見ても目から鱗ポロポロですよ! 私の本サイトの素材集もこのタイプにしよ... 続きを読む

徳の虫 - てst (2006年1月28日 23:20)

TITLE: てst URL: http://8473.seesaa.net/article/12418902.html IP: 59.106.28.133 BLOG NAME: 徳の虫 DATE: 01/28/2006 11:20:45 PM 続きを読む

Comments

nbr said:

おはつです。
XHTMLの構造が非常にシンプルなのがいいですね~。メンテナンス面でもかなり有用な気がします。

e-luck said:

なるだけ XHTML の方はシンプルにってのは重要ですよね :-)
CSS の方もリストの増減に対応しやすいようにってのを(一応)念頭に置いて考えてみたつもりだったりもします。