昨日は、日本平動物園へ行ってきました
久しぶりだったので楽しくて写真も結構たくさん撮りました
ちょっとしたアルバムのように小さい画像をたくさん並べ、さらに拡大して前後の画像へも行き来できるようにまとめました。
全部で何枚になるか分からない写真や、後から新しく足していく可能性のある写真を、綺麗に並べるには表(table)よりもリスト(li)がいい
tableだと、後から途中のセルに画像を入れると、列と段のhtmlを画像の新しい配置に合わせなければなりません。
また、新しい画像を上に来るように足していく場合、一番上の列の埋まり方が中途半端だと、空いているセル分の隙間が空いてしまいます。
それに対してリストなら、後から途中に画像を足しても、上(最初)に足しても、自動的にそれ以降の画像が動いてくれて、いつでも綺麗な並びになります
ul の幅を指定して、liのstylesheetに
display: inline;
float: left;
を入れてあげると、ページのお好みの幅に合わせた横並びリストができます
このようにたくさん画像があって、一段目に入りきらない場合、自動的に折り返してくれるので整備性がいいです
まだ全ての写真を載せきれていませんが、今回作ったのを基にお気に入りのスナップショットを載せていきます