ウェブデザインのお勉強♪ HTML5, CSS, CGI...

ウェブデザインのお勉強♪ HTML5, CSS, CGI...

『Dear Diary』…昔からHP作りが好きで、最近HTML5を中心にまた独学で勉強を始めました。
CSS等の練習や、変わっていくであろうサイトの備忘録も兼ねて、ウェブデザインについて日々の気付き etc. を綴ります。

Dear Diary サイトはこちら♪


試行錯誤しながら、コツコツ作っています♪

テーマは、『日記』のようなサイト。

愛車やペットのインコなど、大好きなものや
大切な思い出がたくさん詰まっています。
Amebaでブログを始めよう!
昨日は、日本平動物園へ行ってきましたぶーぶー

久しぶりだったので楽しくて写真も結構たくさん撮りましたカメラドンッ


ちょっとしたアルバムのように小さい画像をたくさん並べ、さらに拡大して前後の画像へも行き来できるようにまとめました。


$ウェブデザインのお勉強♪ HTML5, CSS, CGI...-リストliで横並びの画像スライドショー


ウェブデザインのお勉強♪ HTML5, CSS, CGI...-リストliで横並びの画像スライドショー




全部で何枚になるか分からない写真や、後から新しく足していく可能性のある写真を、綺麗に並べるには表(table)よりもリスト(li)がいい音譜

tableだと、後から途中のセルに画像を入れると、列と段のhtmlを画像の新しい配置に合わせなければなりません。
また、新しい画像を上に来るように足していく場合、一番上の列の埋まり方が中途半端だと、空いているセル分の隙間が空いてしまいます。

それに対してリストなら、後から途中に画像を足しても、上(最初)に足しても、自動的にそれ以降の画像が動いてくれて、いつでも綺麗な並びになりますOK


ul の幅を指定して、liのstylesheetに
display: inline;
float: left;
を入れてあげると、ページのお好みの幅に合わせた横並びリストができますペンギンペンギンペンギン

このようにたくさん画像があって、一段目に入りきらない場合、自動的に折り返してくれるので整備性がいいですキラキラ


$ウェブデザインのお勉強♪ HTML5, CSS, CGI...-リストliで横並びの画像スライドショー



まだ全ての写真を載せきれていませんが、今回作ったのを基にお気に入りのスナップショットを載せていきますクマ