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 の状態を維持してくんないので拡大画像が固定されない :-(
Comments
おはつです。
XHTMLの構造が非常にシンプルなのがいいですね～。メンテナンス面でもかなり有用な気がします。
なるだけ XHTML の方はシンプルにってのは重要ですよね :-)
CSS の方もリストの増減に対応しやすいようにってのを（一応）念頭に置いて考えてみたつもりだったりもします。